jfs-components 0.1.8 → 0.1.17

package/src/components/Drawer/Drawer.tsx

@@ -15,6 +15,7 @@ import Animated, {
 } from 'react-native-reanimated'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import { boxShadow } from '../../utils/shadow'
 import type { Modes } from '../../design-tokens'
 import Overlay from '../Overlay/Overlay'
 
@@ -390,28 +391,29 @@ function DrawerInner({
   })
 
   // Design Tokens
-  const backgroundColor = getVariableByName('drawer/background', modes) || '#f5f5f5'
-  const radius = getVariableByName('drawer/radius/top', modes) || 12
+  const backgroundColor = getVariableByName('drawer/background', modes)
+  const radius = getVariableByName('drawer/radius/top', modes)
 
   // Handle
-  const handleColor = getVariableByName('drawer/handlebar/background', modes) || '#e0e0e3'
-  const handleWidth = getVariableByName('drawer/handlebar/width', modes) || 42
-  const handleHeight = getVariableByName('drawer/handlebar/height', modes) || 6
-  const handleRadius = getVariableByName('drawer/handlebar/radius', modes) || 999
+  const handleColor = getVariableByName('drawer/handlebar/background', modes)
+  const handleWidth = getVariableByName('drawer/handlebar/width', modes)
+  const handleHeight = getVariableByName('drawer/handlebar/height', modes)
+  const handleRadius = getVariableByName('drawer/handlebar/radius', modes)
 
   // Padding
-  const paddingLeft = getVariableByName('drawer/padding/left', modes) || 8
-  const paddingRight = getVariableByName('drawer/padding/right', modes) || 8
-  const paddingBottom = getVariableByName('drawer/padding/bottom', modes) || 10
-  const drawerGap = getVariableByName('drawer/gap', modes) || 8
-  // Note: drawer/padding/top is 0 in tokens, but we keep the 8px visual spacing for the handle as requested.
+  const paddingLeft = getVariableByName('drawer/padding/left', modes)
+  const paddingRight = getVariableByName('drawer/padding/right', modes)
+  const paddingBottom = getVariableByName('drawer/padding/bottom', modes)
+  const drawerGap = getVariableByName('drawer/gap', modes)
 
   // Title
-  const titleColor = getVariableByName('drawer/title/color', modes) || '#0d0d0f'
-  const titleSize = getVariableByName('drawer/title/fontSize', modes) || 14
-  const titleWeight = getVariableByName('drawer/title/fontWeight', modes) || '700'
-  const titleLineHeight = getVariableByName('drawer/title/lineHeight', modes) || 17
-  const titlePaddingBottom = getVariableByName('drawer/titleWrap/padding/bottom', modes) || 8
+  const titleColor = getVariableByName('drawer/title/color', modes)
+  const titleSize = getVariableByName('drawer/title/fontSize', modes)
+  const titleWeight = getVariableByName('drawer/title/fontWeight', modes)
+  const titleLineHeight = getVariableByName('drawer/title/lineHeight', modes)
+  const titleWrapPaddingTop = getVariableByName('drawer/titleWrap/padding/top', modes)
+  const titleWrapPaddingBottom = getVariableByName('drawer/titleWrap/padding/bottom', modes)
+  const titleWrapPaddingHorizontal = getVariableByName('drawer/titleWrap/padding/horizontal', modes)
 
   // Drop shadow — Figma layers two shadows (primary + secondary) sharing
   // the same offsetY/blur but with their own offsetX and color.
@@ -422,26 +424,15 @@ function DrawerInner({
   const shadowSecondaryOffsetX = (getVariableByName('drawer/shadow/secondary/offsetX', modes) ?? 0) as number
   const shadowSecondaryColor = (getVariableByName('drawer/shadow/secondary/color', modes) ?? 'rgba(12, 13, 16, 0.12)') as string
 
-  // Cross-platform shadow style. Web supports stacking two shadows via
-  // boxShadow. iOS only supports a single native shadow per view, so we
-  // apply the more prominent (primary) one. Android uses elevation.
-  const shadowStyle: ViewStyle = Platform.select({
-    web: {
-      boxShadow:
-        `${shadowSecondaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowSecondaryColor}, ` +
-        `${shadowPrimaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowPrimaryColor}`,
-    } as ViewStyle,
-    ios: {
-      shadowColor: shadowPrimaryColor,
-      shadowOffset: { width: shadowPrimaryOffsetX, height: shadowPrimaryOffsetY },
-      shadowOpacity: 1,
-      shadowRadius: shadowPrimaryBlur / 2,
-    },
-    android: {
-      elevation: 16,
-    },
-    default: {},
-  }) as ViewStyle
+  // Cross-platform shadow via the unified helper. Figma layers two shadows
+  // (secondary + primary) which stack natively as a single multi-layer
+  // boxShadow on web + RN 0.76+. On older RN the helper falls back to the most
+  // prominent layer (iOS shadow*) / a fixed elevation (Android).
+  const shadowStyle: ViewStyle = boxShadow(
+    `${shadowSecondaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowSecondaryColor}, ` +
+      `${shadowPrimaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowPrimaryColor}`,
+    { elevation: 16 },
+  )
 
   const defaultAccessibilityLabel = accessibilityLabel || title || 'Drawer'
 
@@ -491,44 +482,62 @@ function DrawerInner({
                 paddingLeft,
                 paddingRight,
                 paddingBottom,
-                rowGap: drawerGap,
               },
             ]}
           >
-            {/* Handle Area */}
-            <View style={[styles.handleArea, (!title && !header) && { paddingBottom: 0 }]}>
-              <View
-                style={[
-                  {
-                    backgroundColor: handleColor,
-                    width: handleWidth,
-                    height: handleHeight,
-                    borderRadius: handleRadius
-                  },
-                ]}
-              />
+            {/* Header unit — handle + optional header + title behave as ONE
+                block. The core gap (drawer/gap) is intentionally NOT applied
+                between the handle and the title; it is applied only once, below
+                this whole unit, to separate it from the scrollable content. */}
+            <View style={{ marginBottom: drawerGap }}>
+              {/* Handle Area. The handle owns an extra bottom margin ONLY when
+                  it is the sole header element (no title / no header slot) so
+                  that handle↔content resolves to handleMargin(8) + coreGap(8) =
+                  16. When a title/header follows, the title wrapper's own top
+                  padding provides the handle↔title spacing instead. */}
+              <View style={[styles.handleArea, (!title && !header) && { marginBottom: drawerGap }]}>
+                <View
+                  style={[
+                    {
+                      backgroundColor: handleColor,
+                      width: handleWidth,
+                      height: handleHeight,
+                      borderRadius: handleRadius
+                    },
+                  ]}
+                />
+              </View>
+
+              {/* Custom Header Slot */}
+              {header}
+
+              {/* Title (Legacy/Simple Mode) — centered per design */}
+              {title && (
+                <View
+                  style={{
+                    paddingTop: titleWrapPaddingTop,
+                    paddingBottom: titleWrapPaddingBottom,
+                    paddingHorizontal: titleWrapPaddingHorizontal,
+                    alignItems: 'center',
+                  }}
+                >
+                  <Text
+                    style={[
+                      {
+                        color: titleColor,
+                        fontSize: titleSize,
+                        fontWeight: titleWeight as any,
+                        lineHeight: titleLineHeight,
+                        textAlign: 'center',
+                      },
+                    ]}
+                  >
+                    {title}
+                  </Text>
+                </View>
+              )}
             </View>
 
-            {/* Custom Header Slot */}
-            {header}
-
-            {/* Title (Legacy/Simple Mode) */}
-            {title && (
-              <Text
-                style={[
-                  {
-                    color: titleColor,
-                    fontSize: titleSize,
-                    fontWeight: titleWeight as any,
-                    lineHeight: titleLineHeight,
-                    marginBottom: titlePaddingBottom,
-                  }
-                ]}
-              >
-                {title}
-              </Text>
-            )}
-
             {/* Scrollable Content */}
             <AnimatedScrollView
               ref={scrollRef}
@@ -579,8 +588,8 @@ const styles = StyleSheet.create({
   },
   handleArea: {
     alignItems: 'center',
-    paddingVertical: 8,
-    width: '100%'
+    marginTop: 8,
+    width: '100%',
   },
 
   content: {

package/src/components/Dropdown/Dropdown.tsx

@@ -13,7 +13,8 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
+import { boxShadow } from '../../utils/shadow'
 import Icon from '../../icons/Icon'
 import type { Modes } from '../../design-tokens'
 
@@ -57,6 +58,12 @@ export type DropdownItemProps = {
     accessibilityLabel?: string
     /** Accessibility hint. */
     accessibilityHint?: string
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 function useDropdownItemTokens(modes: Modes) {
@@ -68,26 +75,23 @@ function useDropdownItemTokens(modes: Modes) {
             (getVariableByName('dropdownItem/background', {
                 ...modes,
                 'Dropdown Item State': 'Idle',
-            }) as string) || '#ffffff'
+            }) as string)
         const selectedBackground =
             (getVariableByName('dropdownItem/background', {
                 ...modes,
                 'Dropdown Item State': 'Selected',
-            }) as string) || '#f5f5f5'
+            }) as string)
         const foreground =
-            (getVariableByName('dropdownItem/foreground', modes) as string) ||
-            '#000000'
+            (getVariableByName('dropdownItem/foreground', modes) as string)
         const fontFamily =
-            (getVariableByName('dropdownItem/fontFamily', modes) as string) ||
-            'JioType Var'
+            (getVariableByName('dropdownItem/fontFamily', modes) as string)
         const fontSize =
-            parseInt(getVariableByName('dropdownItem/fontSize', modes), 10) || 16
+            parseInt(getVariableByName('dropdownItem/fontSize', modes), 10)
         const fontWeight =
-            (getVariableByName('dropdownItem/fontWeight', modes) as string) ||
-            '400'
+            (getVariableByName('dropdownItem/fontWeight', modes) as string)
         const lineHeight =
-            parseInt(getVariableByName('dropdownItem/lineHeight', modes), 10) || 19
-        const gap = parseInt(getVariableByName('dropdownItem/gap', modes), 10) || 8
+            parseInt(getVariableByName('dropdownItem/lineHeight', modes), 10)
+        const gap = parseInt(getVariableByName('dropdownItem/gap', modes), 10)
         const paddingHorizontal =
             parseInt(
                 getVariableByName('dropdownItem/padding/horizontal', modes),
@@ -128,6 +132,7 @@ export function DropdownItem({
     labelStyle,
     accessibilityLabel,
     accessibilityHint,
+    disableTruncation,
 }: DropdownItemProps) {
     const { modes: globalModes } = useTokens()
     const modes = useMemo(
@@ -226,7 +231,7 @@ export function DropdownItem({
             {children != null ? (
                 children
             ) : (
-                <Text style={[textStyle, labelStyle]} numberOfLines={1}>
+                <Text style={[textStyle, labelStyle]} {...resolveTruncation(disableTruncation, 1)}>
                     {label}
                 </Text>
             )}
@@ -278,18 +283,17 @@ export function Dropdown({
     )
 
     const radius =
-        parseInt(getVariableByName('dropdown/radius', modes), 10) || 8
+        parseInt(getVariableByName('dropdown/radius', modes), 10)
     const background =
-        (getVariableByName('dropdown/background', modes) as string) || '#ffffff'
+        (getVariableByName('dropdown/background', modes) as string)
     const shadowColor =
-        (getVariableByName('dropdown/shadow/color', modes) as string) ||
-        'rgba(0, 0, 0, 0.08)'
+        (getVariableByName('dropdown/shadow/color', modes) as string)
     const shadowOffsetX =
-        parseInt(getVariableByName('dropdown/shadow/offsetX', modes), 10) || 0
+        parseInt(getVariableByName('dropdown/shadow/offsetX', modes), 10)
     const shadowOffsetY =
-        parseInt(getVariableByName('dropdown/shadow/offsetY', modes), 10) || 4
+        parseInt(getVariableByName('dropdown/shadow/offsetY', modes), 10)
     const shadowBlur =
-        parseInt(getVariableByName('dropdown/shadow/blur', modes), 10) || 16
+        parseInt(getVariableByName('dropdown/shadow/blur', modes), 10)
 
     // Shadow lives on the OUTER view, which must NOT set `overflow: 'hidden'`.
     // On native, clipping a view also clips its shadow (iOS clips the layer
@@ -298,18 +302,16 @@ export function Dropdown({
     // get cut off. The rounded-corner clipping is moved to a separate inner
     // view below.
     //
-    // The `boxShadow` style prop (RN 0.76+ / react-native-web) is used as the
-    // single source of truth so the designed color/offset/blur are honored on
-    // iOS, Android AND web. We intentionally do NOT also set the legacy
-    // `shadow*` / `elevation` props: on the new architecture (and web) those
-    // are translated into a box-shadow internally, so combining them with an
-    // explicit `boxShadow` would stack two shadows. Android's legacy
-    // `elevation` is also undesirable here because it ignores the shadow color
-    // and only paints a generic gray shadow.
-    const shadowStyle: ViewStyle & { boxShadow?: string } = {
+    // The unified `boxShadow` helper is the single source of truth so the
+    // designed color/offset/blur are honored on iOS, Android AND web. On RN
+    // 0.76+ / web it emits the spec `boxShadow` prop; on older RN it translates
+    // to the legacy `shadow*` (iOS) / `elevation` (Android) API. We intentionally
+    // do NOT also set the legacy props manually on the supported path: those
+    // would stack a second shadow.
+    const shadowStyle: ViewStyle = {
         backgroundColor: background,
         borderRadius: radius,
-        boxShadow: `${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px 0px ${shadowColor}`,
+        ...boxShadow(`${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px 0px ${shadowColor}`),
     }
 
     // Inner view carries the rounded corners + clipping so list/scroll content

package/src/components/DropdownInput/DropdownInput.tsx

@@ -24,7 +24,7 @@ import {
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils'
+import { EMPTY_MODES, flattenChildren, resolveTruncation } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
 import SupportText from '../SupportText/SupportText'
 import type { SupportTextStatus } from '../SupportText/SupportTextIcon'
@@ -171,6 +171,12 @@ export type DropdownInputProps = {
     onFocus?: (e: any) => void
     /** Called when the trigger loses focus (web only). */
     onBlur?: (e: any) => void
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 // ---------------------------------------------------------------------------
@@ -180,10 +186,9 @@ export type DropdownInputProps = {
 function useChevronTokens(modes: Modes) {
     return useMemo(() => {
         const iconSize =
-            parseInt(getVariableByName('input/iconSize', modes), 10) || 32
+            parseInt(getVariableByName('input/iconSize', modes), 10)
         const iconColor =
-            (getVariableByName('iconButton/icon/color', modes) as string) ||
-            '#0f0d0a'
+            (getVariableByName('iconButton/icon/color', modes) as string)
         return { iconSize, iconColor }
     }, [modes])
 }
@@ -200,11 +205,9 @@ function toNumber(value: unknown, fallback: number): number {
 function useFormFieldTokens(modes: Modes) {
     return useMemo(() => {
         const labelColor =
-            (getVariableByName('formField/label/color', modes) as string) ||
-            '#000000'
+            (getVariableByName('formField/label/color', modes) as string)
         const labelFontFamily =
-            (getVariableByName('formField/label/fontFamily', modes) as string) ||
-            'JioType Var'
+            (getVariableByName('formField/label/fontFamily', modes) as string)
         const labelFontSize = toNumber(
             getVariableByName('formField/label/fontSize', modes),
             14
@@ -214,8 +217,7 @@ function useFormFieldTokens(modes: Modes) {
             17
         )
         const labelFontWeight =
-            (getVariableByName('formField/label/fontWeight', modes) as string) ||
-            '500'
+            (getVariableByName('formField/label/fontWeight', modes) as string)
 
         const gap = toNumber(getVariableByName('formField/gap', modes), 8)
 
@@ -232,8 +234,7 @@ function useFormFieldTokens(modes: Modes) {
             8
         )
         const inputBackground =
-            (getVariableByName('formField/input/background', modes) as string) ||
-            '#ffffff'
+            (getVariableByName('formField/input/background', modes) as string)
         const inputFontSize = toNumber(
             getVariableByName('formField/input/label/fontSize', modes),
             16
@@ -246,26 +247,24 @@ function useFormFieldTokens(modes: Modes) {
             (getVariableByName(
                 'formField/input/label/fontFamily',
                 modes
-            ) as string) || 'JioType Var'
+            ) as string)
         const inputFontWeight =
             (getVariableByName(
                 'formField/input/label/fontWeight',
                 modes
-            ) as string) || '400'
+            ) as string)
         const inputTextColor =
             (getVariableByName(
                 'states/formField/input/label/color',
                 modes
             ) as string) ||
-            (getVariableByName('formField/input/label/color', modes) as string) ||
-            '#24262b'
+            (getVariableByName('formField/input/label/color', modes) as string)
         const inputBorderColor =
             (getVariableByName(
                 'states/formField/input/border/color',
                 modes
             ) as string) ||
-            (getVariableByName('formField/input/border/color', modes) as string) ||
-            '#b5b6b7'
+            (getVariableByName('formField/input/border/color', modes) as string)
         // Figma spec: 1.5px. Using parseFloat (via toNumber) preserves the
         // fractional value — parseInt was truncating it to 1, leaving the
         // resolved row height ~1px shorter than the Figma reference.
@@ -362,6 +361,7 @@ const DropdownInput = forwardRef<DropdownInputHandle, DropdownInputProps>(functi
     accessibilityHint,
     onFocus,
     onBlur,
+    disableTruncation,
 }: DropdownInputProps, ref: React.Ref<DropdownInputHandle>) {
     // ---------------- Modes ----------------
     const { modes: globalModes } = useTokens()
@@ -829,7 +829,7 @@ const DropdownInput = forwardRef<DropdownInputHandle, DropdownInputProps>(functi
                             valueTextStyle,
                             !hasValue && { color: placeholderColor },
                         ]}
-                        numberOfLines={1}
+                        {...resolveTruncation(disableTruncation, 1)}
                     >
                         {displayLabel}
                     </Text>

package/src/components/EmptyState/EmptyState.tsx

@@ -60,26 +60,26 @@ function EmptyState({
     const modes = { ...globalModes, ...propModes }
 
     // Container Tokens
-    const gap = getVariableByName('emptyState/gap', modes) || 24
-    const padding = getVariableByName('emptyState/padding', modes) || 4
-    const radius = getVariableByName('emptyState/radius', modes) || 16
+    const gap = getVariableByName('emptyState/gap', modes)
+    const padding = getVariableByName('emptyState/padding', modes)
+    const radius = getVariableByName('emptyState/radius', modes)
 
     // Content Wrap Tokens
-    const contentGap = getVariableByName('emptyState/content/gap', modes) || 16
+    const contentGap = getVariableByName('emptyState/content/gap', modes)
 
     // Title Tokens
-    const titleColor = getVariableByName('emptyState/title/color', modes) || '#0d0d0f'
-    const titleFontSize = getVariableByName('emptyState/title/fontSize', modes) || 16
-    const titleFontFamily = getVariableByName('emptyState/title/fontFamily', modes) || 'System'
-    const titleLineHeight = getVariableByName('emptyState/title/lineHeight', modes) || 18
-    const titleFontWeight = getVariableByName('emptyState/title/fontWeight', modes) || 700
+    const titleColor = getVariableByName('emptyState/title/color', modes)
+    const titleFontSize = getVariableByName('emptyState/title/fontSize', modes)
+    const titleFontFamily = getVariableByName('emptyState/title/fontFamily', modes)
+    const titleLineHeight = getVariableByName('emptyState/title/lineHeight', modes)
+    const titleFontWeight = getVariableByName('emptyState/title/fontWeight', modes)
 
     // Body Tokens
-    const bodyColor = getVariableByName('emptyState/body/color', modes) || '#1a1c1f'
-    const bodyFontSize = getVariableByName('emptyState/body/fontSize', modes) || 12
-    const bodyFontFamily = getVariableByName('emptyState/body/fontFamily', modes) || 'System'
-    const bodyLineHeight = getVariableByName('emptyState/body/lineHeight', modes) || 16
-    const bodyFontWeight = getVariableByName('emptyState/body/fontWeight', modes) || 400
+    const bodyColor = getVariableByName('emptyState/body/color', modes)
+    const bodyFontSize = getVariableByName('emptyState/body/fontSize', modes)
+    const bodyFontFamily = getVariableByName('emptyState/body/fontFamily', modes)
+    const bodyLineHeight = getVariableByName('emptyState/body/lineHeight', modes)
+    const bodyFontWeight = getVariableByName('emptyState/body/fontWeight', modes)
 
 
     const containerStyle: ViewStyle = {

package/src/components/ExpandableCheckbox/ExpandableCheckbox.tsx

@@ -35,6 +35,12 @@ export type ExpandableCheckboxProps = {
   readLessLabel?: string
   /** Number of lines to show when collapsed. Defaults to `1`. */
   collapsedLines?: number
+  /**
+   * When `true`, disables truncation of the collapsed label: the trailing
+   * ellipsis (`…`) is never shown and the `collapsedLines` clamp is ignored, so
+   * the label wraps fully even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
   /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
   modes?: Modes
   /** Override outer container styles. */
@@ -96,6 +102,7 @@ function ExpandableCheckbox({
   readMoreLabel = 'Read more',
   readLessLabel = 'Read less',
   collapsedLines = 1,
+  disableTruncation = false,
   modes = EMPTY_MODES,
   style,
   labelStyle,
@@ -205,7 +212,7 @@ function ExpandableCheckbox({
   const buttonLabel = isExpanded ? readLessLabel : readMoreLabel
 
   const labelNumberOfLinesProps =
-    !isExpanded && collapsedLines > 0
+    !disableTruncation && !isExpanded && collapsedLines > 0
       ? { numberOfLines: collapsedLines, ellipsizeMode: 'tail' as const }
       : null
 

package/src/components/FilterBar/FilterBar.tsx

@@ -74,8 +74,8 @@ function FilterBar({
     borderColor: isFocused ? '#222' : 'transparent',
   }
   // Resolve container tokens
-  const paddingHorizontal = getVariableByName('filterBar/padding/horizontal', modes) || 16
-  const paddingVertical = getVariableByName('filterBar/padding/vertical', modes) || 10
+  const paddingHorizontal = getVariableByName('filterBar/padding/horizontal', modes)
+  const paddingVertical = getVariableByName('filterBar/padding/vertical', modes)
 
   const resolvedAccessibilityLabel = accessibilityLabel || 'Search filter'
 

package/src/components/Form/Form.tsx

@@ -72,9 +72,9 @@ function Form({
     [validationErrors, onFieldChange],
   )
 
-  const gap = parseInt(getVariableByName('form/gap', modes), 10) || 12
-  const paddingHorizontal = parseInt(getVariableByName('form/padding/horizontal', modes), 10) || 0
-  const paddingVertical = parseInt(getVariableByName('form/padding/vertical', modes), 10) || 0
+  const gap = parseInt(getVariableByName('form/gap', modes), 10)
+  const paddingHorizontal = parseInt(getVariableByName('form/padding/horizontal', modes), 10)
+  const paddingVertical = parseInt(getVariableByName('form/padding/vertical', modes), 10)
 
   const containerStyle: ViewStyle = useMemo(() => ({
     gap,