jfs-components 0.1.12 → 0.1.17

package/lib/typescript/src/icons/components/index.d.ts

@@ -2,6 +2,7 @@
  * Auto-generated icon components
  */
 export * from './Icon360rotation';
+export * from './Icon4g';
 export * from './Icon4gbarfour';
 export * from './Icon4gbarnonetwork';
 export * from './Icon4gbarnone';
@@ -9,9 +10,15 @@ export * from './Icon4gbarone';
 export * from './Icon4gbarthree';
 export * from './Icon4gbartwo';
 export * from './Icon4glte';
+export * from './Icon4gltedata';
 export * from './Icon4gsim';
 export * from './Icon4k';
+export * from './Icon5g';
+export * from './Icon5gdoubleplus';
+export * from './Icon5gplus';
 export * from './Icon8k';
+export * from './IconLte';
+export * from './IconVonr';
 export * from './IconAtoz';
 export * from './IconAbdominalpain';
 export * from './IconAccessibility';
@@ -19,6 +26,8 @@ export * from './IconAccessories';
 export * from './IconAccountclose';
 export * from './IconAccountinfo';
 export * from './IconAceofspades';
+export * from './IconAdblockplus';
+export * from './IconAdblocker';
 export * from './IconAdd';
 export * from './IconAddcircle';
 export * from './IconAdventure';
@@ -40,6 +49,11 @@ export * from './IconAlignverticalcenters';
 export * from './IconAlignmentfilling';
 export * from './IconAlignmenthorizontal';
 export * from './IconAlignmentvertical';
+export * from './IconAnalytics';
+export * from './IconAnalyticsdata';
+export * from './IconAnalyticspiechart';
+export * from './IconAnalyticspiecharttree';
+export * from './IconAnalyticspiecharttwo';
 export * from './IconAndroid';
 export * from './IconAnimation';
 export * from './IconAnime';
@@ -275,10 +289,16 @@ export * from './IconCommunicationskills';
 export * from './IconCompact';
 export * from './IconCompare';
 export * from './IconComparison';
+export * from './IconCompoundinterest';
 export * from './IconCompress';
 export * from './IconConfirm';
 export * from './IconConstipation';
 export * from './IconConsultant';
+export * from './IconConsumptionaccounted';
+export * from './IconConsumptionaverage';
+export * from './IconConsumptionhigh';
+export * from './IconConsumptionlow';
+export * from './IconConsumptionunaccounted';
 export * from './IconContactadd';
 export * from './IconContactshare';
 export * from './IconContactus';
@@ -311,6 +331,7 @@ export * from './IconCropplanningstyle1';
 export * from './IconCropplanningstyle2';
 export * from './IconCropplanningstyle3';
 export * from './IconCrowns';
+export * from './IconCsvdoc';
 export * from './IconCup';
 export * from './IconCut';
 export * from './IconCutout';
@@ -328,6 +349,7 @@ export * from './IconDataloan';
 export * from './IconDataout';
 export * from './IconDatapack';
 export * from './IconDatasaver';
+export * from './IconDatabase';
 export * from './IconDay';
 export * from './IconDaynight';
 export * from './IconDefault';
@@ -342,16 +364,33 @@ export * from './IconDevotion';
 export * from './IconDiamond';
 export * from './IconDiaolog';
 export * from './IconDice2';
+export * from './IconDigitalecosystem';
+export * from './IconDigitalselfservice';
 export * from './IconDining';
 export * from './IconDisinfectant';
 export * from './IconDislike';
 export * from './IconDistributehorizontalspacing';
 export * from './IconDistributeverticalspacing';
+export * from './IconDistribution';
 export * from './IconDizzy';
 export * from './IconDna';
 export * from './IconDock';
 export * from './IconDoctor';
+export * from './IconDocument';
+export * from './IconDocumentdoc';
+export * from './IconDocumentjpg';
+export * from './IconDocumentodt';
+export * from './IconDocumentpdf';
+export * from './IconDocumentpng';
+export * from './IconDocumentraw';
+export * from './IconDocumentrtf';
+export * from './IconDocumentsettings';
+export * from './IconDocumenttif';
+export * from './IconDocumenttxt';
+export * from './IconDocumentunknown';
 export * from './IconDocumentviewer';
+export * from './IconDocumentxls';
+export * from './IconDocumentxlsx';
 export * from './IconDocumentary';
 export * from './IconDocuments';
 export * from './IconDolbysound';
@@ -438,9 +477,13 @@ export * from './IconFemalemale';
 export * from './IconFertilized';
 export * from './IconFertilizer';
 export * from './IconFiberoff';
+export * from './IconFilerequest';
+export * from './IconFilesend';
+export * from './IconFileshare';
 export * from './IconFilter';
 export * from './IconFiltermultiple';
 export * from './IconFind';
+export * from './IconFindinpage';
 export * from './IconFingerprint';
 export * from './IconFinishline';
 export * from './IconFire';
@@ -465,10 +508,21 @@ export * from './IconFlower';
 export * from './IconFluorescent';
 export * from './IconFlurries';
 export * from './IconFog';
+export * from './IconFolder';
+export * from './IconFolderbookmarks';
+export * from './IconFolderfavorites';
+export * from './IconFolderlocked';
+export * from './IconFoldermovefiles';
+export * from './IconFolderpublic';
+export * from './IconFolderrated';
 export * from './IconFolderremove';
+export * from './IconFolderrequest';
 export * from './IconFooddrink';
 export * from './IconFootball';
 export * from './IconForkspoon';
+export * from './IconForm';
+export * from './IconFormadd';
+export * from './IconForms';
 export * from './IconForward';
 export * from './IconForward1';
 export * from './IconFps120';
@@ -502,6 +556,9 @@ export * from './IconGoforward';
 export * from './IconGoforward10';
 export * from './IconGoforward30';
 export * from './IconGooglelens';
+export * from './IconGraphincreasing';
+export * from './IconGraphlow';
+export * from './IconGraphtable';
 export * from './IconGrocery';
 export * from './IconGroup';
 export * from './IconGuard';
@@ -531,6 +588,7 @@ export * from './IconHeadset';
 export * from './IconHeadsetbluetooth';
 export * from './IconHealthconditions';
 export * from './IconHealthprotection';
+export * from './IconHealthreport';
 export * from './IconHealthy';
 export * from './IconHeartrate';
 export * from './IconHeavyrain';
@@ -560,6 +618,7 @@ export * from './IconHotday';
 export * from './IconHotspotlocator';
 export * from './IconHourglass';
 export * from './IconHtml5';
+export * from './IconHubmode';
 export * from './IconHumidity';
 export * from './IconHurricane';
 export * from './IconHydrant';
@@ -576,11 +635,13 @@ export * from './IconInfant';
 export * from './IconInfinity';
 export * from './IconInfo';
 export * from './IconInfotext';
+export * from './IconInfrastructure';
 export * from './IconInputsource';
 export * from './IconInsemination';
 export * from './IconInsurance';
 export * from './IconIntercomcallmobile';
 export * from './IconIntercomcalls';
+export * from './IconInterestlow';
 export * from './IconInterestpayout';
 export * from './IconInternet';
 export * from './IconInternethighspeed';
@@ -720,6 +781,7 @@ export * from './IconNamaste';
 export * from './IconNature';
 export * from './IconNatureoff';
 export * from './IconNetworkdetails';
+export * from './IconNetworkfuture';
 export * from './IconNeutralgender';
 export * from './IconNewchat';
 export * from './IconNewtabgroup';
@@ -774,6 +836,7 @@ export * from './IconOverlappinglayout';
 export * from './IconOverlay';
 export * from './IconOxygen';
 export * from './IconPageflip';
+export * from './IconPagesettings';
 export * from './IconPaintroller';
 export * from './IconPanorma';
 export * from './IconPartialoxygenpressure';
@@ -834,7 +897,10 @@ export * from './IconPlaylistsuccessful';
 export * from './IconPopcorn';
 export * from './IconPortrait';
 export * from './IconPowerplay';
+export * from './IconPptxdoc';
+export * from './IconPreferrednumber';
 export * from './IconPregnancytest';
+export * from './IconPremiumnumber';
 export * from './IconPrescription';
 export * from './IconPresentations';
 export * from './IconPrevioustitle';
@@ -843,6 +909,7 @@ export * from './IconPrint';
 export * from './IconPro';
 export * from './IconProfilefemale';
 export * from './IconProfilemale';
+export * from './IconProjection';
 export * from './IconProtection';
 export * from './IconProtectionlocked';
 export * from './IconProtectionthreats';
@@ -886,6 +953,7 @@ export * from './IconReplay';
 export * from './IconReply';
 export * from './IconReplyall';
 export * from './IconReplycircle';
+export * from './IconRequest';
 export * from './IconResearch';
 export * from './IconReset';
 export * from './IconResetpassword';
@@ -910,6 +978,7 @@ export * from './IconRomance';
 export * from './IconRotate90';
 export * from './IconRotatephone';
 export * from './IconRoulette';
+export * from './IconRoutestraffic';
 export * from './IconRuler';
 export * from './IconRunning';
 export * from './IconRupee';
@@ -1084,6 +1153,7 @@ export * from './IconTask';
 export * from './IconTeach';
 export * from './IconTeam';
 export * from './IconTeammembers';
+export * from './IconTechnology';
 export * from './IconTeddy';
 export * from './IconTeddylove';
 export * from './IconTemperature';
@@ -1177,6 +1247,8 @@ export * from './IconVisible';
 export * from './IconVisibleoff';
 export * from './IconVitaminb';
 export * from './IconVitamind';
+export * from './IconVolte';
+export * from './IconVowifi';
 export * from './IconVoice';
 export * from './IconVoicerecording';
 export * from './IconVoicebox';
@@ -1185,6 +1257,7 @@ export * from './IconVoucher4g';
 export * from './IconVouchercashback';
 export * from './IconVoucherplan';
 export * from './IconVpn';
+export * from './IconVpndata';
 export * from './IconWalkingaids';
 export * from './IconWallet';
 export * from './IconWalletsleeve';

package/lib/typescript/src/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-06-22T15:37:25.988Z
+ * Generated: 2026-06-26T16:43:17.033Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/lib/typescript/src/utils/index.d.ts

@@ -2,4 +2,6 @@ export { cloneChildrenWithModes, flattenChildren } from './react-utils';
 export { default as MediaSource } from './MediaSource';
 export type { UnifiedSource, MediaSourceProps } from './MediaSource';
 export { formatIndianNumber } from './number-utils';
+export { boxShadow, supportsNativeBoxShadow, parseBoxShadow, parseSingleShadow } from './shadow';
+export type { BoxShadowOptions, ParsedShadow } from './shadow';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/utils/react-utils.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
 import type { Modes } from '../design-tokens';
 /**
  * A shared, frozen empty modes object.
@@ -67,6 +67,45 @@ export declare function resolveTruncation(disableTruncation: boolean | undefined
     numberOfLines?: number;
     ellipsizeMode?: EllipsizeMode;
 };
+export type TextLayoutResult = {
+    numberOfLines?: number | undefined;
+    ellipsizeMode?: EllipsizeMode | undefined;
+    /**
+     * Style fragment that MUST be merged onto the target `<Text>` (after the
+     * component's own style and any consumer `style` override) so the escape
+     * hatches can win. `undefined` when neither flag is set.
+     */
+    style?: TextStyle | undefined;
+};
+/**
+ * Resolves the `<Text>` props + style for the two truncation escape hatches.
+ * This supersedes {@link resolveTruncation} for components that want the
+ * "brutal" overflow behaviour rather than just dropping the line clamp.
+ *
+ * - `disableTruncation`: never truncate. Drops `numberOfLines`/`ellipsizeMode`
+ *   AND sets `flexShrink: 0`, so a tight flex parent can no longer squeeze the
+ *   text into an ellipsis — instead the text keeps its intrinsic size and
+ *   overflows, even if that means blowing past (and visually breaking) the
+ *   parent layout. The text still wraps onto multiple lines.
+ * - `singleLine`: force everything onto one line with no wrapping. Implies
+ *   `disableTruncation` (the ellipsis is never shown). On web this adds
+ *   `whiteSpace: 'nowrap'` so the single line overflows horizontally instead of
+ *   wrapping. The text is never shrunk.
+ *
+ * Note (native): React Native's `<Text>` has no `white-space: nowrap`
+ * equivalent, so on iOS/Android `singleLine` cannot force a hard non-wrapping
+ * overflow — it behaves like `disableTruncation` (no ellipsis, no shrink). The
+ * hard single-line overflow is honoured on web (Storybook / react-native-web).
+ *
+ * When neither flag is set, the supplied `numberOfLines`/`ellipsizeMode` pass
+ * through unchanged and no extra style is returned.
+ */
+export declare function resolveTextLayout({ disableTruncation, singleLine, numberOfLines, ellipsizeMode, }: {
+    disableTruncation?: boolean | undefined;
+    singleLine?: boolean | undefined;
+    numberOfLines?: number | undefined;
+    ellipsizeMode?: EllipsizeMode | undefined;
+}): TextLayoutResult;
 /**
  * Flattens React children, extracting them from Fragments.
  * Useful for Group components that need to process individual items (e.g., for layout or styling)

package/lib/typescript/src/utils/shadow.d.ts

@@ -0,0 +1,72 @@
+import type { ViewStyle } from 'react-native';
+/**
+ * Cross-platform drop-shadow helper with a backward-compatibility layer.
+ *
+ * Why this exists
+ * ----------------
+ * The spec-compliant `boxShadow` style prop only landed in React Native 0.76
+ * (and only on the New Architecture / Fabric). Older apps that consume this
+ * library are still on pre-0.76 React Native where `boxShadow` is silently
+ * ignored on native, so their shadows simply disappear.
+ *
+ * Rather than hand-rolling a `Platform.select` block in every component, route
+ * ALL drop shadows through this single helper. When `boxShadow` is natively
+ * supported it is used verbatim (web + RN 0.76+ Fabric). When it is NOT
+ * supported, the CSS-style shadow string is parsed and translated into the
+ * legacy native shadow API:
+ *   - iOS:     `shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`
+ *   - Android: `elevation`
+ *
+ * @example
+ * ```tsx
+ * const style = boxShadow('0px 2px 4px 0px rgba(0,0,0,0.18)')
+ * <View style={[base, style]} />
+ * ```
+ */
+export interface ParsedShadow {
+    offsetX: number;
+    offsetY: number;
+    blur: number;
+    spread: number;
+    color: string;
+    inset: boolean;
+}
+export interface BoxShadowOptions {
+    /**
+     * Explicit Android `elevation` for the legacy fallback. When omitted it is
+     * derived from the most prominent shadow's blur radius. Android elevation
+     * cannot reproduce colored/ring shadows, so provide this when the default
+     * heuristic doesn't match the design.
+     */
+    elevation?: number;
+}
+/**
+ * Whether the spec-compliant `boxShadow` style prop is honored at runtime.
+ * - Web (react-native-web) always supports it.
+ * - Native supports it from RN 0.76+ AND only on the New Architecture (Fabric).
+ */
+export declare function supportsNativeBoxShadow(): boolean;
+/**
+ * Parses a single CSS box-shadow layer into its primitive parts.
+ * Supports: `[inset] offsetX offsetY [blur] [spread] color` in any sensible
+ * ordering of the keyword/color, with `rgb()/rgba()/hsl()/hsla()`, hex, or
+ * named colors.
+ */
+export declare function parseSingleShadow(input: string): ParsedShadow;
+/**
+ * Parses a full box-shadow string (one or more comma-separated layers).
+ */
+export declare function parseBoxShadow(value: string): ParsedShadow[];
+/**
+ * Returns a style object that renders the given CSS-style box-shadow on every
+ * platform. Uses the native `boxShadow` prop when supported, otherwise falls
+ * back to the legacy `shadow*` (iOS) / `elevation` (Android) API.
+ *
+ * @param value   A CSS box-shadow string, e.g. `'0px 2px 4px 0px rgba(0,0,0,0.2)'`.
+ *                Multiple comma-separated layers are supported; on the legacy
+ *                fallback iOS uses the most prominent layer and Android uses a
+ *                single elevation.
+ * @param options Optional overrides (e.g. explicit Android `elevation`).
+ */
+export declare function boxShadow(value: string, options?: BoxShadowOptions): ViewStyle;
+//# sourceMappingURL=shadow.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.1.12",
+  "version": "0.1.17",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -40,6 +40,7 @@
     "deploy:storybook": "vercel --prod",
     "postinstall": "patch-package",
     "icons:generate": "node scripts/generate-icon-registry.js",
+    "audit:tokens": "node scripts/audit-tokens.js",
     "prepare": "bob build",
     "build": "bob build",
     "prepack": "yarn icons:generate && bob build",

package/src/components/ActionFooter/ActionFooter.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils'
+import { boxShadow } from '../../utils/shadow'
 import IconButton from '../IconButton/IconButton'
 import type { Modes } from '../../design-tokens'
 
@@ -37,8 +38,6 @@ export type ActionFooterProps = {
   accessibilityLabel?: string
 }
 
-const IS_WEB = Platform.OS === 'web'
-
 // ---------------------------------------------------------------------------
 // Yoga-safe stretch
 // ---------------------------------------------------------------------------
@@ -67,28 +66,12 @@ const STRETCH_STYLE: ViewStyle = {
   minWidth: 0,
 }
 
-// Platform-specific drop shadow. Web boxShadow can't go through
-// Platform.select (RN's typed surface doesn't include it) so we keep it as a
-// separate constant and append it below.
-const NATIVE_SHADOW = Platform.select<ViewStyle>({
-  ios: {
-    shadowColor: '#0c0d10',
-    shadowOffset: { width: 0, height: -12 },
-    shadowOpacity: 0.16,
-    shadowRadius: 24,
-  },
-  android: {
-    elevation: 16,
-  },
-  default: {},
-}) as ViewStyle
-
-const WEB_SHADOW = IS_WEB
-  ? ({
-      boxShadow:
-        '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)',
-    } as ViewStyle)
-  : null
+// Upward drop shadow routed through the unified helper: native `boxShadow` on
+// web + RN 0.76+, legacy `shadow*` (iOS) / `elevation` (Android) on older RN.
+const SHADOW = boxShadow(
+  '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)',
+  { elevation: 16 },
+)
 
 // The runtime token a slot child must equal (by reference) to be treated as
 // an IconButton. `IconButton` is exported wrapped in `React.memo`, so the
@@ -200,7 +183,7 @@ function ActionFooter({
       paddingRight: paddingHorizontal,
       paddingTop,
       paddingBottom,
-      ...NATIVE_SHADOW,
+      ...SHADOW,
     }
 
     const slot: ViewStyle = {
@@ -240,7 +223,6 @@ function ActionFooter({
     <Animated.View
       style={[
         containerStyle,
-        WEB_SHADOW,
         style,
         // Counter-translate by the keyboard height on Android so `adjustResize`
         // can't lift the footer above the keyboard (no-op on iOS/web where the

package/src/components/ActionTile/ActionTile.tsx

@@ -40,18 +40,18 @@ export default function ActionTile({
     const modes = { ...globalModes, ...propModes }
 
     // Resolve tokens
-    const backgroundColor = getVariableByName('actionTile/background', modes) || '#ffffff'
-    const gap = Number(getVariableByName('actionTile/gap', modes)) || 8
-    const paddingHorizontal = Number(getVariableByName('actionTile/padding/horizontal', modes)) || 12
-    const paddingVertical = Number(getVariableByName('actionTile/padding/vertical', modes)) || 16
-    const radius = Number(getVariableByName('actionTile/radius', modes)) || 16
+    const backgroundColor = getVariableByName('actionTile/background', modes)
+    const gap = Number(getVariableByName('actionTile/gap', modes))
+    const paddingHorizontal = Number(getVariableByName('actionTile/padding/horizontal', modes))
+    const paddingVertical = Number(getVariableByName('actionTile/padding/vertical', modes))
+    const radius = Number(getVariableByName('actionTile/radius', modes))
 
     // Text tokens
-    const textColor = getVariableByName('actionTile/foreground', modes) || '#0d0d0f'
-    const fontSize = Number(getVariableByName('actionTile/fontSize', modes)) || 14
-    const fontFamily = getVariableByName('actionTile/fontFamily', modes) || 'JioType Var'
-    const fontWeightStr = getVariableByName('actionTile/fontWeight', modes) || '500'
-    const lineHeight = Number(getVariableByName('actionTile/lineHeight', modes)) || 17
+    const textColor = getVariableByName('actionTile/foreground', modes)
+    const fontSize = Number(getVariableByName('actionTile/fontSize', modes))
+    const fontFamily = getVariableByName('actionTile/fontFamily', modes)
+    const fontWeightStr = getVariableByName('actionTile/fontWeight', modes)
+    const lineHeight = Number(getVariableByName('actionTile/lineHeight', modes))
 
     const containerStyle: ViewStyle = {
         backgroundColor,

package/src/components/AmountInput/AmountInput.tsx

@@ -37,9 +37,9 @@ const AmountInput = forwardRef<View, AmountInputProps>(function AmountInput({
     const modes = { ...globalModes, ...propModes }
 
     // Resolve tokens
-    const gap = Number(getVariableByName('amountInput/gap', modes)) || 16
-    const paddingHorizontal = Number(getVariableByName('amountInput/padding/horizontal', modes)) || 0
-    const paddingVertical = Number(getVariableByName('amountInput/padding/vertical', modes)) || 0
+    const gap = Number(getVariableByName('amountInput/gap', modes))
+    const paddingHorizontal = Number(getVariableByName('amountInput/padding/horizontal', modes))
+    const paddingVertical = Number(getVariableByName('amountInput/padding/vertical', modes))
 
     const containerStyle: ViewStyle = {
         flexDirection: 'column',

package/src/components/AreaLineChart/AreaLineChart.tsx

@@ -1035,7 +1035,7 @@ function ChartTooltip({
     const bg = (getVariableByName('tooltip/background', modes) as string | null) ?? '#0f0d0a'
     const paddingH = toNumber(getVariableByName('tooltip/padding/horizontal', modes), 12)
     const paddingV = toNumber(getVariableByName('tooltip/padding/vertical', modes), 8)
-    const radius = toNumber(getVariableByName('radius', modes), 8)
+    const radius = 8
     const labelColor = (getVariableByName('tooltip/label/color', modes) as string | null) ?? '#ffffff'
 
     if (items.length === 0) return null
@@ -1111,7 +1111,7 @@ function ChartLegend() {
 /** Resolve `axisItem/*` typography tokens into a memoized text style. */
 function useAxisTypography(modes: Modes) {
     return useMemo(() => {
-        const color = (getVariableByName('axisItem/color', modes) as string | null) ?? '#000000'
+        const color = (getVariableByName('axisItem/fg', modes) as string | null) ?? '#000000'
         const fontFamily =
             (getVariableByName('axisItem/fontFamily', modes) as string | null) ?? 'JioType Var'
         const fontSize = toNumber(getVariableByName('axisItem/fontSize', modes), 12)

package/src/components/Attached/Attached.tsx

@@ -189,7 +189,7 @@ function Attached({
   // anchor centering intact).
   const slotBorderStyle = useMemo<ViewStyle | null>(() => {
     const borderColor = getVariableByName('attached/slot/border', modes)
-    const borderWidth = parseFloat(getVariableByName('attached/slot/borderWidth', modes) || '0')
+    const borderWidth = parseFloat(getVariableByName('attached/slot/borderWidth', modes))
     if (!borderColor || !(borderWidth > 0)) return null
 
     // Match the inner clip radius so the ring stays concentric. The outer edge

package/src/components/Avatar/Avatar.tsx

@@ -65,18 +65,18 @@ interface AvatarTokens {
 }
 
 function resolveAvatarTokens(modes: Modes, isMonogram: boolean): AvatarTokens {
-  const size = (getVariableByName('avatar/size', modes) || 29) as number
-  const radiusRaw = (getVariableByName('avatar/radius', modes) || 9999) as number
-  const backgroundColor = getVariableByName('avatar/background', modes) || '#dbcfff'
-  const borderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)'
-  const borderSize = (getVariableByName('avatar/border/size', modes) || 1) as number
-  const labelColor = getVariableByName('avatar/label/color', modes) || '#5c00b5'
-  const labelFontSize = (getVariableByName('avatar/label/fontSize', modes) || 12) as number
-  const labelLineHeight = (getVariableByName('avatar/label/lineHeight', modes) || 14) as number
-  const labelFontWeightRaw = getVariableByName('avatar/label/fontWeight', modes) || 500
+  const size = (getVariableByName('avatar/size', modes)) as number
+  const radiusRaw = (getVariableByName('avatar/radius', modes)) as number
+  const backgroundColor = getVariableByName('avatar/background', modes)
+  const borderColor = getVariableByName('avatar/border/color', modes)
+  const borderSize = (getVariableByName('avatar/border/size', modes)) as number
+  const labelColor = getVariableByName('avatar/label/color', modes)
+  const labelFontSize = (getVariableByName('avatar/label/fontSize', modes)) as number
+  const labelLineHeight = (getVariableByName('avatar/label/lineHeight', modes)) as number
+  const labelFontWeightRaw = getVariableByName('avatar/label/fontWeight', modes)
   const labelFontWeight =
     typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw
-  const labelFontFamily = (getVariableByName('avatar/label/fontFamily', modes) || 'Inter') as string
+  const labelFontFamily = (getVariableByName('avatar/label/fontFamily', modes)) as string
 
   // 9999 is the design-token sentinel for "perfect circle"
   const borderRadius = radiusRaw === 9999 ? size / 2 : radiusRaw

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -13,18 +13,18 @@ type AvatarGroupProps = {
 } & React.ComponentProps<typeof View>;
 
 function AvatarGroup({ modes = EMPTY_MODES, children, style, ...rest }: AvatarGroupProps) {
-    const gap = getVariableByName('avatarGroup/gap', modes) || 0;
+    const gap = getVariableByName('avatarGroup/gap', modes);
 
 
-    const avatarSize = getVariableByName('avatar/size', modes) || 29;
-    const avatarRadius = getVariableByName('avatar/radius', modes) || 9999;
-    const borderSize = getVariableByName('avatar/border/size', modes) || 1;
-    const borderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)';
+    const avatarSize = getVariableByName('avatar/size', modes);
+    const avatarRadius = getVariableByName('avatar/radius', modes);
+    const borderSize = getVariableByName('avatar/border/size', modes);
+    const borderColor = getVariableByName('avatar/border/color', modes);
 
-    const paddingLeft = getVariableByName('avatarGroup/padding/left', modes) || 0;
-    const paddingRight = getVariableByName('avatarGroup/padding/right', modes) || 0;
-    const paddingTop = getVariableByName('avatarGroup/padding/top', modes) || 0;
-    const paddingBottom = getVariableByName('avatarGroup/padding/bottom', modes) || 0;
+    const paddingLeft = getVariableByName('avatarGroup/padding/left', modes);
+    const paddingRight = getVariableByName('avatarGroup/padding/right', modes);
+    const paddingTop = getVariableByName('avatarGroup/padding/top', modes);
+    const paddingBottom = getVariableByName('avatarGroup/padding/bottom', modes);
 
     const validChildren = flattenChildren(children);
     const totalChildren = validChildren.length;