jfs-components 0.1.12 → 0.1.18

package/src/components/CircularProgressBar/CircularProgressBar.tsx

@@ -126,18 +126,18 @@ function CircularProgressBar({
 
   const trackColor = getStrokeColor(
     trackStyle,
-    getVariableByName('circularProgressBar/track/color', trackModes) as string || '#ebebed'
+    getVariableByName('circularProgressBar/track/color', trackModes)
   )
   const progressColor = getStrokeColor(
     progressStyle,
-    getVariableByName('circularProgressBar/progress/color', modes) as string || '#25ab21'
+    getVariableByName('circularProgressBar/progress/color', modes)
   )
-  const iconColor = getVariableByName('circularProgressBar/icon/color', modes) as string || '#666666'
+  const iconColor = getVariableByName('circularProgressBar/icon/color', modes)
   const iconSize = toNumber(getVariableByName('circularProgressBar/icon/size', modes), 24)
 
-  const foreground = getVariableByName('circularProgressBar/foreground', modes) as string || '#0d0d0f'
+  const foreground = getVariableByName('circularProgressBar/foreground', modes)
   const fontSize = toNumber(getVariableByName('circularProgressBar/value/fontSize', modes), 18)
-  const fontFamily = getVariableByName('circularProgressBar/fontFamily', modes) as string || 'JioType Var'
+  const fontFamily = getVariableByName('circularProgressBar/fontFamily', modes)
   const lineHeight = toNumber(getVariableByName('circularProgressBar/value/lineHeight', modes), 21)
   const fontWeight = toFontWeight(getVariableByName('circularProgressBar/value/fontWeight', modes), '700')
 

package/src/components/CircularProgressBarDoted/CircularProgressBarDoted.tsx

@@ -147,11 +147,11 @@ function CircularProgressBarDoted({
 
   const trackDotColor = getBackgroundColor(
     trackDotStyle,
-    getVariableByName('circularProgressBarDoted/trackDot/bg', modes) as string || '#ebebed'
+    getVariableByName('circularProgressBarDoted/trackDot/bg', modes)
   )
   const progressDotColor = getBackgroundColor(
     progressDotStyle,
-    getVariableByName('circularProgressBarDoted/progressDot/bg', modes) as string || '#25ab21'
+    getVariableByName('circularProgressBarDoted/progressDot/bg', modes)
   )
 
   const contentGap = toNumber(getVariableByName('circularProgressBarDoted/gap', modes), 12)
@@ -160,21 +160,21 @@ function CircularProgressBarDoted({
   const scoreTrendGap = toNumber(getVariableByName('circularProgressBarDoted/scoreTrend/gap', modes), 2)
   const scoreTrendHeight = toNumber(getVariableByName('circularProgressBarDoted/scoreTrend/height', modes), 24)
 
-  const typographyFontFamily = getVariableByName('Typography/Font Family', modes) as string || 'JioType Var'
-  const labelColor = getVariableByName('circularProgressBarDoted/label/color', modes) as string || '#080d1a'
+  const typographyFontFamily = getVariableByName('Typography/Font Family', modes)
+  const labelColor = getVariableByName('circularProgressBarDoted/label/color', modes)
   const labelFontSize = toNumber(getVariableByName('Typography/Size/Body/XS', modes), 12)
   const labelFontWeight = toFontWeight(getVariableByName('Typography/Font Weight/Body Low (Regular)', modes), '400')
 
-  const scoreColor = getVariableByName('circularProgressBarDoted/scoreLabel/color', modes) as string || '#080d1a'
+  const scoreColor = getVariableByName('circularProgressBarDoted/scoreLabel/color', modes)
   const scoreFontSize = toNumber(getVariableByName('circularProgressBarDoted/scoreLabel/fontSize', modes), 56)
-  const scoreFontFamily = getVariableByName('circularProgressBarDoted/scoreLabel/fontFamily', modes) as string || 'JioType Var'
+  const scoreFontFamily = getVariableByName('circularProgressBarDoted/scoreLabel/fontFamily', modes)
   const scoreLineHeight = toNumber(getVariableByName('circularProgressBarDoted/scoreLabel/lineHeight', modes), 56)
   const scoreFontWeight = toFontWeight(getVariableByName('circularProgressBarDoted/scoreLabel/fontWeight', modes), '900')
 
-  const tierColor = getVariableByName('circularProgressBarDoted/tierLabel/color', modes) as string || '#080d1a'
+  const tierColor = getVariableByName('circularProgressBarDoted/tierLabel/color', modes)
   const tierFontSize = toNumber(getVariableByName('Typography/Size/Body/M', modes), 16)
   const tierFontWeight = toFontWeight(getVariableByName('Typography/Font Weight/Body High', modes), '700')
-  const iconColor = getVariableByName('circularProgressBarDoted/icon/color', modes) as string || '#303338'
+  const iconColor = getVariableByName('circularProgressBarDoted/icon/color', modes)
   const iconSize = toNumber(getVariableByName('circularProgressBarDoted/icon/size', modes), 24)
 
   const dots = useMemo(

package/src/components/CircularRating/CircularRating.tsx

@@ -105,9 +105,9 @@ function resolveCircularRatingTokens(modes: Modes): CircularRatingTokens {
 
   const footerGap = toNumber(getVariableByName('circularRating/footer/gap', modes), 4)
   const footerHeight = toNumber(getVariableByName('circularRating/footer/height', modes), 16)
-  const footerTextColor = getVariableByName('circularRating/footer/text/color', modes) || '#0d0d0f'
+  const footerTextColor = getVariableByName('circularRating/footer/text/color', modes)
   const footerTextFontSize = toNumber(getVariableByName('circularRating/footer/text/fontSize', modes), 12)
-  const footerTextFontFamily = getVariableByName('circularRating/footer/text/fontFamily', modes) || 'JioType Var'
+  const footerTextFontFamily = getVariableByName('circularRating/footer/text/fontFamily', modes)
   const footerTextLineHeight = toNumber(getVariableByName('circularRating/footer/text/lineHeight', modes), 16)
   const footerTextFontWeight = toFontWeight(
     getVariableByName('circularRating/footer/text/fontWeight', modes),
@@ -141,7 +141,7 @@ function resolveCircularRatingTokens(modes: Modes): CircularRatingTokens {
       lineHeight: footerTextLineHeight,
       textAlign: 'center',
     },
-    footerIconColor: (getVariableByName('circularRating/footer/icon/color', modes) || '#1a1c1f') as string,
+    footerIconColor: (getVariableByName('circularRating/footer/icon/color', modes)) as string,
     footerIconSize: toNumber(getVariableByName('circularRating/footer/icon/size', modes), 16),
   }
 }

package/src/components/CompareTable/CompareTable.tsx

@@ -215,24 +215,24 @@ function CompareTable({
     const addIconColor = ADD_BUTTON_ICON_COLOR
 
     // --- table header tokens --------------------------------------------------
-    const headerBg = (getVariableByName('comparetableHeader/background/color', modes) as string) ?? '#f5f5f5'
-    const headerLabelColor = (getVariableByName('comparetableHeader/label/color', modes) as string) ?? '#000000'
-    const headerFontSize = (getVariableByName('comparetableHeader/label/fontsize', modes) as number) ?? 14
-    const headerFontFamily = (getVariableByName('comparetableHeader/label/fontfamily', modes) as string) ?? 'JioType Var'
-    const headerFontWeight = (getVariableByName('comparetableHeader/label/fontweight', modes) as number | string) ?? 600
-    const headerPaddingH = (getVariableByName('comparetableHeader/padding/horizontal', modes) as number) ?? 12
-    const headerPaddingV = (getVariableByName('comparetableHeader/padding/vertical', modes) as number) ?? 12
+    const headerBg = (getVariableByName('tableHeader/background/color', modes) as string) ?? '#f5f5f5'
+    const headerLabelColor = (getVariableByName('tableHeader/label/color', modes) as string) ?? '#000000'
+    const headerFontSize = (getVariableByName('tableHeader/label/fontsize', modes) as number) ?? 14
+    const headerFontFamily = (getVariableByName('tableHeader/label/fontfamily', modes) as string) ?? 'JioType Var'
+    const headerFontWeight = (getVariableByName('tableHeader/label/fontweight', modes) as number | string) ?? 600
+    const headerPaddingH = (getVariableByName('tableHeader/padding/horizontal', modes) as number) ?? 12
+    const headerPaddingV = (getVariableByName('tableHeader/padding/vertical', modes) as number) ?? 12
 
     // --- table cell tokens ----------------------------------------------------
-    const cellBorderColor = (getVariableByName('compareTableCell/border/color', modes) as string) ?? '#eeeeee'
-    const cellBorderSize = (getVariableByName('compareTableCell/border/size', modes) as number) ?? 1
-    const cellBg = (getVariableByName('compareTableCell/background/color', modes) as string) ?? '#ffffff'
-    const cellLabelColor = (getVariableByName('compareTableCell/label/color', modes) as string) ?? '#000000'
-    const cellFontSize = (getVariableByName('compareTableCell/label/fontsize', modes) as number) ?? 14
-    const cellFontFamily = (getVariableByName('compareTableCell/label/fontfamily', modes) as string) ?? 'JioType Var'
-    const cellFontWeight = (getVariableByName('compareTableCell/label/fontweight', modes) as number | string) ?? 400
-    const cellPaddingH = (getVariableByName('compareTableCell/padding/horizontal', modes) as number) ?? 12
-    const cellPaddingV = (getVariableByName('compareTableCell/padding/vertical', modes) as number) ?? 12
+    const cellBorderColor = (getVariableByName('tableCell/border/color', modes) as string) ?? '#eeeeee'
+    const cellBorderSize = (getVariableByName('tableCell/border/size', modes) as number) ?? 1
+    const cellBg = (getVariableByName('tableCell/background/color', modes) as string) ?? '#ffffff'
+    const cellLabelColor = (getVariableByName('tableCell/label/color', modes) as string) ?? '#000000'
+    const cellFontSize = (getVariableByName('tableCell/label/fontsize', modes) as number) ?? 14
+    const cellFontFamily = (getVariableByName('tableCell/label/fontfamily', modes) as string) ?? 'JioType Var'
+    const cellFontWeight = (getVariableByName('tableCell/label/fontweight', modes) as number | string) ?? 400
+    const cellPaddingH = (getVariableByName('tableCell/padding/horizontal', modes) as number) ?? 12
+    const cellPaddingV = (getVariableByName('tableCell/padding/vertical', modes) as number) ?? 12
 
     const columnCount = columns.length
     const showAddCard = onAddColumn != null && columnCount < maxColumns

package/src/components/DebitCard/DebitCard.tsx

@@ -45,28 +45,28 @@ function DebitCard({
     const { modes: globalModes } = useTokens()
     const modes = { ...globalModes, ...propModes }
 
-    const background = getVariableByName('debitCard/background', modes) || '#cea15a'
-    const radius = getVariableByName('debitCard/radius', modes) || 16
-    const width = getVariableByName('debitCard/width', modes) || 328
-    const height = getVariableByName('debitCard/height', modes) || 224
-    const paddingBottom = getVariableByName('debitCard/padding/bottom', modes) || 24
-
-    const headerPaddingH = getVariableByName('debitCard/header/padding/horizontal', modes) || 20
-    const headerPaddingTop = getVariableByName('debitCard/header/padding/top', modes) || 16
-    const headerPaddingBottom = getVariableByName('debitCard/header/padding/bottom', modes) || 28
-
-    const cardArtHeight = getVariableByName('debitCard/cardArt/height', modes) || 50
-    const cardArtRadius = getVariableByName('debitCard/cardArt/radius', modes) || 4
-
-    const footerGap = getVariableByName('debitCard/footer/gap', modes) || 16
-    const footerPaddingH = getVariableByName('debitCard/footer/padding/horizontal', modes) || 20
-    const footerPaddingTop = getVariableByName('debitCard/footer/padding/top', modes) || 16
-
-    const foreground = getVariableByName('debitCard/foreground', modes) || '#141414'
-    const fontSize = getVariableByName('debitCard/fontSize', modes) || 14
-    const fontFamily = getVariableByName('debitCard/fontFamily', modes) || 'JioType Var'
-    const lineHeight = getVariableByName('debitCard/lineHeight', modes) || 17
-    const fontWeightRaw = getVariableByName('debitCard/fontWeight', modes) || 500
+    const background = getVariableByName('debitCard/background', modes)
+    const radius = getVariableByName('debitCard/radius', modes)
+    const width = getVariableByName('debitCard/width', modes)
+    const height = getVariableByName('debitCard/height', modes)
+    const paddingBottom = getVariableByName('debitCard/padding/bottom', modes)
+
+    const headerPaddingH = getVariableByName('debitCard/header/padding/horizontal', modes)
+    const headerPaddingTop = getVariableByName('debitCard/header/padding/top', modes)
+    const headerPaddingBottom = getVariableByName('debitCard/header/padding/bottom', modes)
+
+    const cardArtHeight = getVariableByName('debitCard/cardArt/height', modes)
+    const cardArtRadius = getVariableByName('debitCard/cardArt/radius', modes)
+
+    const footerGap = getVariableByName('debitCard/footer/gap', modes)
+    const footerPaddingH = getVariableByName('debitCard/footer/padding/horizontal', modes)
+    const footerPaddingTop = getVariableByName('debitCard/footer/padding/top', modes)
+
+    const foreground = getVariableByName('debitCard/foreground', modes)
+    const fontSize = getVariableByName('debitCard/fontSize', modes)
+    const fontFamily = getVariableByName('debitCard/fontFamily', modes)
+    const lineHeight = getVariableByName('debitCard/lineHeight', modes)
+    const fontWeightRaw = getVariableByName('debitCard/fontWeight', modes)
     const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw
 
     const containerStyle: ViewStyle = {

package/src/components/Disclaimer/Disclaimer.tsx

@@ -47,15 +47,15 @@ function Disclaimer({
   const { modes: globalModes } = useTokens()
   const modes = { ...globalModes, ...propModes }
   // Resolve typography and color from Figma variables
-  const color = getVariableByName('disclaimer/color', modes) || '#24262b'
+  const color = getVariableByName('disclaimer/color', modes)
   const fontSize =
-    getVariableByName('disclaimer/label/fontSize', modes) || 10
+    getVariableByName('disclaimer/label/fontSize', modes)
   const lineHeight =
-    getVariableByName('disclaimer/label/lineHeight', modes) || 12
+    getVariableByName('disclaimer/label/lineHeight', modes)
   const fontFamily =
-    getVariableByName('disclaimer/label/fontFamily', modes) || 'System'
+    getVariableByName('disclaimer/label/fontFamily', modes)
   const fontWeightRaw =
-    getVariableByName('disclaimer/label/fontWeight', modes) || 500
+    getVariableByName('disclaimer/label/fontWeight', modes)
   const fontWeight =
     typeof fontWeightRaw === 'number'
       ? fontWeightRaw.toString()

package/src/components/DonutChart/DonutChart.tsx

@@ -285,59 +285,25 @@ function DonutChart({
     const showValueLabel = !hasChildrenSlot && shouldRenderText(value)
     const showLabel = !hasChildrenSlot && shouldRenderText(label)
 
-    const valueColor =
-        (getVariableByName('donutChart/value/color', modes) as string | null) ??
-        (getVariableByName('value/fg', modes) as string | null) ??
-        '#000000'
-    const valueFontFamily =
-        (getVariableByName('donutChart/value/fontFamily', modes) as string | null) ??
-        (getVariableByName('value/fontFamily', modes) as string | null) ??
-        'JioType Var'
-    const valueFontSize = toNumber(
-        getVariableByName('donutChart/value/fontSize', modes) ??
-            getVariableByName('value/fontSize', modes),
-        29
-    )
-    const valueLineHeight = toNumber(
-        getVariableByName('donutChart/value/lineHeight', modes) ??
-            getVariableByName('value/lineHeight', modes),
-        29
-    )
+    const valueColor = getVariableByName('value/fg', modes) as string
+    const valueFontFamily = getVariableByName('value/fontFamily', modes) as string
+    const valueFontSize = toNumber(getVariableByName('value/fontSize', modes), 29)
+    const valueLineHeight = toNumber(getVariableByName('value/lineHeight', modes), 29)
     const valueFontWeight = toFontWeight(
-        getVariableByName('donutChart/value/fontWeight', modes) ??
-            getVariableByName('value/fontWeight', modes),
+        getVariableByName('value/fontWeight', modes),
         '900'
     )
 
-    const labelColor =
-        (getVariableByName('donutChart/label/color', modes) as string | null) ??
-        (getVariableByName('label/fg', modes) as string | null) ??
-        '#000000'
-    const labelFontFamily =
-        (getVariableByName('donutChart/label/fontFamily', modes) as string | null) ??
-        (getVariableByName('label/fontFamily', modes) as string | null) ??
-        'JioType Var'
-    const labelFontSize = toNumber(
-        getVariableByName('donutChart/label/fontSize', modes) ??
-            getVariableByName('label/fontSize', modes),
-        12
-    )
-    const labelLineHeight = toNumber(
-        getVariableByName('donutChart/label/lineHeight', modes) ??
-            getVariableByName('label/lineHeight', modes),
-        15.6
-    )
+    const labelColor = getVariableByName('label/fg', modes) as string
+    const labelFontFamily = getVariableByName('label/fontFamily', modes) as string
+    const labelFontSize = toNumber(getVariableByName('label/fontSize', modes), 12)
+    const labelLineHeight = toNumber(getVariableByName('label/lineHeight', modes), 15.6)
     const labelFontWeight = toFontWeight(
-        getVariableByName('donutChart/label/fontWeight', modes) ??
-            getVariableByName('label/fontWeight', modes),
+        getVariableByName('label/fontWeight', modes),
         '400'
     )
 
-    const textWrapGap = toNumber(
-        getVariableByName('donutChart/textWrap/gap', modes) ??
-            getVariableByName('textWrap/gap', modes),
-        7
-    )
+    const textWrapGap = toNumber(getVariableByName('textWrap/gap', modes), 7)
 
     const containerStyle: ViewStyle = {
         alignItems: 'center',

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

@@ -14,6 +14,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 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'
 
@@ -74,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),
@@ -285,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
@@ -305,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