jfs-components 0.0.71 → 0.0.73

package/CHANGELOG.md

@@ -4,6 +4,66 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.0.73] - 2026-05-15
+
+- Added new coverage and tracking components: `CoverageRing`, `CoverageBarComparison`, and `MonthlyStatusGrid` (with exported `CalendarGlyph`).
+- Enhanced `CircularProgressBar` with an in-ring `supportText` caption (driven by `circularProgressBar/supportText/*` tokens) and a centered text stack.
+- Refreshed `LinearProgress` and `SavingsGoalSummary` token surface: split `Appearance / DataViz` into `Appearance Type` + `AppearanceBrand` + `AppearanceSystem`, and renamed `Emphasis / DataViz` to `Emphasis`.
+- Expanded `SupportText`, `SupportTextIcon`, and `InputSearch` with an `Auto` status mode and a new `FormField States` collection (Idle / Active / Read Only / Error).
+- Added `Error` state and `Color Mode` support to `FormField`, and a new `Page type` (MainPage / SubPage) collection on `Title`.
+- Refreshed component token metadata and updated Storybook/MDX coverage for all changed components.
+
+---
+
+## [0.0.72] - 2026-05-04
+
+High-level summary (one line per point):
+
+- **`RadioButton` renamed to `Radio`** — naming aligned with the rest of the library; the old `RadioButton` import is preserved as a deprecated alias so consumer code keeps working without changes.
+- **`Carousel` pagination is now fully token-driven** — dot size, active width, and active/inactive colors come from design tokens (`carousel/pagination/indicator/{size,activeWidth,activeColor,inactiveColor}`) instead of hardcoded values, with token names normalized to camelCase.
+- **`Carousel` outer container height is now controlled by a token** — new `carousel/maxHeight` token enforces the Figma-aligned max height of the carousel viewport.
+- **`HoldingsCard` migrated to `Radio`** — internal-only swap, no API change for consumers.
+
+### Changed
+
+- `Carousel.Pagination` now reads `carousel/pagination/indicator/size`, `carousel/pagination/indicator/activeWidth`, `carousel/pagination/indicator/activeColor`, and `carousel/pagination/indicator/inactiveColor` from design tokens. Previous lowercase names (`activecolor`, `inactivecolor`) and hardcoded dot dimensions (6×6 / 16×6) are replaced.
+- `Carousel` outer container respects a new `carousel/maxHeight` token (defaults to `280`) applied as `maxHeight` on the outer view.
+- `HoldingsCard` now imports the new `Radio` component instead of `RadioButton` (no behavioral change).
+
+### Added
+
+- New `Radio` component (`src/components/Radio/Radio.tsx`) with its own stories and MDX docs. Exported from the package barrel as `Radio` / `RadioProps`.
+
+### Deprecated
+
+- `RadioButton` is deprecated. It is kept as a thin re-export of `Radio` for backward compatibility and will be removed in a future major release. Migrate to `import { Radio } from 'jfs-components'`.
+
+---
+
+## [0.0.71] - 2026-05-04
+
+### Added
+
+- **`CardAdvisory`** — new card component with stories and MDX docs.
+- **`CardFinancialCondition`** — new card component with stories and MDX docs.
+- **`CircularProgressBar`** — new circular progress component with stories and MDX docs.
+- **`CircularProgressBarDoted`** — new dotted variant of the circular progress component with stories and MDX docs.
+- **`CircularRating`** — new circular rating display component with stories and MDX docs.
+- **`Gauge`** — new gauge component with stories and MDX docs.
+- **`InstitutionBadge`** — new institution badge component with stories and MDX docs.
+- All new components are exported from the package barrel with their public types.
+
+### Changed
+
+- **`Nudge`** — significant rewrite (props, layout, and token usage refreshed); story file simplified.
+- **`CardCTA`** — expanded API and visual variants; story coverage extended.
+- **`MediaCard`** — minor doc/story refresh; no breaking changes.
+- **`ListGroup`** — small adjustments to internal layout; no API change.
+- Refreshed component token metadata and the icon registry; updated `Coin Variables` design-token JSON.
+- Storybook plumbing: added `.storybook/storybook-test-mock.js` and registered it in `.storybook/main.js` to stabilize Storybook test runs.
+
+---
+
 ## [0.0.70] - 2026-04-23
 
 ### Fixed

package/lib/commonjs/components/AccordionCheckbox/AccordionCheckbox.js

@@ -0,0 +1,239 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _Checkbox = _interopRequireDefault(require("../Checkbox/Checkbox"));
+var _Divider = _interopRequireDefault(require("../Divider/Divider"));
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+if (_reactNative.Platform.OS === 'android' && _reactNative.UIManager.setLayoutAnimationEnabledExperimental) {
+  _reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+/**
+ * AccordionCheckbox composes a header (with a `Checkbox`, title, subtitle and
+ * chevron) and a collapsible content slot. It mirrors the Figma
+ * "Accordion Checkbox" component.
+ *
+ * Two independent interactions live inside the header:
+ *  - **Pressing the checkbox** toggles the parent checked state via
+ *    `onCheckedChange` (typically used for "select all" behaviour).
+ *  - **Pressing anywhere else on the header** toggles the expanded state via
+ *    `onExpandedChange`.
+ *
+ * When expanded, a divider is shown and `children` are rendered with `modes`
+ * automatically forwarded through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @param {AccordionCheckboxProps} props
+ *
+ * @example
+ * ```tsx
+ * <AccordionCheckbox
+ *   title="Axis Bank"
+ *   subtitle="3 accounts"
+ *   defaultExpanded
+ *   defaultChecked
+ *   modes={{ 'Color Mode': 'Light' }}
+ * >
+ *   <CheckboxGroup>
+ *     <CheckboxItem label="Fixed deposit • 0245" />
+ *     <CheckboxItem label="Recurring deposit • 1182" />
+ *     <CheckboxItem label="Mutual fund • Equity" />
+ *   </CheckboxGroup>
+ * </AccordionCheckbox>
+ * ```
+ */
+function AccordionCheckbox({
+  title = 'Axis Bank',
+  subtitle = '3 accounts',
+  defaultExpanded = false,
+  expanded: controlledExpanded,
+  onExpandedChange,
+  defaultChecked = false,
+  checked: controlledChecked,
+  onCheckedChange,
+  disabled = false,
+  children,
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const isExpandedControlled = controlledExpanded !== undefined;
+  const [internalExpanded, setInternalExpanded] = (0, _react.useState)(defaultExpanded);
+  const isExpanded = isExpandedControlled ? controlledExpanded : internalExpanded;
+  const isCheckedControlled = controlledChecked !== undefined;
+  const [internalChecked, setInternalChecked] = (0, _react.useState)(defaultChecked);
+  const isChecked = isCheckedControlled ? controlledChecked : internalChecked;
+  const handleToggleExpanded = (0, _react.useCallback)(() => {
+    if (disabled) return;
+    _reactNative.LayoutAnimation.configureNext(_reactNative.LayoutAnimation.Presets.easeInEaseOut);
+    const next = !isExpanded;
+    if (!isExpandedControlled) {
+      setInternalExpanded(next);
+    }
+    onExpandedChange?.(next);
+  }, [disabled, isExpanded, isExpandedControlled, onExpandedChange]);
+  const handleToggleChecked = (0, _react.useCallback)(next => {
+    if (disabled) return;
+    if (!isCheckedControlled) {
+      setInternalChecked(next);
+    }
+    onCheckedChange?.(next);
+  }, [disabled, isCheckedControlled, onCheckedChange]);
+  const background = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/background', modes) ?? '#ffffff';
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/radius', modes) ?? 12;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/padding/horizontal', modes) ?? 12;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/padding/vertical', modes) ?? 16;
+  const containerGap = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/gap', modes) ?? 12;
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/border/color', modes) ?? '#ebebed';
+  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/border/size', modes) ?? 1;
+  const headerGap = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/header/gap', modes) ?? 12;
+  const headerPaddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/header/padding/horizontal', modes) ?? 0;
+  const headerPaddingVertical = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/header/padding/vertical', modes) ?? 0;
+  const headerWrapGap = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/header/wrap/gap', modes) ?? 12;
+  const textWrapGap = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/textWrap/gap', modes) ?? 2;
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/title/color', modes) ?? '#000000';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/title/fontSize', modes) ?? 14;
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/title/fontFamily', modes) ?? 'JioType Var';
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/title/lineHeight', modes) ?? 18;
+  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/title/fontWeight', modes) ?? 600;
+  const titleFontWeight = String(titleFontWeightRaw);
+  const subtitleColor = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/subtitle/color', modes) ?? '#23190a';
+  const subtitleFontSize = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/subtitle/fontSize', modes) ?? 12;
+  const subtitleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/subtitle/fontFamily', modes) ?? 'JioType Var';
+  const subtitleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/subtitle/lineHeight', modes) ?? 16;
+  const subtitleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/subtitle/fontWeight', modes) ?? 500;
+  const subtitleFontWeight = String(subtitleFontWeightRaw);
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/icon/color', modes) ?? '#000000';
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/icon/size', modes) ?? 24;
+  const contentGap = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/content/gap', modes) ?? 0;
+  const contentPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/content/padding/top', modes) ?? 8;
+  const contentPaddingBottom = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/content/padding/bottom', modes) ?? 0;
+  const contentPaddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/content/padding/horizontal', modes) ?? 0;
+  const containerStyle = {
+    backgroundColor: background,
+    borderRadius: radius,
+    paddingHorizontal,
+    paddingVertical,
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    gap: containerGap,
+    overflow: 'hidden',
+    ...(isExpanded ? {
+      borderWidth: borderSize,
+      borderColor
+    } : null),
+    ...(disabled ? {
+      opacity: 0.6
+    } : null)
+  };
+  const headerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: headerGap,
+    paddingHorizontal: headerPaddingHorizontal,
+    paddingVertical: headerPaddingVertical
+  };
+  const wrapStyle = {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: headerWrapGap
+  };
+  const textWrapStyle = {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: textWrapGap
+  };
+  const titleStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    lineHeight: titleLineHeight,
+    fontFamily: titleFontFamily,
+    fontWeight: titleFontWeight
+  };
+  const subtitleStyle = {
+    color: subtitleColor,
+    fontSize: subtitleFontSize,
+    lineHeight: subtitleLineHeight,
+    fontFamily: subtitleFontFamily,
+    fontWeight: subtitleFontWeight
+  };
+  const contentStyle = {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    justifyContent: 'center',
+    gap: contentGap,
+    paddingTop: contentPaddingTop,
+    paddingBottom: contentPaddingBottom,
+    paddingHorizontal: contentPaddingHorizontal
+  };
+  const a11yLabel = accessibilityLabel ?? title;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+      onPress: handleToggleExpanded,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityState: {
+        expanded: isExpanded,
+        disabled
+      },
+      accessibilityLabel: a11yLabel,
+      accessibilityHint: isExpanded ? 'Collapse' : 'Expand',
+      style: ({
+        pressed
+      }) => [headerStyle, pressed && !disabled ? {
+        opacity: 0.9
+      } : null],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: wrapStyle,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+          checked: isChecked,
+          onValueChange: handleToggleChecked,
+          disabled: disabled,
+          modes: modes,
+          accessibilityLabel: typeof title === 'string' ? `Select ${title}` : undefined
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: textWrapStyle,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: titleStyle,
+            numberOfLines: 1,
+            selectable: false,
+            children: title
+          }), subtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: subtitleStyle,
+            numberOfLines: 1,
+            selectable: false,
+            children: subtitle
+          }) : null]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: isExpanded ? 'ic_chevron_up' : 'ic_chevron_down',
+        size: iconSize,
+        color: iconColor,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      })]
+    }), isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+        modes: modes
+      }), children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: contentStyle,
+        children: (0, _reactUtils.cloneChildrenWithModes)(children, modes)
+      }) : null]
+    }) : null]
+  });
+}
+var _default = exports.default = AccordionCheckbox;

package/lib/commonjs/components/BrandChip/BrandChip.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'string') return value;
+  return fallback;
+};
+function resolveBrandChipTokens(modes) {
+  const background = (0, _figmaVariablesResolver.getVariableByName)('brandChip/background', modes) ?? '#ffffff';
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('brandChip/foreground', modes) ?? '#0d0d0f';
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('brandChip/border/color', modes) ?? '#e0e0e3';
+  const borderSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('brandChip/border/size', modes), 1);
+  const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('brandChip/gap', modes), 8);
+  const paddingLeft = toNumber((0, _figmaVariablesResolver.getVariableByName)('brandChip/padding/left', modes), 8);
+  const paddingRight = toNumber((0, _figmaVariablesResolver.getVariableByName)('brandChip/padding/right', modes), 12);
+  const paddingVertical = toNumber((0, _figmaVariablesResolver.getVariableByName)('brandChip/padding/vertical', modes), 5);
+  // The Figma token uses 25000 as a sentinel for "always pill-shaped".
+  // Cap it to a value React Native renders predictably.
+  const radiusRaw = toNumber((0, _figmaVariablesResolver.getVariableByName)('brandChip/radius', modes), 9999);
+  const radius = radiusRaw >= 9999 ? 9999 : radiusRaw;
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('brandChip/label/fontFamily', modes) ?? 'JioType Var';
+  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('brandChip/label/fontSize', modes), 16);
+  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('brandChip/label/lineHeight', modes), 21);
+  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('brandChip/label/fontWeight', modes), '500');
+  return {
+    containerStyle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      alignSelf: 'flex-start',
+      backgroundColor: background,
+      borderColor,
+      borderWidth: borderSize,
+      borderStyle: 'solid',
+      borderRadius: radius,
+      paddingLeft,
+      paddingRight,
+      paddingTop: paddingVertical,
+      paddingBottom: paddingVertical,
+      gap
+    },
+    labelStyle: {
+      color: foreground,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight
+    }
+  };
+}
+
+// The Figma reference renders the avatar at 29px which is the `S` size in
+// the Avatar Size collection. Callers can override via `modes`.
+const DEFAULT_AVATAR_SIZE_MODE = 'S';
+
+/**
+ * `BrandChip` renders a compact pill that pairs a small institution avatar
+ * with a short identifier label (e.g. `"Axis Bank • 0245"`). It's typically
+ * used to surface the currently-selected linked account in headers, sticky
+ * bars, or selectors.
+ *
+ * All visual values resolve through the `brandChip/*` design tokens with
+ * sensible Figma defaults so the chip renders correctly out of the box.
+ *
+ * @component
+ * @param {BrandChipProps} props
+ */
+function BrandChip({
+  label = 'Axis Bank • 0245',
+  imageSource,
+  avatarSlot,
+  onPress,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const avatarModes = (0, _react.useMemo)(() => ({
+    'Avatar Size': DEFAULT_AVATAR_SIZE_MODE,
+    ...modes
+  }), [modes]);
+  const tokens = (0, _react.useMemo)(() => resolveBrandChipTokens(modes), [modes]);
+  const processedAvatarSlot = (0, _react.useMemo)(() => {
+    if (!avatarSlot) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(avatarSlot, avatarModes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [avatarSlot, avatarModes]);
+  const avatarNode = processedAvatarSlot ?? (imageSource !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+    style: "Image",
+    imageSource: imageSource,
+    modes: avatarModes
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+    style: "Image",
+    modes: avatarModes
+  }));
+  const a11yLabel = accessibilityLabel ?? label;
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [avatarNode, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [tokens.labelStyle, labelStyle],
+      numberOfLines: 1,
+      ellipsizeMode: "tail",
+      children: label
+    })]
+  });
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: a11yLabel,
+      onPress: onPress,
+      style: [tokens.containerStyle, style],
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    accessibilityLabel: a11yLabel,
+    style: [tokens.containerStyle, style],
+    children: content
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(BrandChip);

package/lib/commonjs/components/CardAdvisory/CardAdvisory.js

@@ -37,8 +37,8 @@ const toFontWeight = (value, fallback) => {
 function resolveCardAdvisoryTokens(modes) {
   const width = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/width', modes), 360);
   const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/gap', modes), 16);
-  const paddingHorizontal = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/padding/horizontal', modes), 16);
-  const paddingVertical = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/padding/vertical', modes), 12);
+  const paddingHorizontal = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/padding/horizontal', modes), 0);
+  const paddingVertical = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/padding/vertical', modes), 0);
   const radius = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/radius', modes), 0);
   const background = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/background', modes) || '#ffffff';
   const mainContentGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/mainContent/gap', modes), 16);