@hanwenbo/x-taro-ui 0.0.1 → 0.0.2

package/lib/auth/styles.css

@@ -1,15 +1,15 @@
 .x-taro-auth-panel {
   box-sizing: border-box;
   width: 100%;
-  max-width: var(--x-taro-auth-panel-max-width, 1120px);
+  max-width: var(--x-taro-auth-panel-max-width, 100%);
   margin: 0 auto;
-  color: var(--x-color-foreground);
+  color: var(--foreground);
 }
 
 .x-taro-auth-panel--card {
-  padding: var(--x-taro-auth-panel-padding, 48px);
-  background: var(--x-color-card);
-  border: 2px solid var(--x-color-border);
+  padding: var(--x-taro-auth-panel-padding, var(--x-space-6) var(--x-space-5));
+  background: var(--card);
+  border: var(--x-space-px) solid var(--border);
   border-radius: var(--x-radius-xl);
   box-shadow: var(--x-shadow-sm);
 }
@@ -19,23 +19,23 @@
 .x-taro-auth-security__header {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  margin-bottom: 44px;
-  text-align: center;
-  gap: 16px;
+  align-items: flex-start;
+  margin-bottom: var(--x-space-6);
+  text-align: left;
+  gap: var(--x-space-2);
 }
 
 .x-taro-auth-panel__logo {
   display: flex;
   justify-content: center;
-  margin-bottom: 8px;
+  margin-bottom: var(--x-space-1);
 }
 
 .x-taro-auth-panel__title,
 .x-taro-auth-quick__title,
 .x-taro-auth-security__title {
-  color: var(--x-color-foreground);
-  font-size: 48px;
+  color: var(--foreground);
+  font-size: var(--x-font-size-2xl);
   font-weight: 700;
   line-height: 1.25;
 }
@@ -45,68 +45,100 @@
 .x-taro-auth-security__description,
 .x-taro-auth-security__value,
 .x-taro-auth-security__loading {
-  color: var(--x-color-muted-foreground);
-  font-size: 28px;
-  line-height: 1.5;
+  color: var(--muted-foreground);
+  font-size: var(--x-font-size-sm);
+  line-height: 1.7;
 }
 
 .x-taro-auth-form,
 .x-taro-auth-field,
 .x-taro-auth-agreements,
 .x-taro-auth-third-party,
-.x-taro-auth-third-party__items,
 .x-taro-auth-success {
   display: flex;
   flex-direction: column;
-  gap: var(--x-taro-auth-form-gap, 32px);
+  gap: var(--x-taro-auth-form-gap, calc(var(--x-space-4) + calc(var(--x-space-1) / 2)));
+}
+
+.x-taro-auth-third-party {
+  gap: var(--x-space-4);
+}
+
+.x-taro-auth-third-party__items {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-self: center;
+  width: 100%;
+  max-width: calc(var(--x-space-8) * 8 + var(--x-space-2) * 3);
+  gap: var(--x-space-4) var(--x-space-2);
+}
+
+.x-taro-auth-third-party__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--x-space-10) + var(--x-space-1));
+  height: calc(var(--x-space-10) + var(--x-space-1));
+  flex-shrink: 0;
+}
+
+.x-taro-auth-third-party__label {
+  max-width: calc(var(--x-space-8) * 2);
+  color: var(--muted-foreground);
+  font-size: var(--x-font-size-xs);
+  font-weight: 400;
+  line-height: 1.5;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  text-align: center;
 }
 
 .x-taro-auth-field {
-  gap: 14px;
+  gap: var(--x-space-2);
 }
 
 .x-taro-auth-field__label,
 .x-taro-auth-security__label {
-  color: var(--x-color-foreground);
-  font-size: 28px;
+  color: var(--foreground);
+  font-size: var(--x-font-size-sm);
   font-weight: 600;
   line-height: 1.4;
 }
 
 .x-taro-auth-field__hint {
-  color: var(--x-color-muted-foreground);
-  font-size: 24px;
+  color: var(--muted-foreground);
+  font-size: var(--x-font-size-xs);
 }
 
 .x-taro-auth-field__error {
-  color: var(--x-color-destructive);
-  font-size: 24px;
+  color: var(--destructive);
+  font-size: var(--x-font-size-xs);
 }
 
 .x-taro-auth-error {
-  padding: 20px 24px;
-  color: var(--x-color-destructive);
-  background: var(--x-color-destructive-muted, rgb(254 242 242));
-  border: 2px solid var(--x-color-destructive-border, rgb(254 202 202));
+  padding: calc(var(--x-space-2) + var(--x-space-1) / 2) var(--x-space-3);
+  color: var(--destructive);
+  background: var(--muted);
+  border: var(--x-space-px) solid var(--destructive);
   border-radius: var(--x-radius-lg);
 }
 
 .x-taro-auth-error__text {
   color: inherit;
-  font-size: 26px;
+  font-size: calc(var(--x-font-size-xs) + var(--x-space-px));
 }
 
-.x-taro-auth-selector {
-  display: flex;
+.x-taro-auth-selector,
+.x-taro-auth-method-tabs {
   width: 100%;
-  padding: 8px;
-  background: var(--x-color-muted);
-  border-radius: var(--x-radius-lg);
-  gap: 8px;
+  min-width: 0;
 }
 
-.x-taro-auth-selector > button {
-  flex: 1;
+.x-taro-auth-panel__header--center {
+  align-items: center;
+  text-align: center;
 }
 
 .x-taro-auth-form__meta,
@@ -127,45 +159,49 @@
 }
 
 .x-taro-auth-form__actions {
-  justify-content: flex-end;
-  gap: 20px;
+  flex-direction: column-reverse;
+  align-items: center;
+  gap: var(--x-space-3);
 }
 
 .x-taro-auth-panel__footer {
   justify-content: center;
-  margin-top: 36px;
-  color: var(--x-color-muted-foreground);
-  font-size: 28px;
-  gap: 8px;
+  margin-top: var(--x-space-6);
+  color: var(--muted-foreground);
+  font-size: var(--x-font-size-sm);
+  gap: var(--x-space-1);
 }
 
 .x-taro-auth-divider {
-  color: var(--x-color-muted-foreground);
-  font-size: 24px;
-  gap: 20px;
+  color: var(--muted-foreground);
+  font-size: var(--x-font-size-xs);
+  gap: var(--x-space-2);
 }
 
-.x-taro-auth-divider > view {
+.x-taro-auth-divider__line {
   flex: 1;
-  height: 2px;
-  background: var(--x-color-border);
+  height: var(--x-space-px);
+  background: var(--border);
 }
 
 .x-taro-auth-phone {
+  box-sizing: border-box;
   width: 100%;
   min-width: 0;
   overflow: hidden;
-  background: var(--x-color-background);
-  border: 2px solid var(--x-color-input);
+  background: var(--background);
+  border: var(--x-space-px) solid var(--input);
   border-radius: var(--x-radius-lg);
 }
 
 .x-taro-auth-phone__country {
+  font-size: var(--x-taro-auth-phone-font-size);
+  line-height: 1.5;
   box-sizing: border-box;
-  min-height: 84px;
-  padding: 0 24px;
-  border-right: 2px solid var(--x-color-border);
-  gap: 12px;
+  min-height: calc(var(--x-taro-auth-phone-height) - var(--x-space-px) * 2);
+  padding: 0 var(--x-space-3);
+  border-right: var(--x-space-px) solid var(--border);
+  gap: calc(var(--x-space-1) + var(--x-space-1) / 2);
 }
 
 .x-taro-auth-phone__input {
@@ -177,23 +213,27 @@
 
 .x-taro-auth-steps {
   display: flex;
-  margin-bottom: 44px;
-  gap: 20px;
+  margin-bottom: var(--x-space-6);
+  gap: var(--x-space-2);
 }
 
-.x-taro-auth-steps > view {
+.x-taro-auth-step {
   display: flex;
   flex: 1;
-  padding-bottom: 16px;
-  color: var(--x-color-muted-foreground);
-  border-bottom: 4px solid var(--x-color-border);
-  font-size: 24px;
-  gap: 10px;
+  min-width: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  line-height: 1.5;
+  padding-bottom: var(--x-space-2);
+  color: var(--muted-foreground);
+  border-bottom: calc(var(--x-space-1) / 2) solid var(--border);
+  font-size: var(--x-font-size-xs);
+  gap: calc(var(--x-space-1) + var(--x-space-px));
 }
 
-.x-taro-auth-steps > view[data-active='true'] {
-  color: var(--x-color-foreground);
-  border-bottom-color: var(--x-color-foreground);
+.x-taro-auth-step[data-active='true'] {
+  color: var(--foreground);
+  border-bottom-color: var(--foreground);
   font-weight: 600;
 }
 
@@ -209,7 +249,7 @@
 @keyframes x-taro-auth-step-enter {
   from {
     opacity: 0;
-    transform: translate3d(28px, 0, 0);
+    transform: translate3d(var(--x-font-size-sm), 0, 0);
   }
 
   to {
@@ -221,7 +261,7 @@
 @keyframes x-taro-auth-step-back {
   from {
     opacity: 0;
-    transform: translate3d(-28px, 0, 0);
+    transform: translate3d(calc(-1 * var(--x-font-size-sm)), 0, 0);
   }
 
   to {
@@ -232,28 +272,38 @@
 
 .x-taro-auth-quick {
   position: relative;
-  padding-top: 8px;
-}
-
-.x-taro-auth-quick__back,
-.x-taro-auth-quick__close {
-  position: absolute;
-  top: -16px;
-  z-index: 1;
-  width: 72px;
-  min-width: 72px;
-  height: 72px;
-  padding: 0;
-  background: var(--x-color-muted);
-  border-radius: var(--x-radius-full);
+  padding-top: var(--x-space-1);
 }
 
-.x-taro-auth-quick__back {
-  left: -16px;
+.x-taro-auth-quick__nav {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--x-space-3);
 }
-
-.x-taro-auth-quick__close {
-  right: -16px;
+.x-taro-auth-quick__nav:empty {
+  display: none;
+}
+.x-taro-auth-quick__nav--close {
+  justify-content: flex-end;
+}
+.x-taro-auth-step__number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--x-space-6);
+  height: var(--x-space-6);
+  border-radius: var(--x-radius-full);
+  background: var(--muted);
+}
+.x-taro-auth-step[data-active='true'] .x-taro-auth-step__number {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+.x-taro-auth-panel__footer {
+  flex-wrap: wrap;
+}
+.x-taro-auth-security__value {
+  overflow-wrap: anywhere;
 }
 
 .x-taro-auth-success {
@@ -262,7 +312,7 @@
 }
 
 .x-taro-auth-success__title {
-  font-size: 36px;
+  font-size: var(--x-font-size-lg);
   font-weight: 700;
 }
 
@@ -272,17 +322,20 @@
 
 .x-taro-auth-security__list {
   overflow: hidden;
-  background: var(--x-color-card);
-  border: 2px solid var(--x-color-border);
+  background: var(--card);
+  border: var(--x-space-px) solid var(--border);
   border-radius: var(--x-radius-xl);
 }
 
 .x-taro-auth-security__row {
   box-sizing: border-box;
-  min-height: 168px;
-  padding: var(--x-taro-auth-security-row-padding, 32px 36px);
-  border-bottom: 2px solid var(--x-color-border);
-  gap: 24px;
+  min-height: calc(var(--x-space-10) + var(--x-space-12));
+  padding: var(
+    --x-taro-auth-security-row-padding,
+    var(--x-space-4) calc(var(--x-space-4) + calc(var(--x-space-1) / 2))
+  );
+  border-bottom: var(--x-space-px) solid var(--border);
+  gap: var(--x-space-3);
 }
 
 .x-taro-auth-security__row:last-child {
@@ -294,18 +347,22 @@
   flex: 1;
   min-width: 0;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--x-space-1);
 }
 
-@media (max-width: 840px) {
+@media (max-width: 40em) {
   .x-taro-auth-panel--card {
-    padding: 40px 32px;
+    padding: var(--x-taro-auth-panel-padding, var(--x-space-6) var(--x-space-5));
     border-radius: var(--x-radius-lg);
   }
 
+  .x-taro-auth-panel__title {
+    font-size: var(--x-font-size-2xl);
+  }
+
   .x-taro-auth-security__row {
-    min-height: 152px;
-    padding: 28px;
+    min-height: calc(var(--x-space-10) + var(--x-space-8));
+    padding: var(--x-space-4);
   }
 }
 
@@ -314,3 +371,8 @@
     animation: none;
   }
 }
+
+/* A footer inside a form already participates in its gap. */
+.x-taro-auth-form > .x-taro-auth-panel__footer {
+  margin-top: 0;
+}

package/lib/auth/theme.js

@@ -28,14 +28,17 @@ function cssValue(value) {
   return typeof value === "number" ? `${value}px` : value;
 }
 function authThemeTokensToStyle(tokens) {
-  return {
+  const style = {
     "--x-taro-auth-dialog-max-width": cssValue(tokens == null ? void 0 : tokens.dialogMaxWidth),
-    "--x-taro-auth-form-gap": cssValue(tokens == null ? void 0 : tokens.formGap),
-    "--x-taro-auth-motion-duration": cssValue(tokens == null ? void 0 : tokens.motionDuration),
-    "--x-taro-auth-panel-max-width": cssValue(tokens == null ? void 0 : tokens.panelMaxWidth),
+    "--x-taro-auth-form-gap": cssValue((tokens == null ? void 0 : tokens.formGap) ?? 18),
+    "--x-taro-auth-motion-duration": typeof (tokens == null ? void 0 : tokens.motionDuration) === "number" ? `${tokens.motionDuration}ms` : tokens == null ? void 0 : tokens.motionDuration,
+    "--x-taro-auth-panel-max-width": cssValue((tokens == null ? void 0 : tokens.panelMaxWidth) ?? 460),
     "--x-taro-auth-panel-padding": cssValue(tokens == null ? void 0 : tokens.panelPadding),
     "--x-taro-auth-security-row-padding": cssValue(tokens == null ? void 0 : tokens.securityRowPadding)
   };
+  return Object.fromEntries(
+    Object.entries(style).filter(([, value]) => value !== void 0)
+  );
 }
 function resolveAuthThemeTokens(base, override) {
   return { ...base, ...override };

package/lib/components/_shared/render.d.ts

@@ -5,7 +5,7 @@ interface RenderTextNodeAttributes {
     className?: string;
     'data-slot'?: string;
 }
-export declare const renderTextNode: (node: React.ReactNode, style: React.CSSProperties, attributes?: RenderTextNodeAttributes) => true | Iterable<React.ReactNode> | React.JSX.Element | null;
+export declare const renderTextNode: (node: React.ReactNode, style: React.CSSProperties, attributes?: RenderTextNodeAttributes) => true | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null;
 export declare const getStatusColor: (status: 'normal' | 'success' | 'warning' | 'error' | 'info', colors: {
     primary: string;
     success: string;

package/lib/components/button/button.js

@@ -57,6 +57,7 @@ var Button = ({
   size: sizeProp,
   shape = "default",
   block = false,
+  compact = false,
   disabled: disabledProp = false,
   loading = false,
   icon,
@@ -126,12 +127,15 @@ var Button = ({
   const shapeRadius = shape === "rounded" || shape === "round" ? "var(--x-radius-full)" : shape === "square" || shape === "rectangular" ? 0 : buttonStyle.borderRadius;
   const combinedStyle = {
     ...buttonStyle,
+    ...resolvedVariant === "link" ? { borderWidth: 0, textDecoration: "underline" } : {},
+    ...compact ? { height: "auto", minHeight: 0, minWidth: 0, padding: 0, width: block ? "100%" : "auto" } : {},
     borderRadius: shapeRadius,
     gap: typeof gap === "number" ? `${gap}px` : gap,
     ...style,
     ...pressStyle,
     transition: "transform var(--x-duration-fast) var(--x-easing-standard), background-color var(--x-duration-emphasis) var(--x-easing-standard), border-color var(--x-duration-emphasis) var(--x-easing-standard), color var(--x-duration-emphasis) var(--x-easing-standard), opacity var(--x-duration-standard) var(--x-easing-standard)"
   };
+  const h5SemanticProps = { role: "button" };
   const iconNode = loading ? loadingIcon ?? /* @__PURE__ */ import_react.default.createElement(import_icon.Icon, { name: "Loader2", size: buttonTokens.iconSize, spin: true, color: buttonColors.color, block: true }) : icon;
   const renderedIconNode = import_react.default.isValidElement(iconNode) ? import_react.default.cloneElement(iconNode, {
     color: iconNode.props.color == null || iconNode.props.color === "currentColor" ? String(buttonStyle.color) : iconNode.props.color
@@ -142,6 +146,7 @@ var Button = ({
     fontWeight: buttonStyle.fontWeight,
     lineHeight: `${buttonTokens.lineHeight}px`,
     textAlign: "center",
+    textDecoration: resolvedVariant === "link" ? "underline" : void 0,
     whiteSpace: block ? "normal" : "nowrap",
     wordBreak: "keep-all"
   };
@@ -184,6 +189,7 @@ var Button = ({
       style: combinedStyle,
       disabled: interactionDisabled,
       formType: htmlType === "button" ? void 0 : htmlType,
+      ...h5SemanticProps,
       ariaLabel,
       "aria-disabled": interactionDisabled,
       "data-slot": "button",
@@ -194,6 +200,7 @@ var Button = ({
       "data-loading": loading ? "true" : "false",
       "data-disabled": interactionDisabled ? "true" : "false",
       "data-block": block ? "true" : "false",
+      "data-compact": compact ? "true" : "false",
       "data-icon-only": iconOnly ? "true" : "false",
       ...handlers
     },

package/lib/components/button/types.d.ts

@@ -24,6 +24,12 @@ export interface ButtonProps {
     shape?: 'default' | 'rounded' | 'round' | 'square' | 'rectangular';
     /** Full width button */
     block?: boolean;
+    /**
+     * Remove padding and preset dimensions for inline actions; preserve block width.
+     * Base button margins are zero. Sibling spacing belongs to the parent gap/layout.
+     * `variant="link"` alone does not remove size padding. Explicit style overrides still win.
+     */
+    compact?: boolean;
     /** Disabled state */
     disabled?: boolean;
     /** Loading state */

package/lib/components/capsuleTabs/capsuleTabs.js

@@ -419,6 +419,7 @@ var CapsuleTabs = ({
     })
   );
   const panels = resolvedItems.map((item) => {
+    if (item.children == null) return null;
     const active = item.key === currentKey;
     if (!active && !item.forceRender) return null;
     if (!active && item.destroyOnClose) return null;

package/lib/components/icon/lucide.generated.d.ts

@@ -333,6 +333,9 @@ export declare const lucideIconNodes: {
     }], readonly ["path", {
         readonly d: "m15 5 4 4";
     }]];
+    readonly Phone: readonly [readonly ["path", {
+        readonly d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z";
+    }]];
     readonly Plus: readonly [readonly ["path", {
         readonly d: "M5 12h14";
     }], readonly ["path", {
@@ -534,6 +537,13 @@ export declare const lucideIconNodes: {
         readonly cy: "7";
         readonly r: "4";
     }]];
+    readonly UserRound: readonly [readonly ["circle", {
+        readonly cx: "12";
+        readonly cy: "8";
+        readonly r: "5";
+    }], readonly ["path", {
+        readonly d: "M20 21a8 8 0 0 0-16 0";
+    }]];
     readonly Users: readonly [readonly ["path", {
         readonly d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2";
     }], readonly ["circle", {

package/lib/components/icon/lucide.generated.js

@@ -770,6 +770,14 @@ var lucideIconNodes = {
       }
     ]
   ],
+  Phone: [
+    [
+      "path",
+      {
+        d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
+      }
+    ]
+  ],
   Plus: [
     [
       "path",
@@ -1295,6 +1303,22 @@ var lucideIconNodes = {
       }
     ]
   ],
+  UserRound: [
+    [
+      "circle",
+      {
+        cx: "12",
+        cy: "8",
+        r: "5"
+      }
+    ],
+    [
+      "path",
+      {
+        d: "M20 21a8 8 0 0 0-16 0"
+      }
+    ]
+  ],
   Users: [
     [
       "path",

package/lib/components/inputItem/inputItem.js

@@ -207,6 +207,9 @@ var InputItem = import_react.default.forwardRef((props, ref) => {
     ...style
   };
   const inputStyle = {
+    // H5 renders Input as a host around .weui-input; center that child while
+    // preserving the full-height native hit target. Miniapp owns its text layout.
+    ...process.env.TARO_ENV === "h5" ? { display: "flex", alignItems: "center" } : {},
     minWidth: 0,
     width: "100%",
     flex: 1,

package/lib/components/list/list.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ListItemProps, ListProps } from './types';
 export declare const ListItem: React.FC<ListItemProps>;
-export declare const List: (<T>({ dataSource, renderItem, keyExtractor, emptyText, loading, loadingText, divider, header, headerFontSize, prefixWidth, mode, variant, children, className, style, testID, ...viewProps }: ListProps<T>) => React.JSX.Element) & {
+export declare const List: (<T>({ dataSource, renderItem, keyExtractor, emptyText, loading, loadingText, divider, header, headerFontSize, prefixWidth, mode, variant, children, className, style, testID, ...viewProps }: ListProps<T>) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
     Item: React.FC<ListItemProps>;
 };

package/lib/components/pagination/pagination.js

@@ -167,19 +167,24 @@ var Pagination = ({
       {
         "data-slot": "pagination-total",
         style: {
-          flexShrink: 0,
+          flexShrink: 1,
+          minWidth: 0,
+          maxWidth: "100%",
           display: "flex",
           alignItems: "center",
-          height: sizeTokens.buttonSize
+          minHeight: sizeTokens.buttonSize
         }
       },
       /* @__PURE__ */ import_react.default.createElement(
         import_components.Text,
         {
           style: {
+            maxWidth: "100%",
             fontSize: sizeTokens.fontSize,
-            lineHeight: `${sizeTokens.buttonSize}px`,
-            color: palette.summary
+            lineHeight: `${sizeTokens.textLineHeight}px`,
+            color: palette.summary,
+            whiteSpace: "normal",
+            overflowWrap: "anywhere"
           }
         },
         content
@@ -230,7 +235,12 @@ var Pagination = ({
         ariaLabel: `第 ${pageNumber} 页`,
         disabled,
         onPress: () => changePage(pageNumber),
-        style: getButtonStyle({ active: isActive, disabledState: disabled })
+        style: {
+          ...getButtonStyle({ active: isActive, disabledState: disabled }),
+          width: "auto",
+          paddingLeft: sizeTokens.ellipsisPaddingX,
+          paddingRight: sizeTokens.ellipsisPaddingX
+        }
       },
       /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style: getPageTextStyle(isActive) }, pageNumber)
     );
@@ -382,6 +392,9 @@ var Pagination = ({
         flexDirection: "row",
         flexWrap: "wrap",
         alignItems: "center",
+        minWidth: 0,
+        maxWidth: "100%",
+        boxSizing: "border-box",
         gap: sizeTokens.gap,
         ...style
       }
@@ -398,6 +411,7 @@ var Pagination = ({
           flexWrap: "wrap",
           alignItems: "center",
           gap: groupGap,
+          minWidth: 0,
           maxWidth: "100%",
           overflowX: "visible"
         }