prime-ui-kit 0.6.0 → 0.7.1

package/dist/internal/states.d.ts

@@ -41,6 +41,7 @@ export declare const componentSizes: {
     readonly sidebar: readonly ["s", "m", "l", "xl"];
     readonly drawer: readonly ["s", "m", "l", "xl"];
     readonly dataTable: readonly ["s", "m", "l", "xl"];
+    readonly emptyPage: readonly ["s", "m", "l", "xl"];
 };
 export declare const buttonModes: readonly ["filled", "stroke", "lighter", "ghost", "fancy"];
 export type InteractionState = (typeof interactionStates)[number];
@@ -83,5 +84,6 @@ export type ProgressBarSize = (typeof componentSizes.progressBar)[number];
 export type SidebarSize = (typeof componentSizes.sidebar)[number];
 export type DrawerSize = (typeof componentSizes.drawer)[number];
 export type DataTableSize = (typeof componentSizes.dataTable)[number];
+export type EmptyPageSize = (typeof componentSizes.emptyPage)[number];
 export type ButtonMode = (typeof buttonModes)[number];
 //# sourceMappingURL=states.d.ts.map

package/dist/internal/states.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"states.d.ts","sourceRoot":"","sources":["../../../src/internal/states.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"states.d.ts","sourceRoot":"","sources":["../../../src/internal/states.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prime-ui-kit",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "React 19 UI kit: CSS Modules, semantic design tokens (--prime-sys-*), composable components — forms, modals, selects, tables, navigation, overlays. TypeScript, ESM, a11y-oriented.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/components/accordion/COMPONENT.md

@@ -40,7 +40,7 @@ import { Package, ShieldCheck, Truck } from "lucide-react";
 
 export function Example() {
   return (
-    <Accordion.Root type="single" size="m" layout="grouped" defaultValue="delivery" collapsible>
+    <Accordion.Root type="single" layout="grouped" defaultValue="delivery" collapsible>
       <Accordion.Item value="delivery">
         <Accordion.Header>
           <Accordion.Trigger>

package/src/components/accordion/examples/01-faq-marketing.tsx

@@ -9,7 +9,7 @@ import styles from "./examples.module.css";
  */
 export default function AccordionExampleFaqMarketing() {
   return (
-    <Accordion.Root type="single" size="m" layout="grouped" defaultValue="shipping">
+    <Accordion.Root type="single" layout="grouped" defaultValue="shipping">
       <Accordion.Item value="shipping">
         <Accordion.Header>
           <Accordion.Trigger>

package/src/components/accordion/examples/02-settings-panels.tsx

@@ -10,12 +10,7 @@ import styles from "./examples.module.css";
  */
 export default function AccordionExampleSettingsPanels() {
   return (
-    <Accordion.Root
-      type="multiple"
-      size="m"
-      layout="separate"
-      defaultValue={["profile", "notifications"]}
-    >
+    <Accordion.Root type="multiple" layout="separate" defaultValue={["profile", "notifications"]}>
       <Accordion.Item value="profile">
         <Accordion.Header>
           <Accordion.Trigger>

package/src/components/accordion/examples/03-checkout-order-summary.tsx

@@ -10,7 +10,7 @@ import styles from "./examples.module.css";
  */
 export default function AccordionExampleCheckoutOrderSummary() {
   return (
-    <Accordion.Root type="single" size="m" layout="grouped" defaultValue="totals">
+    <Accordion.Root type="single" layout="grouped" defaultValue="totals">
       <Accordion.Item value="totals">
         <Accordion.Header>
           <Accordion.Trigger>

package/src/components/accordion/examples/04-api-docs-sections.tsx

@@ -15,7 +15,6 @@ export default function AccordionExampleApiDocsSections() {
   return (
     <Accordion.Root
       type="single"
-      size="m"
       layout="grouped"
       value={open}
       onValueChange={(next) => {

package/src/components/accordion/examples/05-knowledge-base-categories.tsx

@@ -10,13 +10,7 @@ import styles from "./examples.module.css";
  */
 export default function AccordionExampleKnowledgeBaseCategories() {
   return (
-    <Accordion.Root
-      type="single"
-      size="m"
-      layout="separate"
-      defaultValue="basics"
-      collapsible={false}
-    >
+    <Accordion.Root type="single" layout="separate" defaultValue="basics" collapsible={false}>
       <Accordion.Item value="basics">
         <Accordion.Header>
           <Accordion.Trigger>

package/src/components/avatar/COMPONENT.md

@@ -46,7 +46,7 @@ export function CanonicalAvatarDemo() {
       <Typography as="p" variant="body-small" tone="muted">
         Overlapping group + overflow
       </Typography>
-      <Avatar.Group.Root size="m" aria-label="Reviewers: three faces, two not shown">
+      <Avatar.Group.Root aria-label="Reviewers: three faces, two not shown">
         <Avatar.Root>
           <Avatar.Image src={sampleSrc} alt="" />
           <Avatar.Fallback>A</Avatar.Fallback>
@@ -63,7 +63,7 @@ export function CanonicalAvatarDemo() {
       <Typography as="p" variant="body-small" tone="muted">
         Icon-only fallback
       </Typography>
-      <Avatar.Root size="m" aria-label="Invitee, no photo yet">
+      <Avatar.Root aria-label="Invitee, no photo yet">
         <Avatar.Fallback>
           <Icon name="field.email" size="l" tone="subtle" />
         </Avatar.Fallback>

package/src/components/avatar/examples/app-header-nav.tsx

@@ -16,25 +16,17 @@ export default function AvatarAppHeaderNavExample() {
           Prime Console
         </Typography.Root>
         <nav className={styles.row} aria-label="Primary">
-          <LinkButton.Root href="#overview" size="m">
-            Overview
-          </LinkButton.Root>
-          <LinkButton.Root href="#projects" size="m">
-            Projects
-          </LinkButton.Root>
-          <LinkButton.Root href="#settings" size="m">
-            Settings
-          </LinkButton.Root>
+          <LinkButton.Root href="#overview">Overview</LinkButton.Root>
+          <LinkButton.Root href="#projects">Projects</LinkButton.Root>
+          <LinkButton.Root href="#settings">Settings</LinkButton.Root>
         </nav>
       </div>
       <div className={styles.navUser}>
-        <Avatar.Root size="m" aria-label="Signed in as Jamie Chen">
+        <Avatar.Root aria-label="Signed in as Jamie Chen">
           <Avatar.Image src={portrait} alt="" />
           <Avatar.Fallback>JC</Avatar.Fallback>
         </Avatar.Root>
-        <LinkButton.Root href="#account" size="m">
-          Account
-        </LinkButton.Root>
+        <LinkButton.Root href="#account">Account</LinkButton.Root>
       </div>
     </header>
   );

package/src/components/avatar/examples/comment-thread.tsx

@@ -38,7 +38,7 @@ export default function AvatarCommentThreadExample() {
     <ul className={styles.list} aria-label="Discussion">
       {comments.map((c) => (
         <li key={c.id} className={styles.rowStretch}>
-          <Avatar.Root size="m" aria-label={c.author}>
+          <Avatar.Root aria-label={c.author}>
             {c.src ? <Avatar.Image src={c.src} alt="" /> : null}
             <Avatar.Fallback>{c.initials}</Avatar.Fallback>
           </Avatar.Root>

package/src/components/avatar/examples/src-from-state.tsx

@@ -24,7 +24,6 @@ export default function AvatarSrcFromStateExample() {
       </Avatar.Root>
       <Button.Root
         mode="ghost"
-        size="m"
         type="button"
         onClick={() => setIndex((i) => (i + 1) % sources.length)}
       >

package/src/components/badge/examples/admin-tags.tsx

@@ -12,22 +12,22 @@ const row: CSSProperties = {
 export default function BadgeAdminTagsExample() {
   return (
     <div style={row}>
-      <Badge.Root color="orange" variant="filled" size="m">
+      <Badge.Root color="orange" variant="filled">
         Staging
       </Badge.Root>
-      <Badge.Root color="green" variant="light" size="m">
+      <Badge.Root color="green" variant="light">
         Production
       </Badge.Root>
-      <Badge.Root color="gray" variant="stroke" size="m">
+      <Badge.Root color="gray" variant="stroke">
         Internal
       </Badge.Root>
-      <Badge.Root color="blue" variant="lighter" size="m">
+      <Badge.Root color="blue" variant="lighter">
         Beta
       </Badge.Root>
-      <Badge.Root color="purple" variant="filled" size="m">
+      <Badge.Root color="purple" variant="filled">
         Owner
       </Badge.Root>
-      <Badge.Root color="yellow" variant="light" size="m">
+      <Badge.Root color="yellow" variant="light">
         Feature flag: new billing
       </Badge.Root>
     </div>

package/src/components/badge/examples/ecommerce-inventory.tsx

@@ -12,19 +12,19 @@ const row: CSSProperties = {
 export default function BadgeEcommerceInventoryExample() {
   return (
     <div style={row}>
-      <Badge.Root color="green" variant="filled" size="m">
+      <Badge.Root color="green" variant="filled">
         In stock
       </Badge.Root>
-      <Badge.Root color="orange" variant="light" size="m">
+      <Badge.Root color="orange" variant="light">
         Low stock · 3 left
       </Badge.Root>
-      <Badge.Root color="red" variant="lighter" size="m">
+      <Badge.Root color="red" variant="lighter">
         Out of stock
       </Badge.Root>
-      <Badge.Root color="purple" variant="stroke" size="m">
+      <Badge.Root color="purple" variant="stroke">
         Sale · 20% off
       </Badge.Root>
-      <Badge.Root color="teal" variant="filled" size="m">
+      <Badge.Root color="teal" variant="filled">
         <Badge.Icon>
           <Icon name="status.locked" />
         </Badge.Icon>

package/src/components/badge/examples/inbox-labels.tsx

@@ -12,22 +12,22 @@ const row: CSSProperties = {
 export default function BadgeInboxLabelsExample() {
   return (
     <div style={row}>
-      <Badge.Root color="red" variant="filled" size="m">
+      <Badge.Root color="red" variant="filled">
         Urgent
       </Badge.Root>
-      <Badge.Root color="blue" variant="light" size="m">
+      <Badge.Root color="blue" variant="light">
         Unread
       </Badge.Root>
-      <Badge.Root color="gray" variant="stroke" size="m">
+      <Badge.Root color="gray" variant="stroke">
         Archived
       </Badge.Root>
-      <Badge.Root color="sky" variant="lighter" size="m">
+      <Badge.Root color="sky" variant="lighter">
         <Badge.Icon>
           <Icon name="field.email" />
         </Badge.Icon>
         Newsletter
       </Badge.Root>
-      <Badge.Root color="purple" variant="light" size="m">
+      <Badge.Root color="purple" variant="light">
         <Badge.Dot />
         VIP list
       </Badge.Root>

package/src/components/badge/examples/status-presence.tsx

@@ -15,16 +15,16 @@ const row: CSSProperties = {
 export default function BadgeStatusPresenceExample() {
   return (
     <div style={row}>
-      <Badge.Root variant="status" status="online" label="Alex Morgan is online" size="m">
+      <Badge.Root variant="status" status="online" label="Alex Morgan is online">
         Online
       </Badge.Root>
-      <Badge.Root variant="status" status="offline" label="Alex Morgan is offline" size="m">
+      <Badge.Root variant="status" status="offline" label="Alex Morgan is offline">
         Offline
       </Badge.Root>
-      <Badge.Root variant="status" status="away" label="Alex Morgan is away" size="m">
+      <Badge.Root variant="status" status="away" label="Alex Morgan is away">
         Away
       </Badge.Root>
-      <Badge.Root variant="status" status="busy" label="Alex Morgan is busy" size="m">
+      <Badge.Root variant="status" status="busy" label="Alex Morgan is busy">
         Busy
       </Badge.Root>
     </div>

package/src/components/banner/examples/controlled-visibility.tsx

@@ -14,7 +14,7 @@ export default function BannerControlledVisibilityExample() {
         </Button.Root>
       ) : null}
       {visible ? (
-        <Banner.Root size="m" status="feature" variant="lighter">
+        <Banner.Root status="feature" variant="lighter">
           <Banner.Content>
             <Banner.Icon as={Info} aria-hidden />
             <Banner.Title>Controlled visibility</Banner.Title>

package/src/components/banner/examples/cookie-consent-row.tsx

@@ -10,7 +10,6 @@ export default function CookieConsentRowExample() {
       role="region"
       status="information"
       variant="lighter"
-      size="m"
       onDismiss={() => {
         /* product: defer / snooze — follow local privacy rules */
       }}

package/src/components/banner/examples/feature-promo.tsx

@@ -10,7 +10,6 @@ export default function FeaturePromoExample() {
       role="region"
       status="feature"
       variant="lighter"
-      size="m"
       onDismiss={() => {
         /* product: persist dismissal (localStorage / profile flag) */
       }}

package/src/components/button/examples/canonical-composition.tsx

@@ -21,23 +21,23 @@ export default function CanonicalCompositionExample() {
           alignItems: "center",
         }}
       >
-        <Button.Root variant="primary" mode="filled" size="m">
+        <Button.Root variant="primary" mode="filled">
           <Button.Icon>
             <Icon name="action.copy" size="s" />
           </Button.Icon>
           Copy link
         </Button.Root>
-        <Button.Root variant="neutral" mode="stroke" size="m">
+        <Button.Root variant="neutral" mode="stroke">
           <Button.Icon>
             <Icon name="field.email" size="s" tone="subtle" />
           </Button.Icon>
           Contact sales
         </Button.Root>
-        <Button.Root variant="error" mode="lighter" size="m">
+        <Button.Root variant="error" mode="lighter">
           Remove from list
         </Button.Root>
       </div>
-      <Button.Root variant="primary" mode="filled" size="m" loading>
+      <Button.Root variant="primary" mode="filled" loading>
         <Button.Spinner />
         Saving…
       </Button.Root>

package/src/components/button/examples/destructive-confirm.tsx

@@ -10,7 +10,7 @@ export default function DestructiveConfirmExample() {
   return (
     <Modal.Root open={open} onOpenChange={setOpen}>
       <Modal.Trigger>
-        <Button.Root variant="error" mode="stroke" size="m">
+        <Button.Root variant="error" mode="stroke">
           Delete project
         </Button.Root>
       </Modal.Trigger>
@@ -19,11 +19,11 @@ export default function DestructiveConfirmExample() {
         footer={
           <>
             <Modal.Close>
-              <Button.Root variant="neutral" mode="stroke" size="m">
+              <Button.Root variant="neutral" mode="stroke">
                 Cancel
               </Button.Root>
             </Modal.Close>
-            <Button.Root variant="error" mode="filled" size="m" onClick={() => setOpen(false)}>
+            <Button.Root variant="error" mode="filled" onClick={() => setOpen(false)}>
               Delete
             </Button.Root>
           </>

package/src/components/button/examples/form-submit-row.tsx

@@ -21,10 +21,10 @@ export default function FormSubmitRowExample() {
         justifyContent: "flex-end",
       }}
     >
-      <Button.Root type="button" variant="neutral" mode="stroke" size="m">
+      <Button.Root type="button" variant="neutral" mode="stroke">
         Cancel
       </Button.Root>
-      <Button.Root type="submit" variant="primary" mode="filled" size="m" loading={loading}>
+      <Button.Root type="submit" variant="primary" mode="filled" loading={loading}>
         <Button.Spinner />
         Save changes
       </Button.Root>

package/src/components/button/examples/full-width-stack.tsx

@@ -12,10 +12,10 @@ export default function FullWidthStackExample() {
         gap: "var(--prime-sys-spacing-m)",
       }}
     >
-      <Button.Root variant="primary" mode="filled" size="m" fullWidth>
+      <Button.Root variant="primary" mode="filled" fullWidth>
         Button full width primary
       </Button.Root>
-      <Button.Root variant="neutral" mode="stroke" size="m" fullWidth>
+      <Button.Root variant="neutral" mode="stroke" fullWidth>
         Button full width neutral stroke
       </Button.Root>
     </div>

package/src/components/button/examples/icon-composition.tsx

@@ -21,38 +21,38 @@ export default function IconCompositionExample() {
       }}
     >
       <div style={rowStyle}>
-        <Button.Root variant="primary" mode="filled" size="m">
+        <Button.Root variant="primary" mode="filled">
           <Button.Icon>
             <Icon name="field.email" size="s" />
           </Button.Icon>
           Button primary icon left
         </Button.Root>
-        <Button.Root variant="primary" mode="filled" size="m">
+        <Button.Root variant="primary" mode="filled">
           Button primary icon right
           <Button.Icon>
             <Icon name="action.close" size="s" />
           </Button.Icon>
         </Button.Root>
-        <Button.Root variant="primary" mode="filled" size="m" aria-label="Button primary icon only">
+        <Button.Root variant="primary" mode="filled" aria-label="Button primary icon only">
           <Button.Icon>
             <Icon name="action.close" size="s" />
           </Button.Icon>
         </Button.Root>
       </div>
       <div style={rowStyle}>
-        <Button.Root variant="neutral" mode="stroke" size="m">
+        <Button.Root variant="neutral" mode="stroke">
           <Button.Icon>
             <Icon name="field.email" size="s" tone="subtle" />
           </Button.Icon>
           Button icon left
         </Button.Root>
-        <Button.Root variant="neutral" mode="stroke" size="m">
+        <Button.Root variant="neutral" mode="stroke">
           Button icon right
           <Button.Icon>
             <Icon name="action.close" size="s" tone="subtle" />
           </Button.Icon>
         </Button.Root>
-        <Button.Root variant="neutral" mode="stroke" size="m" aria-label="Button icon only">
+        <Button.Root variant="neutral" mode="stroke" aria-label="Button icon only">
           <Button.Icon>
             <Icon name="action.close" size="s" tone="subtle" />
           </Button.Icon>

package/src/components/button/examples/toolbar.tsx

@@ -15,19 +15,19 @@ export default function ToolbarExample() {
         alignItems: "center",
       }}
     >
-      <Button.Root variant="neutral" mode="ghost" size="m">
+      <Button.Root variant="neutral" mode="ghost">
         Bold
       </Button.Root>
-      <Button.Root variant="neutral" mode="ghost" size="m">
+      <Button.Root variant="neutral" mode="ghost">
         Italic
       </Button.Root>
-      <Button.Root variant="neutral" mode="ghost" size="m" aria-label="Insert link">
+      <Button.Root variant="neutral" mode="ghost" aria-label="Insert link">
         <Button.Icon>
           <Icon name="field.email" size="s" tone="subtle" />
         </Button.Icon>
       </Button.Root>
       <span style={{ flex: 1, minWidth: "var(--prime-sys-spacing-m)" }} aria-hidden />
-      <Button.Root variant="primary" mode="filled" size="m">
+      <Button.Root variant="primary" mode="filled">
         <Button.Icon>
           <Icon name="action.upload" size="s" />
         </Button.Icon>

package/src/components/button-group/COMPONENT.md

@@ -62,7 +62,7 @@ import { ButtonGroup } from "prime-ui-kit";
 
 export function Example() {
   return (
-    <ButtonGroup.Root aria-label="Options" size="m">
+    <ButtonGroup.Root aria-label="Options">
       <ButtonGroup.Item type="button">One</ButtonGroup.Item>
       <ButtonGroup.Item type="button">Two</ButtonGroup.Item>
     </ButtonGroup.Root>

package/src/components/button-group/examples/editor-toolbar.tsx

@@ -10,7 +10,7 @@ export default function EditorToolbarExample() {
   const [marks, setMarks] = React.useState({ bold: true, italic: false, underline: false });
 
   return (
-    <ButtonGroup.Root aria-label="Text formatting" size="m">
+    <ButtonGroup.Root aria-label="Text formatting">
       <ButtonGroup.Item
         aria-label="Bold"
         pressed={marks.bold}

package/src/components/button-group/examples/form-footer.tsx

@@ -10,7 +10,7 @@ export default function FormFooterExample() {
         e.preventDefault();
       }}
     >
-      <ButtonGroup.Root aria-label="Save or reset draft" size="m">
+      <ButtonGroup.Root aria-label="Save or reset draft">
         <ButtonGroup.Item type="submit">Save</ButtonGroup.Item>
         <ButtonGroup.Item type="reset">Reset</ButtonGroup.Item>
       </ButtonGroup.Root>

package/src/components/button-group/examples/full-width.tsx

@@ -6,7 +6,7 @@ import { ButtonGroup } from "prime-ui-kit";
 export default function FullWidthExample() {
   return (
     <div className="w-full max-w-md">
-      <ButtonGroup.Root aria-label="Plan tier" className="w-full" size="m">
+      <ButtonGroup.Root aria-label="Plan tier" className="w-full">
         <ButtonGroup.Item className="min-w-0 flex-1" type="button">
           Basic
         </ButtonGroup.Item>

package/src/components/button-group/examples/view-switcher.tsx

@@ -10,7 +10,7 @@ export default function ViewSwitcherExample() {
   const [mode, setMode] = React.useState<ViewMode>("list");
 
   return (
-    <ButtonGroup.Root aria-label="View layout" size="m">
+    <ButtonGroup.Root aria-label="View layout">
       <ButtonGroup.Item pressed={mode === "list"} type="button" onClick={() => setMode("list")}>
         List
       </ButtonGroup.Item>

package/src/components/button-group/examples/wizard-actions.tsx

@@ -10,7 +10,7 @@ export default function WizardActionsExample() {
   const [step, setStep] = React.useState(0);
 
   return (
-    <ButtonGroup.Root aria-label="Wizard navigation" size="m">
+    <ButtonGroup.Root aria-label="Wizard navigation">
       <ButtonGroup.Item
         disabled={step === 0}
         type="button"

package/src/components/checkbox/examples/bulk-select-rows.tsx

@@ -32,7 +32,6 @@ export function BulkSelectRowsExample() {
   return (
     <>
       <Checkbox.Root
-        size="m"
         checked={allSelected}
         indeterminate={headerIndeterminate}
         onChange={(e) => toggleAll(e.target.checked)}
@@ -42,7 +41,6 @@ export function BulkSelectRowsExample() {
       {ROW_IDS.map((id) => (
         <Checkbox.Root
           key={id}
-          size="m"
           checked={selected.has(id)}
           onChange={(e) => toggleRow(id, e.target.checked)}
         >

package/src/components/checkbox/examples/empty-label-form.tsx

@@ -7,11 +7,10 @@ import { Checkbox } from "prime-ui-kit";
 export function EmptyLabelFormExample() {
   return (
     <>
-      <Checkbox.Root size="m" aria-label="Receive digest by email (no visible label)">
+      <Checkbox.Root aria-label="Receive digest by email (no visible label)">
         <Checkbox.Label />
       </Checkbox.Root>
       <Checkbox.Root
-        size="m"
         name="newsletter"
         value="weekly"
         defaultChecked

package/src/components/checkbox/examples/feature-flags-list.tsx

@@ -30,7 +30,6 @@ export function FeatureFlagsListExample() {
           key={f.id}
           name={`flag_${f.id}`}
           value="on"
-          size="m"
           checked={flags[f.id]}
           onChange={(e) => setFlag(f.id, e.target.checked)}
         >

package/src/components/checkbox/examples/settings-panel.tsx

@@ -14,7 +14,6 @@ export function SettingsPanelExample() {
       <Checkbox.Root
         name="notify_desktop"
         value="on"
-        size="m"
         checked={desktopNotify}
         onChange={(e) => setDesktopNotify(e.target.checked)}
       >
@@ -24,21 +23,19 @@ export function SettingsPanelExample() {
       <Checkbox.Root
         name="sound"
         value="on"
-        size="m"
         checked={sound}
         onChange={(e) => setSound(e.target.checked)}
       >
         <Checkbox.Label>Sound effects</Checkbox.Label>
         <Checkbox.Hint>Short UI sounds for sends and errors.</Checkbox.Hint>
       </Checkbox.Root>
-      <Checkbox.Root name="sso" value="on" size="m" disabled>
+      <Checkbox.Root name="sso" value="on" disabled>
         <Checkbox.Label>SSO / SAML (Enterprise)</Checkbox.Label>
         <Checkbox.Hint>Contact sales to enable single sign-on.</Checkbox.Hint>
       </Checkbox.Root>
       <Checkbox.Root
         name="digest"
         value="on"
-        size="m"
         checked={weeklyDigest}
         onChange={(e) => setWeeklyDigest(e.target.checked)}
       >

package/src/components/color-picker/COMPONENT.md

@@ -70,12 +70,12 @@ export function MinimalColorField() {
     <ColorPicker.Root defaultValue="#3b82f6">
       <Popover.Root>
         <Popover.Trigger asChild>
-          <Button.Root mode="stroke" size="m" variant="neutral">
+          <Button.Root mode="stroke" variant="neutral">
             <ColorPicker.TriggerSwatch />
             Color
           </Button.Root>
         </Popover.Trigger>
-        <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="bottom">
+        <Popover.Content align="start" side="bottom">
           <ColorPicker.FormatProvider>
             <ColorPicker.FormatSelect />
             <ColorPicker.Area colorSpace="hsl" xChannel="saturation" yChannel="lightness">