@xaui/native 0.0.8 → 0.0.9

package/dist/switch/index.cjs

@@ -35,25 +35,43 @@ __export(switch_exports, {
 module.exports = __toCommonJS(switch_exports);
 
 // src/components/switch/switch.tsx
-var import_react4 = __toESM(require("react"), 1);
-var import_react_native5 = require("react-native");
+var import_react7 = __toESM(require("react"), 1);
+var import_react_native6 = require("react-native");
 
 // src/components/switch/switch.hook.ts
-var import_react3 = require("react");
+var import_react6 = require("react");
 var import_core = require("@xaui/core");
 
 // src/core/theme-context.tsx
-var import_react = __toESM(require("react"), 1);
-var import_react_native = require("react-native");
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
 var import_theme = require("@xaui/core/theme");
 var import_palette = require("@xaui/core/palette");
-var XUIThemeContext = (0, import_react.createContext)(null);
 
-// src/core/theme-hooks.ts
+// src/core/portal/portal.tsx
 var import_react2 = require("react");
-var import_react_native2 = require("react-native");
+
+// src/core/portal/portal-context.ts
+var import_react = require("react");
+var PortalContext = (0, import_react.createContext)(null);
+
+// src/core/portal/portal-host.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var hostStyles = import_react_native.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react4.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react5 = require("react");
+var import_react_native3 = require("react-native");
 function useXUITheme() {
-  const theme = (0, import_react2.useContext)(XUIThemeContext);
+  const theme = (0, import_react5.useContext)(XUIThemeContext);
   if (!theme) {
     throw new Error("useXUITheme must be used within XUIProvider");
   }
@@ -71,7 +89,7 @@ var useSwitchColorScheme = (themeColor) => {
 };
 var useSwitchSizeStyles = (variant, size) => {
   const theme = useXUITheme();
-  const sizeStyles = (0, import_react3.useMemo)(() => {
+  const sizeStyles = (0, import_react6.useMemo)(() => {
     if (variant === "overlap") {
       const sizes2 = {
         sm: {
@@ -127,7 +145,7 @@ var useSwitchSizeStyles = (variant, size) => {
 };
 var useSwitchRadiusStyles = (radius) => {
   const theme = useXUITheme();
-  const radiusStyles = (0, import_react3.useMemo)(() => {
+  const radiusStyles = (0, import_react6.useMemo)(() => {
     const radii = {
       none: theme.borderRadius.none,
       sm: theme.borderRadius.sm,
@@ -137,7 +155,7 @@ var useSwitchRadiusStyles = (radius) => {
     };
     return { borderRadius: radii[radius] };
   }, [radius, theme]);
-  const thumbRadius = (0, import_react3.useMemo)(() => {
+  const thumbRadius = (0, import_react6.useMemo)(() => {
     const radii = {
       none: theme.borderRadius.none,
       sm: theme.borderRadius.sm,
@@ -157,7 +175,7 @@ var useSwitchTrackStyles = ({
   radiusStyles
 }) => {
   const theme = useXUITheme();
-  const trackStyles = (0, import_react3.useMemo)(() => {
+  const trackStyles = (0, import_react6.useMemo)(() => {
     const backgroundColor = isSelected ? variant === "overlap" ? colorScheme.background : colorScheme.main : theme.colors.default.background;
     return {
       width: sizeStyles.trackWidth,
@@ -177,7 +195,7 @@ var useSwitchThumbStyles = ({
   thumbRadius
 }) => {
   const theme = useXUITheme();
-  const thumbStyles = (0, import_react3.useMemo)(() => {
+  const thumbStyles = (0, import_react6.useMemo)(() => {
     const baseStyle = {
       width: sizeStyles.thumbSize,
       height: sizeStyles.thumbSize,
@@ -193,7 +211,7 @@ var useSwitchThumbStyles = ({
   return thumbStyles;
 };
 var useSwitchContainerStyles = (labelAlignment) => {
-  const containerStyles = (0, import_react3.useMemo)(() => {
+  const containerStyles = (0, import_react6.useMemo)(() => {
     const isJustified = labelAlignment === "justify-left" || labelAlignment === "justify-right";
     return {
       flexDirection: labelAlignment === "left" || labelAlignment === "justify-left" ? "row-reverse" : "row",
@@ -204,9 +222,9 @@ var useSwitchContainerStyles = (labelAlignment) => {
 };
 
 // src/components/switch/switch.animation.ts
-var import_react_native3 = require("react-native");
+var import_react_native4 = require("react-native");
 var runThumbPositionAnimation = (thumbPosition, isSelected) => {
-  import_react_native3.Animated.spring(thumbPosition, {
+  import_react_native4.Animated.spring(thumbPosition, {
     toValue: isSelected ? 1 : 0,
     useNativeDriver: true,
     damping: 15,
@@ -214,24 +232,24 @@ var runThumbPositionAnimation = (thumbPosition, isSelected) => {
   }).start();
 };
 var runSwitchPressInAnimation = (animatedScale, animatedThumbScale, isOverlap) => {
-  import_react_native3.Animated.parallel([
-    import_react_native3.Animated.spring(animatedScale, {
+  import_react_native4.Animated.parallel([
+    import_react_native4.Animated.spring(animatedScale, {
       toValue: 0.95,
       useNativeDriver: true
     }),
-    import_react_native3.Animated.spring(animatedThumbScale, {
+    import_react_native4.Animated.spring(animatedThumbScale, {
       toValue: isOverlap ? 1.1 : 1.2,
       useNativeDriver: true
     })
   ]).start();
 };
 var runSwitchPressOutAnimation = (animatedScale, animatedThumbScale) => {
-  import_react_native3.Animated.parallel([
-    import_react_native3.Animated.spring(animatedScale, {
+  import_react_native4.Animated.parallel([
+    import_react_native4.Animated.spring(animatedScale, {
       toValue: 1,
       useNativeDriver: true
     }),
-    import_react_native3.Animated.spring(animatedThumbScale, {
+    import_react_native4.Animated.spring(animatedThumbScale, {
       toValue: 1,
       useNativeDriver: true
     })
@@ -239,8 +257,8 @@ var runSwitchPressOutAnimation = (animatedScale, animatedThumbScale) => {
 };
 
 // src/components/switch/switch.style.ts
-var import_react_native4 = require("react-native");
-var styles = import_react_native4.StyleSheet.create({
+var import_react_native5 = require("react-native");
+var styles = import_react_native5.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center",
@@ -292,11 +310,11 @@ var Switch = ({
 }) => {
   const theme = useXUITheme();
   const isControlled = typeof isSelectedProp === "boolean";
-  const [internalSelected, setInternalSelected] = (0, import_react4.useState)(isSelectedProp ?? false);
+  const [internalSelected, setInternalSelected] = (0, import_react7.useState)(isSelectedProp ?? false);
   const isSelected = isControlled ? isSelectedProp : internalSelected;
-  const scale = (0, import_react4.useRef)(new import_react_native5.Animated.Value(1)).current;
-  const thumbPosition = (0, import_react4.useRef)(new import_react_native5.Animated.Value(isSelected ? 1 : 0)).current;
-  const thumbScale = (0, import_react4.useRef)(new import_react_native5.Animated.Value(1)).current;
+  const scale = (0, import_react7.useRef)(new import_react_native6.Animated.Value(1)).current;
+  const thumbPosition = (0, import_react7.useRef)(new import_react_native6.Animated.Value(isSelected ? 1 : 0)).current;
+  const thumbScale = (0, import_react7.useRef)(new import_react_native6.Animated.Value(1)).current;
   const colorScheme = useSwitchColorScheme(themeColor);
   const sizeStyles = useSwitchSizeStyles(variant, size);
   const { radiusStyles, thumbRadius } = useSwitchRadiusStyles(radius);
@@ -315,20 +333,20 @@ var Switch = ({
     thumbRadius
   });
   const containerStyles = useSwitchContainerStyles(labelAlignment);
-  const maxTranslateX = (0, import_react4.useMemo)(() => {
+  const maxTranslateX = (0, import_react7.useMemo)(() => {
     if (variant === "overlap") {
       return sizeStyles.trackWidth - sizeStyles.thumbSize;
     }
     return sizeStyles.trackWidth - sizeStyles.thumbSize - sizeStyles.padding * 2;
   }, [sizeStyles, variant]);
-  const translateX = (0, import_react4.useMemo)(
+  const translateX = (0, import_react7.useMemo)(
     () => thumbPosition.interpolate({
       inputRange: [0, 1],
       outputRange: [0, maxTranslateX]
     }),
     [maxTranslateX, thumbPosition]
   );
-  (0, import_react4.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     runThumbPositionAnimation(thumbPosition, isSelected);
   }, [isSelected, thumbPosition]);
   const handlePress = () => {
@@ -347,8 +365,8 @@ var Switch = ({
     if (isDisabled) return;
     runSwitchPressOutAnimation(scale, thumbScale);
   };
-  return /* @__PURE__ */ import_react4.default.createElement(
-    import_react_native5.Pressable,
+  return /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native6.Pressable,
     {
       onPress: handlePress,
       onPressIn: handlePressIn,
@@ -369,8 +387,8 @@ var Switch = ({
         style
       ]
     },
-    /* @__PURE__ */ import_react4.default.createElement(
-      import_react_native5.Animated.View,
+    /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native6.Animated.View,
       {
         style: [
           styles.track,
@@ -380,8 +398,8 @@ var Switch = ({
           }
         ]
       },
-      /* @__PURE__ */ import_react4.default.createElement(import_react_native5.View, { style: styles.thumbContainer }, /* @__PURE__ */ import_react4.default.createElement(
-        import_react_native5.Animated.View,
+      /* @__PURE__ */ import_react7.default.createElement(import_react_native6.View, { style: styles.thumbContainer }, /* @__PURE__ */ import_react7.default.createElement(
+        import_react_native6.Animated.View,
         {
           style: [
             styles.thumb,
@@ -393,8 +411,8 @@ var Switch = ({
         }
       ))
     ),
-    label && /* @__PURE__ */ import_react4.default.createElement(
-      import_react_native5.Text,
+    label && /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native6.Text,
       {
         style: [
           styles.label,

package/dist/switch/index.js

@@ -1,6 +1,6 @@
 import {
   useXUITheme
-} from "../chunk-ORMNMNOK.js";
+} from "../chunk-NBRASCX4.js";
 
 // src/components/switch/switch.tsx
 import React, { useEffect, useMemo as useMemo2, useRef, useState } from "react";

package/dist/typography/index.cjs

@@ -0,0 +1,223 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/typography/index.ts
+var typography_exports = {};
+__export(typography_exports, {
+  Typography: () => Typography
+});
+module.exports = __toCommonJS(typography_exports);
+
+// src/components/typography/typography.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+
+// src/components/typography/typography.style.ts
+var import_react_native = require("react-native");
+var styles = import_react_native.StyleSheet.create({
+  text: {
+    includeFontPadding: false
+  }
+});
+
+// src/components/typography/typography.hook.ts
+var import_react6 = require("react");
+
+// src/core/theme-context.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native3 = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
+
+// src/core/portal/portal.tsx
+var import_react2 = require("react");
+
+// src/core/portal/portal-context.ts
+var import_react = require("react");
+var PortalContext = (0, import_react.createContext)(null);
+
+// src/core/portal/portal-host.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
+var hostStyles = import_react_native2.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react4.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react5 = require("react");
+var import_react_native4 = require("react-native");
+function useXUITheme() {
+  const theme = (0, import_react5.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
+// src/components/typography/typography.hook.ts
+var import_core2 = require("@xaui/core");
+var knownVariants = {
+  caption: true,
+  headlineLarge: true,
+  headlineMedium: true,
+  headlineSmall: true,
+  subtitleLarge: true,
+  subtitleMedium: true,
+  subtitleSmall: true,
+  bodyLarge: true,
+  bodyMedium: true,
+  bodySmall: true
+};
+var isKnownVariant = (variant) => {
+  return Boolean(knownVariants[variant]);
+};
+var useTypographyColor = (themeColor) => {
+  const theme = useXUITheme();
+  const color = (0, import_react6.useMemo)(() => {
+    if (themeColor === "default") {
+      return theme.colors.foreground;
+    }
+    const safeThemeColor = (0, import_core2.getSafeThemeColor)(themeColor);
+    return theme.colors[safeThemeColor].main;
+  }, [theme, themeColor]);
+  return color;
+};
+var useTypographyVariantStyles = (variant) => {
+  const theme = useXUITheme();
+  const variantStyles = (0, import_react6.useMemo)(() => {
+    if (!isKnownVariant(variant)) {
+      return {
+        fontFamily: theme.fontFamilies.body,
+        fontSize: theme.fontSizes.md,
+        fontWeight: theme.fontWeights.normal
+      };
+    }
+    const styles2 = {
+      caption: {
+        fontFamily: theme.fontFamilies.body,
+        fontSize: theme.fontSizes.xs,
+        fontWeight: theme.fontWeights.normal
+      },
+      headlineLarge: {
+        fontFamily: theme.fontFamilies.heading,
+        fontSize: theme.fontSizes["4xl"] + 3,
+        fontWeight: theme.fontWeights.bold
+      },
+      headlineMedium: {
+        fontFamily: theme.fontFamilies.heading,
+        fontSize: theme.fontSizes["3xl"] + 3,
+        fontWeight: theme.fontWeights.bold
+      },
+      headlineSmall: {
+        fontFamily: theme.fontFamilies.heading,
+        fontSize: theme.fontSizes["2xl"] + 3,
+        fontWeight: theme.fontWeights.semibold
+      },
+      subtitleLarge: {
+        fontFamily: theme.fontFamilies.body,
+        fontSize: theme.fontSizes.md + 5,
+        fontWeight: theme.fontWeights.medium
+      },
+      subtitleMedium: {
+        fontFamily: theme.fontFamilies.body,
+        fontSize: theme.fontSizes.sm + 5,
+        fontWeight: theme.fontWeights.medium
+      },
+      subtitleSmall: {
+        fontFamily: theme.fontFamilies.body,
+        fontSize: theme.fontSizes.xs + 5,
+        fontWeight: theme.fontWeights.medium
+      },
+      bodyLarge: {
+        fontFamily: theme.fontFamilies.body,
+        fontSize: theme.fontSizes.md,
+        fontWeight: theme.fontWeights.normal
+      },
+      bodyMedium: {
+        fontFamily: theme.fontFamilies.body,
+        fontSize: theme.fontSizes.sm,
+        fontWeight: theme.fontWeights.normal
+      },
+      bodySmall: {
+        fontFamily: theme.fontFamilies.body,
+        fontSize: theme.fontSizes.xs,
+        fontWeight: theme.fontWeights.normal
+      }
+    };
+    return styles2[variant];
+  }, [theme, variant]);
+  return variantStyles;
+};
+
+// src/components/typography/typography.tsx
+var Typography = ({
+  children,
+  align,
+  themeColor = "default",
+  variant = "bodyMedium",
+  maxLines,
+  overflow = "clip",
+  style
+}) => {
+  const color = useTypographyColor(themeColor);
+  const variantStyles = useTypographyVariantStyles(variant);
+  const colorStyle = { color };
+  const ellipsizeMode = (0, import_react7.useMemo)(() => {
+    if (!maxLines) return void 0;
+    if (overflow === "clip") return "clip";
+    return "tail";
+  }, [maxLines, overflow]);
+  return /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native5.Text,
+    {
+      numberOfLines: maxLines,
+      ellipsizeMode,
+      style: [
+        styles.text,
+        variantStyles,
+        align && { textAlign: align },
+        colorStyle,
+        style
+      ]
+    },
+    children
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Typography
+});

package/dist/typography/index.d.cts

@@ -0,0 +1,43 @@
+import React, { ReactNode } from 'react';
+import { StyleProp, TextStyle } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.cjs';
+
+type TypographyAlign = 'center' | 'justify' | 'left' | 'right';
+type TypographyVariant = 'caption' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'subtitleLarge' | 'subtitleMedium' | 'subtitleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | string;
+type TypographyProps = {
+    /**
+     * The content to display inside the typography component.
+     */
+    children: ReactNode;
+    /**
+     * The text alignment.
+     */
+    align?: TypographyAlign;
+    /**
+     * The theme color for the text.
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The typography variant.
+     * @default 'bodyMedium'
+     */
+    variant?: TypographyVariant;
+    /**
+     * Maximum number of lines to display.
+     */
+    maxLines?: number;
+    /**
+     * How to handle text overflow when maxLines is set.
+     * @default 'clip'
+     */
+    overflow?: 'clip' | 'ellipsis';
+    /**
+     * Custom styles for the text.
+     */
+    style?: StyleProp<TextStyle>;
+};
+
+declare const Typography: React.FC<TypographyProps>;
+
+export { Typography, type TypographyAlign, type TypographyProps, type TypographyVariant };

package/dist/typography/index.d.ts

@@ -0,0 +1,43 @@
+import React, { ReactNode } from 'react';
+import { StyleProp, TextStyle } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.js';
+
+type TypographyAlign = 'center' | 'justify' | 'left' | 'right';
+type TypographyVariant = 'caption' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'subtitleLarge' | 'subtitleMedium' | 'subtitleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | string;
+type TypographyProps = {
+    /**
+     * The content to display inside the typography component.
+     */
+    children: ReactNode;
+    /**
+     * The text alignment.
+     */
+    align?: TypographyAlign;
+    /**
+     * The theme color for the text.
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The typography variant.
+     * @default 'bodyMedium'
+     */
+    variant?: TypographyVariant;
+    /**
+     * Maximum number of lines to display.
+     */
+    maxLines?: number;
+    /**
+     * How to handle text overflow when maxLines is set.
+     * @default 'clip'
+     */
+    overflow?: 'clip' | 'ellipsis';
+    /**
+     * Custom styles for the text.
+     */
+    style?: StyleProp<TextStyle>;
+};
+
+declare const Typography: React.FC<TypographyProps>;
+
+export { Typography, type TypographyAlign, type TypographyProps, type TypographyVariant };

package/dist/typography/index.js

@@ -0,0 +1,7 @@
+import {
+  Typography
+} from "../chunk-ZYTBRHLJ.js";
+import "../chunk-NBRASCX4.js";
+export {
+  Typography
+};

package/dist/view/index.cjs

@@ -169,8 +169,10 @@ var Padding = ({
   right,
   bottom,
   left,
+  fullWidth,
   style
 }) => {
+  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
   return /* @__PURE__ */ import_react4.default.createElement(
     import_react_native4.View,
     {
@@ -184,6 +186,7 @@ var Padding = ({
           paddingBottom: bottom,
           paddingLeft: left
         },
+        fullWidthStyle,
         style
       ]
     },
@@ -197,21 +200,23 @@ var import_react5 = __toESM(require("react"), 1);
 var import_react_native5 = require("react-native");
 var Margin = ({
   children,
-  value,
+  all,
   horizontal,
   vertical,
   top,
   right,
   bottom,
   left,
+  fullWidth,
   style
 }) => {
+  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
   return /* @__PURE__ */ import_react5.default.createElement(
     import_react_native5.View,
     {
       style: [
         {
-          margin: value,
+          margin: all,
           marginHorizontal: horizontal,
           marginVertical: vertical,
           marginTop: top,
@@ -219,6 +224,7 @@ var Margin = ({
           marginBottom: bottom,
           marginLeft: left
         },
+        fullWidthStyle,
         style
       ]
     },

package/dist/view/index.d.cts

@@ -90,6 +90,11 @@ type PaddingProps = {
      * Left padding.
      */
     left?: number;
+    /**
+     * Whether the padding container should take the full width of its parent.
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * Custom style for the padding container.
      */
@@ -106,7 +111,7 @@ type MarginProps = {
     /**
      * Margin on all sides.
      */
-    value?: number;
+    all?: number;
     /**
      * Horizontal margin.
      */
@@ -131,6 +136,11 @@ type MarginProps = {
      * Left margin.
      */
     left?: number;
+    /**
+     * Whether the margin container should take the full width of its parent.
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * Custom style for the margin container.
      */

package/dist/view/index.d.ts

@@ -90,6 +90,11 @@ type PaddingProps = {
      * Left padding.
      */
     left?: number;
+    /**
+     * Whether the padding container should take the full width of its parent.
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * Custom style for the padding container.
      */
@@ -106,7 +111,7 @@ type MarginProps = {
     /**
      * Margin on all sides.
      */
-    value?: number;
+    all?: number;
     /**
      * Horizontal margin.
      */
@@ -131,6 +136,11 @@ type MarginProps = {
      * Left margin.
      */
     left?: number;
+    /**
+     * Whether the margin container should take the full width of its parent.
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * Custom style for the margin container.
      */