jfs-components 0.0.1

package/lib/commonjs/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_webPlatformUtils","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Button","label","children","renderContent","leading","trailing","modes","onPress","disabled","style","labelStyle","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","backgroundColor","getVariableByName","borderColor","borderWidth","radius","paddingHorizontal","paddingVertical","gap","fontFamily","fontWeightValue","fontWeight","toString","lineHeight","fontSize","textColor","baseLabelTextStyle","color","mergedLabelTextStyle","content","undefined","jsx","Text","numberOfLines","containerBaseStyle","flexDirection","alignItems","justifyContent","borderRadius","opacity","accessoryOffset","leadingAccessoryStyle","useMemo","marginRight","trailingAccessoryStyle","marginLeft","defaultAccessibilityLabel","webProps","usePressableWebSupport","restProps","isFocused","setIsFocused","useState","isHovered","setIsHovered","pressedStyle","transform","scale","focusStyle","hoverStyle","__DEV__","console","warn","jsxs","Pressable","accessibilityRole","onPressIn","onPressOut","onFocus","onBlur","onHoverIn","onHoverOut","pressed","View","_default","exports"],"sourceRoot":"../../../../src","sources":["components/Button/Button.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Button/Button.mdx

@@ -0,0 +1,105 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as ButtonStories from './Button.stories';
+import Button from './Button';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+Button component that maps directly to the Figma design using design tokens.
+
+## Available Collections and Modes
+
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
+
+### Semantic Intent
+- **Modes:** Brand | System
+- **Default:** Brand
+
+### Emphasis
+- **Modes:** High | Medium | Low
+- **Default:** High
+
+### Appearance.Brand
+- **Modes:** Primary | Secondary | Neutral
+- **Default:** Primary
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Appearance.System
+- **Modes:** positive | warning | negative
+- **Default:** positive
+
+### Context
+- **Modes:** Default | Nudge&Alert
+- **Default:** Default
+
+### Button / Size
+- **Modes:** M | S
+- **Default:** M
+## Usage
+
+<Canvas>
+  <Story of={ButtonStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Provide `accessibilityLabel` when the visual label is an icon or custom child; otherwise the visible `label` is announced.',
+    'Pair tap actions with `accessibilityHint` when navigation or destructive behavior is not obvious.',
+    'Respect disabled states so screen readers announce `disabled`; avoid removing the control from the tree when disabled.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Container</strong> — token-driven padding, radius, border.</li>
+    <li><strong>Leading</strong> — optional icon or element before the label.</li>
+    <li>
+      <strong>Label/Content</strong> — by default, a token-styled Text node driven by <code>label</code> and <code>labelStyle</code>;
+      can be replaced via <code>renderContent(styles)</code> (reusing the styles) or fully overridden with <code>children</code>.
+    </li>
+    <li><strong>Trailing</strong> — optional icon or status after the label.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Use `modes` to align size/emphasis with adjacent IconButtons and form controls.',
+    'Keep labels short (1–3 words) to avoid truncation; long labels should be handled with `numberOfLines` in a custom child or in `renderContent`.',
+    'Avoid nesting other Pressables inside the button; use leading/trailing slots for icons only.',
+    'When providing `children`, treat it as a full-content override: `label` and `labelStyle` are ignored and you are responsible for typography and accessibility.',
+    'Prefer `renderContent(styles)` when you need custom content but still want to inherit the design-token typography.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={Button} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`button/background`**
+- **`button/border/color`**
+- **`button/border/size`**
+- **`button/fontFamily`**
+- **`button/fontSize`**
+- **`button/fontWeight`**
+- **`button/forground`**
+- **`button/gap`**
+- **`button/lineHeight`**
+- **`button/padding/horizontal`**
+- **`button/padding/vertical`**
+- **`button/radius`**
+
+All tokens support mode-based theming through the `modes` prop.
+## Custom content patterns
+
+- Use <code>label</code> (and optional <code>labelStyle</code>) for the standard, token-driven text label.
+- Use <code>renderContent(styles)</code> to take over the inner content while still reusing the merged label text styles passed via <code>styles</code>.
+- Use <code>children</code> only when you want to fully replace the inner content; in this mode <code>label</code> and <code>labelStyle</code> are ignored, and you must supply an appropriate <code>accessibilityLabel</code> when the visual content is non-text or ambiguous.

package/lib/commonjs/components/Card/Card.js

@@ -0,0 +1,171 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Card = Card;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+/**
+ * Context to share 'modes' with child components like Card.Title and Card.SupportText.
+ * This ensures that nested components can resolve their tokens correctly without 
+ * needing explicit mode prop passing for every child.
+ */const CardContext = /*#__PURE__*/(0, _react.createContext)({});
+/**
+ * Card component implementation from Figma node 765:6186.
+ * 
+ * Supports a `media` slot (with aspect ratio) and a content area.
+ * Usage:
+ * ```tsx
+ * <Card media={<Image source={...} />} modes={modes}>
+ *   <Card.SupportText>Support text</Card.SupportText>
+ *   <Card.Title>Title</Card.Title>
+ *   <Card.SupportText>Support text</Card.SupportText>
+ * </Card>
+ * ```
+ */
+function Card({
+  media,
+  children,
+  modes = {},
+  mediaAspectRatio = 154 / 116,
+  style
+}) {
+  // Resolve Card Container Tokens
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('card/background/color', modes) || '#ffffff';
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('card/border/color', modes) || '#ebebed';
+  const borderWidth = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/strokeWidth', modes) || '0.5'); // Ensure number
+  const radius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/radius', modes) || '8');
+  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/gap', modes) || '4');
+  const paddingHorizontal = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/padding-horizontal', modes) || '0');
+  const paddingVertical = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/padding-vertical', modes) || '0');
+
+  // Resolve Content Wrapper Tokens
+  const contentGap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/content/gap', modes) || '4');
+  const contentPaddingHorizontal = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/content/padding/horizontal', modes) || '12');
+  const contentPaddingVertical = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/content/padding/vertical', modes) || '16');
+
+  // Clone media to pass modes if it's a valid element, facilitating nested style resolution
+  const mediaWithModes = /*#__PURE__*/(0, _react.isValidElement)(media) ? /*#__PURE__*/(0, _react.cloneElement)(media, {
+    modes: {
+      ...media.props.modes,
+      ...modes
+    }
+  }) : media;
+  const containerStyle = {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderRadius: radius,
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+    overflow: 'hidden' // Ensure border radius clips content
+  };
+  const mediaWrapperStyle = {
+    width: '100%',
+    aspectRatio: mediaAspectRatio,
+    overflow: 'hidden'
+    // Figma has 'bg-[#3a46f7]' on the Ratio definition, but that's a placeholder.
+    // We assume the media content handles its own fill, or we can add a placeholder bg if needed.
+    // For now, we leave it transparent or rely on media.
+  };
+  const contentWrapperStyle = {
+    width: '100%',
+    gap: contentGap,
+    paddingHorizontal: contentPaddingHorizontal,
+    paddingVertical: contentPaddingVertical
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardContext.Provider, {
+    value: {
+      modes
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [containerStyle, style],
+      children: [media && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: mediaWrapperStyle,
+        children: mediaWithModes
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: contentWrapperStyle,
+        children: children
+      })]
+    })
+  });
+}
+
+// ----------------------------------------------------------------------------
+// Sub-components
+// ----------------------------------------------------------------------------
+
+/**
+ * Title component for Card content.
+ * Uses tokens: card/title/*
+ */
+function Title({
+  children,
+  style,
+  modes: propModes
+}) {
+  const context = (0, _react.useContext)(CardContext);
+  const modes = propModes || context.modes || {};
+  const color = (0, _figmaVariablesResolver.getVariableByName)('card/title/color', modes) || '#081007';
+  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/title/fontSize', modes) || '16');
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('card/title/fontFamily', modes) || 'JioType Var';
+  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/title/lineHeight', modes) || '18');
+
+  // Handling the potential typo in Figma variables "fonwWeight" vs "fontWeight"
+  // We check both keys to be safe.
+  const rawFontWeight = (0, _figmaVariablesResolver.getVariableByName)('card/title/fontWeight', modes) || (0, _figmaVariablesResolver.getVariableByName)('card/title/fonwWeight', modes) || '900';
+  const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
+  const textStyle = {
+    color,
+    fontSize,
+    fontFamily,
+    lineHeight,
+    fontWeight: fontWeight
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [textStyle, style],
+    children: children
+  });
+}
+
+/**
+ * SupportiveText component for Card content.
+ * Uses tokens: card/supportive-text/*
+ */
+function SupportText({
+  children,
+  style,
+  modes: propModes
+}) {
+  const context = (0, _react.useContext)(CardContext);
+  const modes = propModes || context.modes || {};
+  const color = (0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/color', modes) || '#191b1e';
+  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/fontSize', modes) || '12');
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/fontFamily', modes) || 'JioType Var';
+  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/lineHeight', modes) || '16');
+  const rawFontWeight = (0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/fontWeight', modes) || '400';
+  const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
+  const textStyle = {
+    color,
+    fontSize,
+    fontFamily,
+    lineHeight,
+    fontWeight: fontWeight
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [textStyle, style],
+    children: children
+  });
+}
+
+// Attach sub-components to Card
+Card.Title = Title;
+Card.SupportText = SupportText;
+var _default = exports.default = Card;
+//# sourceMappingURL=Card.js.map

package/lib/commonjs/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CardContext","createContext","Card","media","children","modes","mediaAspectRatio","style","backgroundColor","getVariableByName","borderColor","borderWidth","parseFloat","radius","gap","paddingHorizontal","paddingVertical","contentGap","contentPaddingHorizontal","contentPaddingVertical","mediaWithModes","isValidElement","cloneElement","props","containerStyle","borderRadius","overflow","mediaWrapperStyle","width","aspectRatio","contentWrapperStyle","jsx","Provider","value","jsxs","View","Title","propModes","context","useContext","color","fontSize","fontFamily","lineHeight","rawFontWeight","fontWeight","toString","textStyle","Text","SupportText","_default","exports"],"sourceRoot":"../../../../src","sources":["components/Card/Card.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Card/Card.mdx

@@ -0,0 +1,88 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as CardStories from './Card.stories';
+import Card from './Card';
+import { AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+import { View, Image, Text } from 'react-native';
+
+<Meta of={CardStories} />
+## Available Collections and Modes
+
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
+
+### Gap
+- **Modes:** S | M | L
+- **Default:** S
+## Usage
+
+<Canvas>
+  <Story of={CardStories.Default} />
+</Canvas>
+
+### Example Usage
+
+```tsx
+import { Image } from 'react-native';
+import Card from './components/Card/Card';
+
+function MyCard() {
+  return (
+    <Card 
+      media={
+        <Image 
+          source={{ uri: 'https://picsum.photos/300/200' }} 
+          style={{ width: '100%', height: '100%' }} 
+        />
+      }
+      mediaAspectRatio={1.33} // Optional: defaults to ~1.328
+      style={{ width: 148 }}
+    >
+      <Card.SupportText>Featured</Card.SupportText>
+      <Card.Title>Amazing Card</Card.Title>
+      <Card.SupportText>Subtitle here</Card.SupportText>
+    </Card>
+  );
+}
+```
+
+
+<AnatomySection>
+  <ul>
+    <li><strong>Container</strong> — Wrapper with token-driven background, border, radius, and padding.</li>
+    <li><strong>Media Slot</strong> — Dedicated area for images or other visual content, controlled by <code>mediaAspectRatio</code>.</li>
+    <li><strong>Content Wrapper</strong> — Layout container for the card's text content with token-driven spacing.</li>
+    <li><strong>Card.Title</strong> — Sub-component for the card's main title, automatically consuming <code>card/title/\*</code> tokens.</li>
+    <li><strong>Card.SupportText</strong> — Sub-component for secondary text, automatically consuming <code>card/supportive-text/\*</code> tokens.</li>
+  </ul>
+</AnatomySection>
+
+## Props
+
+<ArgsTable of={Card} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`card/background/color`**
+- **`card/border/color`**
+- **`card/content/gap`**
+- **`card/content/padding/horizontal`**
+- **`card/content/padding/vertical`**
+- **`card/gap`**
+- **`card/padding-horizontal`**
+- **`card/padding-vertical`**
+- **`card/radius`**
+- **`card/strokeWidth`**
+- **`card/supportive-text/color`**
+- **`card/supportive-text/fontFamily`**
+- **`card/supportive-text/fontSize`**
+- **`card/supportive-text/fontWeight`**
+- **`card/supportive-text/lineHeight`**
+- **`card/title/color`**
+- **`card/title/fontFamily`**
+- **`card/title/fontSize`**
+- **`card/title/fontWeight`**
+- **`card/title/fonwWeight`**
+- **`card/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/commonjs/components/CardFeedback/CardFeedback.js

@@ -0,0 +1,216 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Action = Action;
+exports.Body = Body;
+exports.CardFeedback = CardFeedback;
+exports.Content = Content;
+exports.Icon = Icon;
+exports.Title = Title;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+/**
+ * Context to share 'modes' with child components.
+ */const CardFeedbackContext = /*#__PURE__*/(0, _react.createContext)({});
+/**
+ * CardFeedback component from Figma node 1280:4481.
+ * 
+ * Used for status updates, warnings, or feedback.
+ */
+function CardFeedback({
+  children,
+  modes = {},
+  style
+}) {
+  // Container Tokens
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/background', modes) || '#dbf0d9';
+  const radius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/radius', modes) || '12');
+  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/gap', modes) || '8');
+  const paddingHorizontal = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/padding/horizontal', modes) || '12');
+  const paddingVertical = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/padding/vertical', modes) || '12');
+  const containerStyle = {
+    backgroundColor,
+    borderRadius: radius,
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+    // Min height from design, but flex is better
+    minHeight: 59,
+    alignItems: 'flex-start',
+    flexDirection: 'column'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardFeedbackContext.Provider, {
+    value: {
+      modes
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [containerStyle, style],
+      children: children
+    })
+  });
+}
+
+// ----------------------------------------------------------------------------
+// Sub-components
+// ----------------------------------------------------------------------------
+
+/**
+ * Icon Wrapper
+ * Tokens: cardFeedback/icon/size, cardFeedback/icon/color
+ */
+function Icon({
+  children,
+  style,
+  modes: propModes
+}) {
+  const context = (0, _react.useContext)(CardFeedbackContext);
+  const modes = propModes || context.modes || {};
+  const size = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/icon/size', modes) || '20');
+  // Color is usually applied to the SVG/Icon itself, but we can access it here if needed
+  // const color = getVariableByName('cardFeedback/icon/color', modes); 
+
+  const containerStyle = {
+    width: size,
+    height: size,
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden'
+  };
+
+  // If children is an SVG or Icon component, we might need to clone it to pass color?
+  // For now, just render children in the sized box.
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    children: children
+  });
+}
+
+/**
+ * Content Wrapper (Text Wrap)
+ * Wraps Title, Body, and sometimes Action.
+ * Tokens: cardFeedback/text/gap
+ */
+function Content({
+  children,
+  style,
+  modes: propModes
+}) {
+  const context = (0, _react.useContext)(CardFeedbackContext);
+  const modes = propModes || context.modes || {};
+  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/text/gap', modes) || '8');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [{
+      gap,
+      width: '100%'
+    }, style],
+    children: children
+  });
+}
+
+/**
+ * Title Component
+ * Tokens: cardFeedback/title/*
+ */
+function Title({
+  children,
+  style,
+  modes: propModes
+}) {
+  const context = (0, _react.useContext)(CardFeedbackContext);
+  const modes = propModes || context.modes || {};
+  const color = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/color', modes) || '#0f0d0a';
+  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/fontSize', modes) || '14');
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/fontFamily', modes) || 'JioType Var';
+  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/lineHeight', modes) || '17');
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/fontWeight', modes) || '500';
+  const textStyle = {
+    color,
+    fontSize,
+    fontFamily,
+    lineHeight,
+    fontWeight: fontWeight
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [textStyle, style],
+    children: children
+  });
+}
+
+/**
+ * Body Component
+ * Tokens: cardFeedback/body/*
+ */
+function Body({
+  children,
+  style,
+  modes: propModes
+}) {
+  const context = (0, _react.useContext)(CardFeedbackContext);
+  const modes = propModes || context.modes || {};
+  const color = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/color', modes) || '#1f1a14';
+  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/fontSize', modes) || '12');
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/fontFamily', modes) || 'JioType Var';
+  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/lineHeight', modes) || '16');
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/fontWeight', modes) || '400';
+  const textStyle = {
+    color,
+    fontSize,
+    fontFamily,
+    lineHeight,
+    fontWeight: fontWeight
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [textStyle, style],
+    children: children
+  });
+}
+
+/**
+ * Action Slot Wrapper
+ * Tokens: cardFeedback/actionSlot/gap
+ */
+function Action({
+  children,
+  style,
+  modes: propModes
+}) {
+  const context = (0, _react.useContext)(CardFeedbackContext);
+  const modes = propModes || context.modes || {};
+  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/actionSlot/gap', modes) || '4');
+
+  // "Maximise existing component usage" -> Pass modes to children (Buttons)
+  const childrenWithModes = _react.default.Children.map(children, child => {
+    if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
+      return /*#__PURE__*/(0, _react.cloneElement)(child, {
+        modes: {
+          ...child.props.modes,
+          ...modes
+        }
+      });
+    }
+    return child;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [{
+      gap,
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    }, style],
+    children: childrenWithModes
+  });
+}
+
+// Attach sub-components
+CardFeedback.Icon = Icon;
+CardFeedback.Content = Content;
+CardFeedback.Title = Title;
+CardFeedback.Body = Body;
+CardFeedback.Action = Action;
+var _default = exports.default = CardFeedback;
+//# sourceMappingURL=CardFeedback.js.map

package/lib/commonjs/components/CardFeedback/CardFeedback.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CardFeedbackContext","createContext","CardFeedback","children","modes","style","backgroundColor","getVariableByName","radius","parseFloat","gap","paddingHorizontal","paddingVertical","containerStyle","borderRadius","minHeight","alignItems","flexDirection","jsx","Provider","value","View","Icon","propModes","context","useContext","size","width","height","justifyContent","overflow","Content","Title","color","fontSize","fontFamily","lineHeight","fontWeight","textStyle","Text","Body","Action","childrenWithModes","React","Children","map","child","isValidElement","cloneElement","props","flexWrap","_default","exports"],"sourceRoot":"../../../../src","sources":["components/CardFeedback/CardFeedback.tsx"],"mappings":"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","ignoreList":[]}