prime-ui-kit 0.6.0 → 0.7.1

package/src/components/empty-page/examples/table-region.tsx

@@ -0,0 +1,35 @@
+import { PackagePlus } from "lucide-react";
+import { Button, EmptyPage } from "prime-ui-kit";
+
+import styles from "./examples-demos.module.css";
+
+/**
+ * Пустое состояние в «области таблицы»: родитель с фиксированной минимальной высотой,
+ * `layout="fill"` растягивает блок и центрирует содержимое.
+ */
+export function EmptyPageTableRegion() {
+  return (
+    <div>
+      <p className={styles.lead}>
+        Имитация тела таблицы или карточки со списком: обводка задаёт границу области данных.
+      </p>
+      <div className={styles.tableRegion}>
+        <EmptyPage.Root layout="fill" aria-labelledby="empty-table-heading">
+          <EmptyPage.Icon aria-hidden>
+            <PackagePlus strokeWidth={2} aria-hidden />
+          </EmptyPage.Icon>
+          <EmptyPage.Title id="empty-table-heading">Пока нет позиций</EmptyPage.Title>
+          <EmptyPage.Description>
+            Импортируйте каталог или создайте первую строку вручную — таблица заполнится
+            автоматически.
+          </EmptyPage.Description>
+          <EmptyPage.Actions>
+            <Button.Root type="button" variant="primary">
+              Добавить позицию
+            </Button.Root>
+          </EmptyPage.Actions>
+        </EmptyPage.Root>
+      </div>
+    </div>
+  );
+}

package/src/components/file-upload/examples/full-width.tsx

@@ -26,7 +26,7 @@ export function FileUploadFullWidthExample() {
       >
         Родитель на всю колонку: зона тянется вместе с формой или панелью.
       </p>
-      <FileUpload.Root size="m" appearance="solid" />
+      <FileUpload.Root appearance="solid" />
     </div>
   );
 }

package/src/components/hint/examples/a11y-describedby.tsx

@@ -4,9 +4,7 @@ import { Hint, Label } from "prime-ui-kit";
 export default function HintA11yDescribedbyExample() {
   return (
     <>
-      <Label.Root htmlFor="hint-ex-a11y-volume" size="m">
-        Notification volume
-      </Label.Root>
+      <Label.Root htmlFor="hint-ex-a11y-volume">Notification volume</Label.Root>
       <input
         id="hint-ex-a11y-volume"
         type="range"
@@ -15,7 +13,7 @@ export default function HintA11yDescribedbyExample() {
         defaultValue={40}
         aria-describedby="hint-ex-a11y-volume-help"
       />
-      <Hint.Root id="hint-ex-a11y-volume-help" size="m" variant="default">
+      <Hint.Root id="hint-ex-a11y-volume-help" variant="default">
         Does not affect calls and alarms in the mobile app.
       </Hint.Root>
     </>

package/src/components/hint/examples/controlled-variant.tsx

@@ -13,7 +13,7 @@ export default function HintControlledVariantExample() {
       <Button.Root size="s" variant="error" mode="lighter" onClick={() => setVariant("error")}>
         Show error
       </Button.Root>
-      <Hint.Root size="m" variant={variant}>
+      <Hint.Root variant={variant}>
         {variant === "error"
           ? "Fill the field before saving the draft."
           : "You can save the draft without required fields."}

package/src/components/hint/examples/error-hint.tsx

@@ -6,15 +6,13 @@ export default function ErrorHintExample() {
 
   return (
     <>
-      <Label.Root htmlFor="hint-example-error" size="m">
-        Tax ID
-      </Label.Root>
-      <Input.Root size="m" id="hint-example-error" hasError>
+      <Label.Root htmlFor="hint-example-error">Tax ID</Label.Root>
+      <Input.Root id="hint-example-error" hasError>
         <Input.Wrapper>
           <Input.Field type="text" defaultValue="12" aria-describedby={hintId} />
         </Input.Wrapper>
       </Input.Root>
-      <Hint.Root id={hintId} size="m" variant="error" role="alert">
+      <Hint.Root id={hintId} variant="error" role="alert">
         Enter 10 or 12 digits.
       </Hint.Root>
     </>

package/src/components/hint/examples/field-help.tsx

@@ -6,10 +6,8 @@ export default function FieldHelpExample() {
 
   return (
     <>
-      <Label.Root htmlFor="hint-example-field-help" size="m">
-        Project name
-      </Label.Root>
-      <Input.Root size="m" id="hint-example-field-help">
+      <Label.Root htmlFor="hint-example-field-help">Project name</Label.Root>
+      <Input.Root id="hint-example-field-help">
         <Input.Wrapper>
           <Input.Field
             type="text"
@@ -19,7 +17,7 @@ export default function FieldHelpExample() {
           />
         </Input.Wrapper>
       </Input.Root>
-      <Hint.Root id={hintId} size="m" variant="default">
+      <Hint.Root id={hintId} variant="default">
         Visible to everyone in this workspace.
       </Hint.Root>
     </>

package/src/components/hint/examples/field-states.tsx

@@ -4,41 +4,31 @@ import { Hint, Input, Label } from "prime-ui-kit";
 export default function HintFieldStatesExample() {
   return (
     <>
-      <Label.Root htmlFor="hint-ex-st-ok" size="m">
-        Project name
-      </Label.Root>
-      <Input.Root size="m" id="hint-ex-st-ok">
+      <Label.Root htmlFor="hint-ex-st-ok">Project name</Label.Root>
+      <Input.Root id="hint-ex-st-ok">
         <Input.Wrapper>
           <Input.Field type="text" defaultValue="Alpha" />
         </Input.Wrapper>
       </Input.Root>
-      <Hint.Root size="m" variant="default">
-        Visible to everyone in this workspace.
-      </Hint.Root>
+      <Hint.Root variant="default">Visible to everyone in this workspace.</Hint.Root>
 
-      <Label.Root htmlFor="hint-ex-st-err" size="m">
-        Tax ID
-      </Label.Root>
-      <Input.Root size="m" id="hint-ex-st-err" hasError>
+      <Label.Root htmlFor="hint-ex-st-err">Tax ID</Label.Root>
+      <Input.Root id="hint-ex-st-err" hasError>
         <Input.Wrapper>
           <Input.Field type="text" defaultValue="12" />
         </Input.Wrapper>
       </Input.Root>
-      <Hint.Root size="m" variant="error">
-        Enter 10 or 12 digits.
-      </Hint.Root>
+      <Hint.Root variant="error">Enter 10 or 12 digits.</Hint.Root>
 
-      <Label.Root htmlFor="hint-ex-st-dis" size="m" disabled>
+      <Label.Root htmlFor="hint-ex-st-dis" disabled>
         Request limit
       </Label.Root>
-      <Input.Root size="m" id="hint-ex-st-dis">
+      <Input.Root id="hint-ex-st-dis">
         <Input.Wrapper>
           <Input.Field type="text" disabled defaultValue="read only" />
         </Input.Wrapper>
       </Input.Root>
-      <Hint.Root size="m" variant="disabled">
-        Value comes from the plan and cannot be edited.
-      </Hint.Root>
+      <Hint.Root variant="disabled">Value comes from the plan and cannot be edited.</Hint.Root>
     </>
   );
 }

package/src/components/hint/examples/inline-tip-form.tsx

@@ -7,10 +7,8 @@ export default function InlineTipFormExample() {
 
   return (
     <>
-      <Label.Root htmlFor="hint-example-form-email" size="m">
-        Billing email
-      </Label.Root>
-      <Input.Root size="m" id="hint-example-form-email">
+      <Label.Root htmlFor="hint-example-form-email">Billing email</Label.Root>
+      <Input.Root id="hint-example-form-email">
         <Input.Wrapper>
           <Input.Field
             type="email"
@@ -19,14 +17,12 @@ export default function InlineTipFormExample() {
           />
         </Input.Wrapper>
       </Input.Root>
-      <Hint.Root id={emailHintId} size="m" variant="default">
+      <Hint.Root id={emailHintId} variant="default">
         Invoices and receipts go here; not the same as your login email.
       </Hint.Root>
 
-      <Label.Root htmlFor="hint-example-form-budget" size="m">
-        Monthly budget
-      </Label.Root>
-      <Input.Root size="m" id="hint-example-form-budget">
+      <Label.Root htmlFor="hint-example-form-budget">Monthly budget</Label.Root>
+      <Input.Root id="hint-example-form-budget">
         <Input.Wrapper>
           <Input.Field
             type="text"
@@ -36,7 +32,7 @@ export default function InlineTipFormExample() {
           />
         </Input.Wrapper>
       </Input.Root>
-      <Hint.Root id={budgetHintId} size="m" variant="disabled">
+      <Hint.Root id={budgetHintId} variant="disabled">
         Optional — leave empty to use the workspace default.
       </Hint.Root>
     </>

package/src/components/hint/examples/success-confirmation.tsx

@@ -9,10 +9,8 @@ export default function SuccessConfirmationExample() {
 
   return (
     <>
-      <Label.Root htmlFor="hint-example-success" size="m">
-        API token
-      </Label.Root>
-      <Input.Root size="m" id="hint-example-success">
+      <Label.Root htmlFor="hint-example-success">API token</Label.Root>
+      <Input.Root id="hint-example-success">
         <Input.Wrapper>
           <Input.Field
             type="text"
@@ -22,7 +20,7 @@ export default function SuccessConfirmationExample() {
           />
         </Input.Wrapper>
       </Input.Root>
-      <Hint.Root id={hintId} size="m" variant="default">
+      <Hint.Root id={hintId} variant="default">
         Token saved. Rotate it from settings anytime.
       </Hint.Root>
     </>

package/src/components/hint/examples/variants.tsx

@@ -4,15 +4,9 @@ import { Hint } from "prime-ui-kit";
 export default function HintVariantsExample() {
   return (
     <>
-      <Hint.Root size="m" variant="default">
-        Neutral helper or format guidance.
-      </Hint.Root>
-      <Hint.Root size="m" variant="error">
-        Value does not meet password policy requirements.
-      </Hint.Root>
-      <Hint.Root size="m" variant="disabled">
-        Editing is not available for the selected role.
-      </Hint.Root>
+      <Hint.Root variant="default">Neutral helper or format guidance.</Hint.Root>
+      <Hint.Root variant="error">Value does not meet password policy requirements.</Hint.Root>
+      <Hint.Root variant="disabled">Editing is not available for the selected role.</Hint.Root>
     </>
   );
 }

package/src/components/hint/examples/with-icon.tsx

@@ -3,7 +3,7 @@ import { Hint, Icon } from "prime-ui-kit";
 /** Decorative leading icon; meaning must be repeated in text (`Hint.Icon` is `aria-hidden`). */
 export default function HintWithIconExample() {
   return (
-    <Hint.Root size="m" variant="default">
+    <Hint.Root variant="default">
       <Hint.Icon>
         <Icon name="field.email" tone="subtle" />
       </Hint.Icon>

package/src/components/input/examples/affix-url-and-amount.tsx

@@ -6,14 +6,14 @@ import { Input } from "prime-ui-kit";
 export default function AffixUrlAndAmountExample() {
   return (
     <>
-      <Input.Root size="m" label="Сайт" hint="Поддомен без схемы">
+      <Input.Root label="Сайт" hint="Поддомен без схемы">
         <Input.Wrapper>
           <Input.Affix side="start">https://</Input.Affix>
           <Input.Field placeholder="поддомен" />
           <Input.Affix side="end">.example</Input.Affix>
         </Input.Wrapper>
       </Input.Root>
-      <Input.Root size="m" label="Сумма" hint="Дробная часть через запятую">
+      <Input.Root label="Сумма" hint="Дробная часть через запятую">
         <Input.Wrapper>
           <Input.InlineAffix side="start">₽</Input.InlineAffix>
           <Input.Field placeholder="0,00" inputMode="decimal" />

package/src/components/input/examples/checkout-full-width.tsx

@@ -12,7 +12,7 @@ export default function CheckoutFullWidthExample() {
 
   return (
     <div className={styles.column}>
-      <Input.Root size="m" label="ФИО получателя" hint="Как в паспорте — для доставки">
+      <Input.Root label="ФИО получателя" hint="Как в паспорте — для доставки">
         <Input.Wrapper>
           <Input.Field
             name="fullName"
@@ -23,7 +23,7 @@ export default function CheckoutFullWidthExample() {
           />
         </Input.Wrapper>
       </Input.Root>
-      <Input.Root size="m" label="Адрес доставки" optionalLabel="квартира, подъезд">
+      <Input.Root label="Адрес доставки" optionalLabel="квартира, подъезд">
         <Input.Wrapper>
           <Input.Field
             name="address"

package/src/components/input/examples/login-email.tsx

@@ -8,11 +8,7 @@ export default function LoginEmailExample() {
   const [email, setEmail] = React.useState("");
 
   return (
-    <Input.Root
-      size="m"
-      label="Электронная почта"
-      hint="Мы отправим код подтверждения на этот адрес"
-    >
+    <Input.Root label="Электронная почта" hint="Мы отправим код подтверждения на этот адрес">
       <Input.Wrapper>
         <Input.Icon side="start">
           <Icon name="field.email" size="s" tone="subtle" />

package/src/components/input/examples/password-with-hint.tsx

@@ -8,7 +8,7 @@ export default function PasswordWithHintExample() {
   const [password, setPassword] = React.useState("");
 
   return (
-    <Input.Root size="m" label="Пароль" hint="Не менее 8 символов, буквы и цифры">
+    <Input.Root label="Пароль" hint="Не менее 8 символов, буквы и цифры">
       <Input.Wrapper>
         <Input.Field
           type="password"

package/src/components/input/examples/search.tsx

@@ -9,7 +9,6 @@ export default function SearchExample() {
 
   return (
     <Input.Root
-      size="m"
       label="Поиск по каталогу"
       hint={query ? `Запрос: «${query}»` : "Введите название или артикул"}
     >

package/src/components/kbd/examples/composition-chord-icon.tsx

@@ -24,7 +24,7 @@ export default function KbdCompositionChordIconExample() {
         <Kbd.Root>K</Kbd.Root>
       </div>
       <div style={row}>
-        <Kbd.Root size="m">
+        <Kbd.Root>
           <Icon name="action.close" aria-hidden />
           <span>Esc</span>
         </Kbd.Root>

package/src/components/kbd/examples/toolbar-hints.tsx

@@ -19,11 +19,11 @@ export default function ToolbarHintsExample() {
   return (
     <div role="toolbar" aria-label="Formatting" style={toolbar}>
       <div style={hintCluster}>
-        <Button.Root size="m">Bold</Button.Root>
+        <Button.Root>Bold</Button.Root>
         <Kbd.Root size="s">⌘B</Kbd.Root>
       </div>
       <div style={hintCluster}>
-        <Button.Root size="m">Italic</Button.Root>
+        <Button.Root>Italic</Button.Root>
         <Kbd.Root size="s">⌘I</Kbd.Root>
       </div>
     </div>

package/src/components/label/examples/with-icon.tsx

@@ -4,7 +4,7 @@ import { Icon, Label } from "prime-ui-kit";
 export function WithIconExample() {
   return (
     <>
-      <Label.Root size="m" htmlFor="example-label-icon-upload">
+      <Label.Root htmlFor="example-label-icon-upload">
         <Label.Icon>
           <Icon aria-hidden name="action.upload" />
         </Label.Icon>

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

@@ -9,7 +9,7 @@ Text-style **navigation** control: **`LinkButton.Root`** only — control typogr
 ```tsx
 import { LinkButton } from "prime-ui-kit";
 
-<LinkButton.Root href="/settings" size="m">
+<LinkButton.Root href="/settings">
   Settings
 </LinkButton.Root>
 ```

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

@@ -11,15 +11,15 @@ export default function LinkButtonCompositionExample() {
 
   return (
     <div style={rowStyle}>
-      <LinkButton.Root href="#" size="m">
+      <LinkButton.Root href="#">
         <Icon name="field.email" size="s" />
         Link with icon on the left
       </LinkButton.Root>
-      <LinkButton.Root href="#" size="m">
+      <LinkButton.Root href="#">
         Icon on the right
         <Icon name="action.close" size="s" />
       </LinkButton.Root>
-      <LinkButton.Root href="#" size="m" aria-label="Open profile">
+      <LinkButton.Root href="#" aria-label="Open profile">
         <Icon name="field.email" size="s" />
       </LinkButton.Root>
     </div>

package/src/components/link-button/examples/disabled.tsx

@@ -8,10 +8,8 @@ import { LinkButton } from "prime-ui-kit";
 export default function LinkButtonDisabledExample() {
   return (
     <div>
-      <LinkButton.Root href="/available" size="m">
-        Available route
-      </LinkButton.Root>
-      <LinkButton.Root href="/ignored-when-disabled" size="m" disabled>
+      <LinkButton.Root href="/available">Available route</LinkButton.Root>
+      <LinkButton.Root href="/ignored-when-disabled" disabled>
         Coming soon
       </LinkButton.Root>
     </div>

package/src/components/link-button/examples/external.tsx

@@ -5,12 +5,7 @@ export default function LinkButtonExternalExample() {
   return (
     <p>
       Documentation in a separate tab:{" "}
-      <LinkButton.Root
-        href="https://example.com/docs"
-        target="_blank"
-        rel="noopener noreferrer"
-        size="m"
-      >
+      <LinkButton.Root href="https://example.com/docs" target="_blank" rel="noopener noreferrer">
         Open help
       </LinkButton.Root>
     </p>

package/src/components/link-button/examples/inline-text-link.tsx

@@ -5,10 +5,8 @@ export default function LinkButtonInlineTextLinkExample() {
   return (
     <p>
       Need more detail? See{" "}
-      <LinkButton.Root href="/docs/billing" size="m">
-        billing documentation
-      </LinkButton.Root>{" "}
-      for proration rules.
+      <LinkButton.Root href="/docs/billing">billing documentation</LinkButton.Root> for proration
+      rules.
     </p>
   );
 }

package/src/components/link-button/examples/navigation-cluster.tsx

@@ -4,21 +4,13 @@ import { LinkButton } from "prime-ui-kit";
 export default function LinkButtonNavigationClusterExample() {
   return (
     <nav aria-label="Product sections">
-      <LinkButton.Root href="/product/overview" size="m">
-        Overview
-      </LinkButton.Root>
+      <LinkButton.Root href="/product/overview">Overview</LinkButton.Root>
       <span aria-hidden> · </span>
-      <LinkButton.Root href="/product/pricing" size="m">
-        Pricing
-      </LinkButton.Root>
+      <LinkButton.Root href="/product/pricing">Pricing</LinkButton.Root>
       <span aria-hidden> · </span>
-      <LinkButton.Root href="/product/security" size="m">
-        Security
-      </LinkButton.Root>
+      <LinkButton.Root href="/product/security">Security</LinkButton.Root>
       <span aria-hidden> · </span>
-      <LinkButton.Root href="/product/changelog" size="m">
-        Changelog
-      </LinkButton.Root>
+      <LinkButton.Root href="/product/changelog">Changelog</LinkButton.Root>
     </nav>
   );
 }

package/src/components/modal/COMPONENT.md

@@ -48,7 +48,7 @@ export function InviteTeammateModal() {
   return (
     <Modal.Root>
       <Modal.Trigger>
-        <Button.Root size="m" variant="neutral" mode="stroke">
+        <Button.Root variant="neutral" mode="stroke">
           Open workspace invite
         </Button.Root>
       </Modal.Trigger>
@@ -59,17 +59,17 @@ export function InviteTeammateModal() {
         footer={
           <>
             <Modal.Close>
-              <Button.Root size="m" variant="neutral" mode="stroke">
+              <Button.Root variant="neutral" mode="stroke">
                 Cancel
               </Button.Root>
             </Modal.Close>
-            <Button.Root size="m" variant="primary" type="button">
+            <Button.Root variant="primary" type="button">
               Send invite
             </Button.Root>
           </>
         }
       >
-        <Input.Root label="Email address" size="m" hint="Work email preferred">
+        <Input.Root label="Email address" hint="Work email preferred">
           <Input.Wrapper>
             <Input.Field autoComplete="email" placeholder="name@company.com" type="email" />
           </Input.Wrapper>

package/src/components/modal/examples/canonical-maximal.tsx

@@ -11,7 +11,7 @@ export default function ModalCanonicalMaximalExample() {
   return (
     <Modal.Root>
       <Modal.Trigger>
-        <Button.Root size="m" variant="neutral" mode="stroke">
+        <Button.Root variant="neutral" mode="stroke">
           Open workspace invite
         </Button.Root>
       </Modal.Trigger>
@@ -20,11 +20,11 @@ export default function ModalCanonicalMaximalExample() {
         footer={
           <>
             <Modal.Close>
-              <Button.Root size="m" variant="neutral" mode="stroke">
+              <Button.Root variant="neutral" mode="stroke">
                 Cancel
               </Button.Root>
             </Modal.Close>
-            <Button.Root size="m" variant="primary" type="button">
+            <Button.Root variant="primary" type="button">
               Send invite
             </Button.Root>
           </>
@@ -32,7 +32,7 @@ export default function ModalCanonicalMaximalExample() {
         icon={<Icon name="field.email" tone="subtle" />}
         title="Invite teammate"
       >
-        <Input.Root label="Email address" size="m" hint="Work email preferred">
+        <Input.Root label="Email address" hint="Work email preferred">
           <Input.Wrapper>
             <Input.Field autoComplete="email" placeholder="name@company.com" type="email" />
           </Input.Wrapper>

package/src/components/modal/examples/pattern-close-behavior.tsx

@@ -8,7 +8,7 @@ export default function ModalPatternCloseBehaviorExample() {
     <>
       <Modal.Root>
         <Modal.Trigger>
-          <Button.Root size="m" variant="neutral" mode="stroke">
+          <Button.Root variant="neutral" mode="stroke">
             Standard dismiss
           </Button.Root>
         </Modal.Trigger>
@@ -24,7 +24,7 @@ export default function ModalPatternCloseBehaviorExample() {
 
       <Modal.Root closeOnEscape={false} closeOnOverlayClick={false}>
         <Modal.Trigger>
-          <Button.Root size="m" variant="error" mode="lighter">
+          <Button.Root variant="error" mode="lighter">
             <Button.Icon>
               <Icon name="status.locked" />
             </Button.Icon>
@@ -35,7 +35,7 @@ export default function ModalPatternCloseBehaviorExample() {
           description="With both flags false, only buttons dismiss the dialog."
           footer={
             <Modal.Close>
-              <Button.Root size="m" variant="neutral" mode="stroke">
+              <Button.Root variant="neutral" mode="stroke">
                 OK
               </Button.Root>
             </Modal.Close>

package/src/components/modal/examples/pattern-controlled.tsx

@@ -10,10 +10,10 @@ export default function ModalPatternControlledExample() {
 
   return (
     <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--prime-sys-spacing-x2)" }}>
-      <Button.Root size="m" variant="primary" onClick={() => setOpen(true)}>
+      <Button.Root variant="primary" onClick={() => setOpen(true)}>
         Open from outside
       </Button.Root>
-      <Button.Root size="m" mode="stroke" variant="neutral" onClick={() => setOpen(false)}>
+      <Button.Root mode="stroke" variant="neutral" onClick={() => setOpen(false)}>
         Close from outside
       </Button.Root>
 
@@ -23,9 +23,7 @@ export default function ModalPatternControlledExample() {
           description="Open and close are driven by `open` and `onOpenChange` on the root."
           footer={
             <Modal.Close>
-              <Button.Root size="m" variant="primary">
-                Done
-              </Button.Root>
+              <Button.Root variant="primary">Done</Button.Root>
             </Modal.Close>
           }
           icon={<Icon name="action.copy" />}

package/src/components/modal/examples/pattern-full-width-footer.tsx

@@ -8,7 +8,7 @@ export default function ModalPatternFullWidthFooterExample() {
   return (
     <Modal.Root>
       <Modal.Trigger>
-        <Button.Root size="m" variant="neutral" mode="stroke">
+        <Button.Root variant="neutral" mode="stroke">
           Checkout
         </Button.Root>
       </Modal.Trigger>
@@ -23,12 +23,12 @@ export default function ModalPatternFullWidthFooterExample() {
             }}
           >
             <Modal.Close>
-              <Button.Root size="m" variant="primary" fullWidth>
+              <Button.Root variant="primary" fullWidth>
                 Pay now
               </Button.Root>
             </Modal.Close>
             <Modal.Close>
-              <Button.Root size="m" variant="neutral" mode="stroke" fullWidth>
+              <Button.Root variant="neutral" mode="stroke" fullWidth>
                 Back to cart
               </Button.Root>
             </Modal.Close>

package/src/components/modal/examples/pattern-portal-and-scroll.tsx

@@ -36,7 +36,7 @@ export default function ModalPatternPortalAndScrollExample() {
         {portalHost ? (
           <Modal.Root>
             <Modal.Trigger>
-              <Button.Root size="m" variant="neutral" mode="stroke">
+              <Button.Root variant="neutral" mode="stroke">
                 Portal into host
               </Button.Root>
             </Modal.Trigger>
@@ -54,7 +54,7 @@ export default function ModalPatternPortalAndScrollExample() {
 
       <Modal.Root>
         <Modal.Trigger>
-          <Button.Root size="m" variant="neutral" mode="stroke">
+          <Button.Root variant="neutral" mode="stroke">
             Long body (scroll)
           </Button.Root>
         </Modal.Trigger>
@@ -64,9 +64,7 @@ export default function ModalPatternPortalAndScrollExample() {
           description="Cap the body height with `bodyStyle` (or `bodyClassName`) so only the panel scrolls."
           footer={
             <Modal.Close>
-              <Button.Root size="m" variant="primary">
-                Close
-              </Button.Root>
+              <Button.Root variant="primary">Close</Button.Root>
             </Modal.Close>
           }
           icon={<Icon name="nav.itemDot" />}