jfs-components 0.0.30 → 0.0.33

package/src/components/Carousel/Carousel.mdx

@@ -128,7 +128,7 @@ function MyCarousel() {
 <UsageConstraintsSection>
   <ul>
     <li>Each child of <code>Carousel</code> becomes one slide. Use <code>Carousel.Item</code> for semantic clarity.</li>
-    <li>When <code>itemWidth</code> is not provided, items expand to fill the container width minus <code>peekOffset</code>.</li>
+    <li>When <code>itemWidth</code> is not provided, items expand to fill the container width minus horizontal padding.</li>
     <li>Auto-play pauses automatically while the user is dragging.</li>
     <li>The <code>modes</code> prop is forwarded to all children via <code>cloneElement</code>.</li>
     <li>On web, CSS <code>scroll-snap-type</code> is applied for native-feeling snap behavior.</li>
@@ -153,6 +153,5 @@ This component uses the following design tokens, resolved through `getVariableBy
 - **`carousel/pagination/dotRadius`**
 - **`carousel/pagination/dotSize`**
 - **`carousel/pagination/gap`**
-- **`carousel/peekOffset`**
 
 All tokens support mode-based theming through the `modes` prop.

package/src/components/Carousel/Carousel.tsx

@@ -37,9 +37,9 @@ const CarouselContext = createContext<CarouselContextValue>({
   modes: {},
   activeIndex: 0,
   totalItems: 0,
-  goTo: () => {},
-  goNext: () => {},
-  goPrev: () => {},
+  goTo: () => { },
+  goNext: () => { },
+  goPrev: () => { },
 })
 
 // ---------------------------------------------------------------------------
@@ -63,8 +63,7 @@ export interface CarouselProps {
   gap?: number
   /** Width of each carousel item. When undefined, items take full container width. */
   itemWidth?: number
-  /** Horizontal padding around the carousel track, allowing peek of adjacent items. Defaults to 0. */
-  peekOffset?: number
+
   /** Called when the active index changes. */
   onIndexChange?: (index: number) => void
   /** Style overrides for the outermost container. */
@@ -84,7 +83,7 @@ export function Carousel({
   loop = true,
   gap: gapProp,
   itemWidth: itemWidthProp,
-  peekOffset: peekOffsetProp,
+
   onIndexChange,
   style,
 }: CarouselProps) {
@@ -94,10 +93,7 @@ export function Carousel({
   )
   const gap = gapProp ?? tokenGap
 
-  const tokenPeekOffset = parseFloat(
-    getVariableByName('carousel/peekOffset', modes) || '0',
-  )
-  const peekOffset = peekOffsetProp ?? tokenPeekOffset
+
 
   const containerPaddingH = parseFloat(
     getVariableByName('carousel/padding/horizontal', modes) || '0',
@@ -129,8 +125,8 @@ export function Carousel({
     if (itemWidthProp != null) return itemWidthProp
     if (containerWidth === 0) return 0
     // Full-width minus peekOffset on each side
-    return containerWidth - peekOffset * 2 - containerPaddingH * 2
-  }, [itemWidthProp, containerWidth, peekOffset, containerPaddingH])
+    return containerWidth - containerPaddingH * 4
+  }, [itemWidthProp, containerWidth, containerPaddingH])
 
   // Snap interval = item width + gap
   const snapInterval = effectiveItemWidth + gap
@@ -258,7 +254,7 @@ export function Carousel({
   }
 
   const contentContainerStyle: ViewStyle = {
-    paddingHorizontal: peekOffset + containerPaddingH,
+    paddingHorizontal: containerPaddingH * 2,
     gap,
     // Align items to the start so snap works correctly
     alignItems: 'flex-start',
@@ -280,7 +276,7 @@ export function Carousel({
           scrollEventThrottle={16}
           onScrollBeginDrag={handleScrollBeginDrag}
           onScrollEndDrag={handleScrollEndDrag}
-          
+
         >
           {items.map((child, index) => {
             const itemStyle: ViewStyle = {
@@ -290,12 +286,12 @@ export function Carousel({
             // Pass modes down to children
             const childWithModes = React.isValidElement(child)
               ? React.cloneElement(child as React.ReactElement<any>, {
-                  modes: {
-                    ...((child.props as any)?.modes || {}),
-                    ...modes,
-                  },
-                  style: [itemStyle, (child.props as any)?.style],
-                })
+                modes: {
+                  ...((child.props as any)?.modes || {}),
+                  ...modes,
+                },
+                style: [itemStyle, (child.props as any)?.style],
+              })
               : child
 
             return (

package/src/components/ChipGroup/ChipGroup.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { flattenChildren } from '../../utils/react-utils';
 
 export type ChipGroupProps = {
     /**
@@ -44,15 +45,17 @@ function ChipGroup({
         gap: gap,
     };
 
+    // Flatten children to handle Fragments properly
+    const flatChildren = flattenChildren(children);
+
     // Clone children to pass `modes` prop
-    const childrenWithModes = React.Children.map(children, (child) => {
+    const childrenWithModes = React.Children.map(flatChildren, (child) => {
         if (React.isValidElement(child)) {
             // Pass merged modes (parent modes + child modes)
-            // Note: We don't have access to child's existing props here to merge modes perfectly if they were passed directly to child
-            // But usually we want parent modes to override or augment.
-            // For now, simpler approach: just pass the parent modes, assuming child will handle merging if it needs to.
-            // Actually, based on previous ButtonGroup example, we just pass { modes: modes }.
-            return React.cloneElement(child, { modes: modes } as any);
+            const element = child as React.ReactElement<any>;
+            const childModes = element.props.modes || {};
+            const mergedModes = { ...modes, ...childModes };
+            return React.cloneElement(element, { modes: mergedModes });
         }
         return child;
     });

package/src/components/ListGroup/ListGroup.tsx

@@ -6,7 +6,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
  * Helper function to recursively clone children and pass modes prop to components that accept it.
  * This ensures that all child components in slots receive the modes prop from the parent.
  */
-import { cloneChildrenWithModes } from '../../utils/react-utils'
+import { cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils'
 
 type ListGroupProps = {
   label?: string;
@@ -80,8 +80,10 @@ function ListGroup({
   }
 
   // Clone listGroupSlot children and pass modes to all children that accept it
+  // We flatten children first so that if a Fragment is passed, the items inside
+  // become direct children of the container, allowing `gap` to apply correctly between them.
   const processedSlot = listGroupSlot
-    ? cloneChildrenWithModes(React.Children.toArray(listGroupSlot), modes)
+    ? cloneChildrenWithModes(flattenChildren(listGroupSlot), modes)
     : null
 
   // Use provided accessibilityLabel or fall back to label

package/src/components/RechargeCard/RechargeCard.mdx

@@ -0,0 +1,100 @@
+import { Meta, Story, Controls } from '@storybook/blocks';
+import * as RechargeCardStories from './RechargeCard.stories';
+import RechargeCard from './RechargeCard';
+
+<Meta of={RechargeCardStories} />
+
+# RechargeCard
+
+RechargeCard component displays a detailed view of a recharge plan.
+
+## Properties
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| `title` | `string` | `"Unlimited 5G"` | Title of the plan |
+| `price` | `number \| string` | `500` | Price value displayed via MoneyValue |
+| `validity` | `string` | `"365 days"` | Validity duration |
+| `data` | `string` | `"2 GB/Day"` | Data allowance info |
+| `disclaimer` | `string` | `...` | Disclaimer text below specs |
+| `subscriptionContent` | `ReactNode` | `undefined` | Avatar elements to display in subscription slot (wrapped in AvatarGroup) |
+| `actions` | `ReactNode` | `undefined` | Button elements to display in the button group (Button components) |
+| `modes` | `object` | `{}` | Config for design token modes |
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+```tsx
+import RechargeCard from './RechargeCard';
+import { AvatarGroup, Avatar } from '..';
+
+function Example() {
+  return (
+    <RechargeCard
+      title="Unlimited 5G"
+      price={500}
+      validity="365 days"
+      data="2 GB/Day"
+      modes={{ "Context3": "Transaction Bubble & Cards" }}
+      subscriptionContent={
+        <>
+          <Avatar style="Image" imageSource="..." />
+          <Avatar style="Monogram" monogram="+3" />
+        </>
+      }
+      actions={
+        <>
+           <Button label="Recharge" onPress={() => console.log('Recharge')} />
+           <Button label="Details" onPress={() => console.log('Details')} modes={{ Emphasis: 'Low' }} />
+        </>
+      }
+    />
+  );
+}
+```
+
+<Story of={RechargeCardStories.Default} />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`buttonGroup/padding/gap`**
+- **`buttonGroup/padding/horizontal`**
+- **`buttonGroup/padding/vertical`**
+- **`rechargeCard/background`**
+- **`rechargeCard/disclaimer/color`**
+- **`rechargeCard/disclaimer/fontFamily`**
+- **`rechargeCard/disclaimer/fontSize`**
+- **`rechargeCard/disclaimer/fontWeight`**
+- **`rechargeCard/disclaimer/lineHeight`**
+- **`rechargeCard/gap`**
+- **`rechargeCard/header/gap`**
+- **`rechargeCard/minWidth`**
+- **`rechargeCard/padding/horizontal`**
+- **`rechargeCard/padding/vertical`**
+- **`rechargeCard/radius`**
+- **`rechargeCard/specItem/gap`**
+- **`rechargeCard/specItem/label/color`**
+- **`rechargeCard/specItem/label/fontFamily`**
+- **`rechargeCard/specItem/label/fontSize`**
+- **`rechargeCard/specItem/label/fontWeight`**
+- **`rechargeCard/specItem/label/lineHeight`**
+- **`rechargeCard/specItem/value/color`**
+- **`rechargeCard/specItem/value/fontFamily`**
+- **`rechargeCard/specItem/value/fontSize`**
+- **`rechargeCard/specItem/value/fontWeight`**
+- **`rechargeCard/specItem/value/lineHeight`**
+- **`rechargeCard/specs/gap`**
+- **`rechargeCard/title/color`**
+- **`rechargeCard/title/fontFamily`**
+- **`rechargeCard/title/fontSize`**
+- **`rechargeCard/title/fontWeight`**
+- **`rechargeCard/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.
+

package/src/components/RechargeCard/RechargeCard.tsx

@@ -0,0 +1,239 @@
+import React, { isValidElement, cloneElement } from 'react';
+import { View, Text, StyleSheet, type ViewStyle } from 'react-native';
+import ButtonGroup from '../ButtonGroup/ButtonGroup';
+import AvatarGroup from '../AvatarGroup/AvatarGroup';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import MoneyValue from '../MoneyValue/MoneyValue';
+import Button from '../Button/Button';
+
+
+type RechargeCardProps = {
+    /**
+     * Title of the card.
+     * Default: "Unlimited 5G"
+     */
+    title?: string;
+    /**
+     * Value for the MoneyValue component.
+     * Default: 500
+     */
+    price?: number | string;
+    /**
+     * Validity duration string.
+     * Default: "365 days"
+     */
+    validity?: string;
+    /**
+     * Data allowance string.
+     * Default: "2 GB/Day"
+     */
+    data?: string;
+    /**
+     * Disclaimer text.
+     * Default is pulled from tokens if not provided, or provided as prop.
+     */
+    disclaimer?: string;
+    /**
+     * Avatar elements to be displayed in the subscription slot.
+     * Content will be wrapped in an AvatarGroup.
+     */
+    subscriptionContent?: React.ReactNode;
+    /**
+     * Actions to be displayed in the button group (e.g. Button components).
+     * Buttons should be passed as children to this prop.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Mode configuration for design tokens.
+     */
+    modes?: Record<string, any>;
+    style?: ViewStyle;
+};
+
+/**
+ * RechargeCard component implementation from Figma node 2235:937.
+ * Displays a recharge plan with price, validity, data, and subscription details.
+ */
+export default function RechargeCard({
+    title = "Unlimited 5G",
+    price = 500,
+    validity = "365 days",
+    data = "2 GB/Day",
+    disclaimer = "Data only pack (No Voice & No SMS)\nVoice: NA | SMS: NA...",
+    subscriptionContent,
+    actions,
+    modes = {},
+    style,
+}: RechargeCardProps) {
+    // Container Tokens
+    const backgroundColor = getVariableByName('rechargeCard/background', modes) || '#f6f3ff';
+    const paddingHorizontal = parseInt(getVariableByName('rechargeCard/padding/horizontal', modes) || 16, 10);
+    const paddingVertical = parseInt(getVariableByName('rechargeCard/padding/vertical', modes) || 20, 10);
+    const gap = parseInt(getVariableByName('rechargeCard/gap', modes) || 20, 10);
+    const radius = parseInt(getVariableByName('rechargeCard/radius', modes) || 20, 10);
+    const minWidth = parseInt(getVariableByName('rechargeCard/minWidth', modes) || 328, 10);
+
+    // Header Tokens
+    const headerGap = parseInt(getVariableByName('rechargeCard/header/gap', modes) || 4, 10);
+    const titleColor = getVariableByName('rechargeCard/title/color', modes) || '#13002d';
+    const titleFontSize = parseInt(getVariableByName('rechargeCard/title/fontSize', modes) || 12, 10);
+    const titleFontFamily = getVariableByName('rechargeCard/title/fontFamily', modes) || 'JioType Var';
+    const titleLineHeight = parseInt(getVariableByName('rechargeCard/title/lineHeight', modes) || 14, 10);
+    const titleFontWeight = getVariableByName('rechargeCard/title/fontWeight', modes) || '700';
+
+    // Specs Tokens
+    const specsGap = parseInt(getVariableByName('rechargeCard/specs/gap', modes) || 0, 10);
+    const specItemGap = parseInt(getVariableByName('rechargeCard/specItem/gap', modes) || 4, 10);
+
+    // Spec Label Tokens
+    const specLabelColor = getVariableByName('rechargeCard/specItem/label/color', modes) || '#13002d';
+    const specLabelFontSize = parseInt(getVariableByName('rechargeCard/specItem/label/fontSize', modes) || 12, 10);
+    const specLabelFontFamily = getVariableByName('rechargeCard/specItem/label/fontFamily', modes) || 'JioType Var';
+    const specLabelLineHeight = parseInt(getVariableByName('rechargeCard/specItem/label/lineHeight', modes) || 14, 10);
+    const specLabelFontWeight = getVariableByName('rechargeCard/specItem/label/fontWeight', modes) || '500';
+
+    // Spec Value Tokens
+    const specValueColor = getVariableByName('rechargeCard/specItem/value/color', modes) || '#310064';
+    const specValueFontSize = parseInt(getVariableByName('rechargeCard/specItem/value/fontSize', modes) || 14, 10);
+    const specValueFontFamily = getVariableByName('rechargeCard/specItem/value/fontFamily', modes) || 'JioType Var';
+    const specValueLineHeight = parseInt(getVariableByName('rechargeCard/specItem/value/lineHeight', modes) || 17, 10);
+    const specValueFontWeight = getVariableByName('rechargeCard/specItem/value/fontWeight', modes) || '500';
+
+    // Disclaimer Tokens
+    const disclaimerColor = getVariableByName('rechargeCard/disclaimer/color', modes) || '#22004a';
+    const disclaimerFontSize = parseInt(getVariableByName('rechargeCard/disclaimer/fontSize', modes) || 10, 10);
+    const disclaimerFontFamily = getVariableByName('rechargeCard/disclaimer/fontFamily', modes) || 'JioType Var';
+    const disclaimerLineHeight = parseInt(getVariableByName('rechargeCard/disclaimer/lineHeight', modes) || 13, 10);
+    const disclaimerFontWeight = getVariableByName('rechargeCard/disclaimer/fontWeight', modes) || '400';
+
+    // Button Group Tokens
+    // Handled by ButtonGroup component directly
+
+    // Helpers
+    const resolveFontWeight = (weight: string | number) => typeof weight === 'number' ? weight.toString() : weight;
+
+    // Pass modes to subscription children (e.g. AvatarGroup)
+    // Now encapsulated, so we just pass children to AvatarGroup
+    const hasSubscriptions = React.Children.count(subscriptionContent) > 0;
+
+
+    return (
+        <View style={[{
+            backgroundColor,
+            paddingHorizontal,
+            paddingVertical,
+            gap,
+            borderRadius: radius,
+            minWidth,
+            alignItems: 'flex-start',
+        }, style]}>
+            {/* Header */}
+            <View style={{ gap: headerGap, alignItems: 'flex-start' }}>
+                <Text style={{
+                    color: titleColor,
+                    fontSize: titleFontSize,
+                    fontFamily: titleFontFamily,
+                    lineHeight: titleLineHeight,
+                    fontWeight: resolveFontWeight(titleFontWeight) as any,
+                }}>
+                    {title}
+                </Text>
+                <MoneyValue
+                    value={price}
+                    currency="₹"
+                    modes={modes}
+                />
+            </View>
+
+            {/* Specs */}
+            <View style={{ flexDirection: 'row', gap: specsGap, width: '100%' }}>
+                {/* Validity */}
+                <View style={{ flex: 1, gap: specItemGap }}>
+                    <Text style={{
+                        color: specLabelColor,
+                        fontSize: specLabelFontSize,
+                        fontFamily: specLabelFontFamily,
+                        lineHeight: specLabelLineHeight,
+                        fontWeight: resolveFontWeight(specLabelFontWeight) as any,
+                    }}>
+                        Validity
+                    </Text>
+                    <Text style={{
+                        color: specValueColor,
+                        fontSize: specValueFontSize,
+                        fontFamily: specValueFontFamily,
+                        lineHeight: specValueLineHeight,
+                        fontWeight: resolveFontWeight(specValueFontWeight) as any,
+                    }}>
+                        {validity}
+                    </Text>
+                </View>
+
+                {/* Data */}
+                <View style={{ flex: 1, gap: specItemGap }}>
+                    <Text style={{
+                        color: specLabelColor,
+                        fontSize: specLabelFontSize,
+                        fontFamily: specLabelFontFamily,
+                        lineHeight: specLabelLineHeight,
+                        fontWeight: resolveFontWeight(specLabelFontWeight) as any,
+                    }}>
+                        Data
+                    </Text>
+                    <Text style={{
+                        color: specValueColor,
+                        fontSize: specValueFontSize,
+                        fontFamily: specValueFontFamily,
+                        lineHeight: specValueLineHeight,
+                        fontWeight: resolveFontWeight(specValueFontWeight) as any,
+                    }}>
+                        {data}
+                    </Text>
+                </View>
+
+                {/* Subscriptions */}
+                {hasSubscriptions && (
+                    <View style={{ flex: 1, gap: specItemGap }}>
+                        <Text style={{
+                            color: specLabelColor,
+                            fontSize: specLabelFontSize,
+                            fontFamily: specLabelFontFamily,
+                            lineHeight: specLabelLineHeight,
+                            fontWeight: resolveFontWeight(specLabelFontWeight) as any,
+                        }}>
+                            Subscriptions
+                        </Text>
+                        <AvatarGroup
+                            modes={{ ...modes, "Avatar Size": "S" }}
+                        >
+                            {subscriptionContent}
+                        </AvatarGroup>
+                    </View>
+                )}
+            </View>
+
+            {/* Disclaimer */}
+            <Text style={{
+                color: disclaimerColor,
+                fontSize: disclaimerFontSize,
+                fontFamily: disclaimerFontFamily,
+                lineHeight: disclaimerLineHeight,
+                fontWeight: resolveFontWeight(disclaimerFontWeight) as any,
+            }}>
+                {disclaimer}
+            </Text>
+
+            {/* Button Group */}
+            <ButtonGroup
+                modes={{
+                    ...modes,
+                    "Appearance.Brand": "Secondary",
+                    "Button / Size": "S",
+                    "Emphasis": "High"
+                }}
+            >
+                {actions}
+            </ButtonGroup>
+        </View>
+    );
+}

package/src/components/index.ts

@@ -32,7 +32,7 @@ export { StepLabel } from './Stepper/StepLabel';
 export { default as TextInput } from './TextInput/TextInput';
 export { default as ThreadHero, type ThreadHeroProps } from './ThreadHero/ThreadHero';
 export { Tooltip } from './Tooltip/Tooltip';
-export { default as TransactionBubble } from './TransactionBubble/TransactionBubble';
+
 export { default as TransactionDetails } from './TransactionDetails/TransactionDetails';
 export { default as TransactionStatus } from './TransactionStatus/TransactionStatus';
 export { default as UpiHandle } from './UpiHandle/UpiHandle';

package/src/icons/ic_alert.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.7401 18.0002L13.7401 4.00022C13.5657 3.69243 13.3127 3.43641 13.0071 3.25829C12.7014 3.08017 12.3539 2.98633 12.0001 2.98633C11.6464 2.98633 11.2989 3.08017 10.9932 3.25829C10.6875 3.43641 10.4346 3.69243 10.2601 4.00022L2.26015 18.0002C2.08427 18.3048 1.99184 18.6505 1.99219 19.0022C1.99254 19.354 2.08565 19.6994 2.26213 20.0037C2.4386 20.308 2.69221 20.5603 2.99736 20.7353C3.3025 20.9102 3.6484 21.0016 4.00015 21.0002H20.0001C20.3519 21.0016 20.6978 20.9102 21.0029 20.7353C21.3081 20.5603 21.5617 20.308 21.7382 20.0037C21.9146 19.6994 22.0078 19.354 22.0081 19.0022C22.0084 18.6505 21.916 18.3048 21.7401 18.0002ZM11.0001 7.00022C11.0001 6.73501 11.1055 6.48065 11.293 6.29312C11.4806 6.10558 11.7349 6.00022 12.0001 6.00022C12.2654 6.00022 12.5197 6.10558 12.7073 6.29312C12.8948 6.48065 13.0001 6.73501 13.0001 7.00022V13.0002C13.0001 13.2654 12.8948 13.5198 12.7073 13.7073C12.5197 13.8949 12.2654 14.0002 12.0001 14.0002C11.7349 14.0002 11.4806 13.8949 11.293 13.7073C11.1055 13.5198 11.0001 13.2654 11.0001 13.0002V7.00022ZM12.0001 19.0002C11.7035 19.0002 11.4135 18.9123 11.1668 18.7474C10.9201 18.5826 10.7279 18.3483 10.6143 18.0742C10.5008 17.8002 10.4711 17.4986 10.529 17.2076C10.5868 16.9166 10.7297 16.6493 10.9395 16.4396C11.1493 16.2298 11.4165 16.0869 11.7075 16.029C11.9985 15.9712 12.3001 16.0009 12.5742 16.1144C12.8483 16.2279 13.0825 16.4202 13.2474 16.6669C13.4122 16.9135 13.5001 17.2036 13.5001 17.5002C13.5001 17.898 13.3421 18.2796 13.0608 18.5609C12.7795 18.8422 12.398 19.0002 12.0001 19.0002Z" fill="#141414"/>
+</svg>

package/src/icons/ic_error.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM15.71 14.29C15.8037 14.383 15.8781 14.4936 15.9289 14.6154C15.9797 14.7373 16.0058 14.868 16.0058 15C16.0058 15.132 15.9797 15.2627 15.9289 15.3846C15.8781 15.5064 15.8037 15.617 15.71 15.71C15.617 15.8037 15.5064 15.8781 15.3846 15.9289C15.2627 15.9797 15.132 16.0058 15 16.0058C14.868 16.0058 14.7373 15.9797 14.6154 15.9289C14.4936 15.8781 14.383 15.8037 14.29 15.71L12 13.41L9.71 15.71C9.61704 15.8037 9.50644 15.8781 9.38458 15.9289C9.26272 15.9797 9.13202 16.0058 9 16.0058C8.86799 16.0058 8.73729 15.9797 8.61543 15.9289C8.49357 15.8781 8.38297 15.8037 8.29 15.71C8.19628 15.617 8.12188 15.5064 8.07111 15.3846C8.02034 15.2627 7.99421 15.132 7.99421 15C7.99421 14.868 8.02034 14.7373 8.07111 14.6154C8.12188 14.4936 8.19628 14.383 8.29 14.29L10.59 12L8.29 9.71C8.1017 9.5217 7.99591 9.2663 7.99591 9C7.99591 8.7337 8.1017 8.4783 8.29 8.29C8.47831 8.1017 8.7337 7.99591 9 7.99591C9.26631 7.99591 9.5217 8.1017 9.71 8.29L12 10.59L14.29 8.29C14.4783 8.1017 14.7337 7.99591 15 7.99591C15.2663 7.99591 15.5217 8.1017 15.71 8.29C15.8983 8.4783 16.0041 8.7337 16.0041 9C16.0041 9.2663 15.8983 9.5217 15.71 9.71L13.41 12L15.71 14.29Z" fill="#141414"/>
+</svg>

package/src/icons/ic_exclamation.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 17C12.2652 17 12.5196 16.8946 12.7071 16.7071C12.8946 16.5196 13 16.2652 13 16V3C13 2.73478 12.8946 2.48043 12.7071 2.29289C12.5196 2.10536 12.2652 2 12 2C11.7348 2 11.4804 2.10536 11.2929 2.29289C11.1054 2.48043 11 2.73478 11 3V16C11 16.2652 11.1054 16.5196 11.2929 16.7071C11.4804 16.8946 11.7348 17 12 17ZM12 19C11.7033 19 11.4133 19.088 11.1666 19.2528C10.92 19.4176 10.7277 19.6519 10.6142 19.926C10.5006 20.2001 10.4709 20.5017 10.5288 20.7926C10.5867 21.0836 10.7296 21.3509 10.9393 21.5607C11.1491 21.7704 11.4164 21.9133 11.7074 21.9712C11.9983 22.0291 12.2999 21.9993 12.574 21.8858C12.8481 21.7723 13.0824 21.58 13.2472 21.3334C13.412 21.0867 13.5 20.7967 13.5 20.5C13.5 20.1022 13.342 19.7206 13.0607 19.4393C12.7794 19.158 12.3978 19 12 19Z" fill="#141414"/>
+</svg>

package/src/icons/ic_help.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0947 1.61719C6.30473 1.61719 1.59473 6.32719 1.59473 12.1172C1.59473 17.9072 6.30473 22.6172 12.0947 22.6172C17.8847 22.6172 22.5947 17.9072 22.5947 12.1172C22.5947 6.32719 17.8847 1.61719 12.0947 1.61719ZM12.7797 15.9947C12.7797 16.3972 12.4547 16.7272 12.0572 16.7272H12.0022C11.6047 16.7272 11.2797 16.3997 11.2797 15.9947V15.9597C11.2797 15.5572 11.6047 15.2272 12.0022 15.2272H12.0572C12.4547 15.2272 12.7797 15.5547 12.7797 15.9597V15.9947ZM14.0597 11.7822C13.7197 12.1622 13.3122 12.4872 13.0197 12.9072C12.8672 13.1272 12.8572 13.0922 12.7622 13.3497C12.6847 13.5597 12.7322 13.8497 12.6222 14.0547C12.4447 14.3847 12.0772 14.4822 11.7272 14.3347C11.3172 14.1597 11.2547 13.7472 11.2822 13.3497C11.3122 12.8972 11.3822 12.7047 11.6072 12.3022C11.8222 11.9197 12.1397 11.6122 12.4422 11.3022C12.9522 10.7797 13.7222 9.86719 12.8897 9.23469C12.1572 8.67719 11.1622 9.08969 10.9647 9.94969C10.8747 10.3422 10.7447 10.6822 10.3522 10.8122C10.0597 10.9097 9.74723 10.8397 9.56473 10.5897C9.08473 9.93219 9.70223 8.75469 10.1897 8.26969C11.4372 7.02719 13.9297 7.33219 14.6047 9.03719C14.6022 9.03219 14.5997 9.02469 14.5972 9.01969C14.5797 8.97969 14.5722 8.95469 14.5697 8.94719C14.5722 8.95719 14.5847 8.98719 14.5972 9.01969C14.5997 9.02719 14.6022 9.02969 14.6047 9.03719C14.6247 9.08969 14.6347 9.11469 14.6372 9.12219C14.6322 9.10969 14.6197 9.07469 14.6047 9.03969C14.9997 10.0272 14.7522 11.0097 14.0597 11.7822Z" fill="#141414"/>
+</svg>

package/src/icons/ic_message_send.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.00019 19.0002C8.86858 19.0009 8.73812 18.9757 8.61628 18.926C8.49444 18.8762 8.38363 18.8029 8.29018 18.7102L3.29019 13.7102C3.10188 13.5219 2.99609 13.2665 2.99609 13.0002C2.99609 12.7339 3.10188 12.4785 3.29019 12.2902C3.47849 12.1019 3.73388 11.9961 4.00019 11.9961C4.26649 11.9961 4.52188 12.1019 4.71019 12.2902L9.00019 16.5902L19.2902 6.29019C19.4785 6.10188 19.7339 5.99609 20.0002 5.99609C20.2665 5.99609 20.5219 6.10188 20.7102 6.29019C20.8985 6.47849 21.0043 6.73388 21.0043 7.00019C21.0043 7.26649 20.8985 7.52188 20.7102 7.71019L9.71019 18.7102C9.61674 18.8029 9.50593 18.8762 9.38409 18.926C9.26225 18.9757 9.13179 19.0009 9.00019 19.0002Z" fill="#141414"/>
+</svg>

package/src/icons/ic_smiley_unhappy.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM15.5 8C15.7967 8 16.0867 8.08797 16.3334 8.2528C16.58 8.41762 16.7723 8.65189 16.8858 8.92597C16.9994 9.20006 17.0291 9.50166 16.9712 9.79264C16.9133 10.0836 16.7704 10.3509 16.5607 10.5607C16.3509 10.7704 16.0836 10.9133 15.7926 10.9712C15.5017 11.0291 15.2001 10.9994 14.926 10.8858C14.6519 10.7723 14.4176 10.58 14.2528 10.3334C14.088 10.0867 14 9.79667 14 9.5C14 9.10218 14.158 8.72064 14.4393 8.43934C14.7206 8.15804 15.1022 8 15.5 8ZM8.5 8C8.79668 8 9.08669 8.08797 9.33336 8.2528C9.58003 8.41762 9.77229 8.65189 9.88582 8.92597C9.99936 9.20006 10.0291 9.50166 9.97118 9.79264C9.9133 10.0836 9.77044 10.3509 9.56066 10.5607C9.35089 10.7704 9.08361 10.9133 8.79264 10.9712C8.50167 11.0291 8.20007 10.9994 7.92598 10.8858C7.65189 10.7723 7.41762 10.58 7.2528 10.3334C7.08798 10.0867 7 9.79667 7 9.5C7 9.10218 7.15804 8.72064 7.43934 8.43934C7.72065 8.15804 8.10218 8 8.5 8ZM16.76 16.85C16.6038 16.9468 16.4238 16.9987 16.24 17C16.0701 17.0003 15.9028 16.9574 15.7541 16.8751C15.6054 16.7929 15.4801 16.6741 15.39 16.53C15.0302 15.9556 14.5304 15.482 13.9374 15.1537C13.3445 14.8254 12.6778 14.6532 12 14.6532C11.3222 14.6532 10.6555 14.8254 10.0626 15.1537C9.4696 15.482 8.96977 15.9556 8.61 16.53C8.54551 16.6512 8.45674 16.7579 8.34922 16.8433C8.2417 16.9287 8.11774 16.9911 7.98506 17.0265C7.85238 17.0619 7.71383 17.0696 7.57804 17.0492C7.44225 17.0287 7.31214 16.9805 7.1958 16.9075C7.07947 16.8345 6.97941 16.7384 6.90186 16.6251C6.82431 16.5117 6.77094 16.3836 6.74506 16.2488C6.71919 16.1139 6.72137 15.9752 6.75147 15.8412C6.78156 15.7072 6.83894 15.5808 6.92 15.47C7.46016 14.6106 8.20952 13.9022 9.09798 13.4112C9.98643 12.9203 10.9849 12.6627 12 12.6627C13.0151 12.6627 14.0136 12.9203 14.902 13.4112C15.7905 13.9022 16.5399 14.6106 17.08 15.47C17.1498 15.5816 17.1969 15.7058 17.2187 15.8356C17.2404 15.9654 17.2362 16.0982 17.2065 16.2264C17.1768 16.3546 17.122 16.4757 17.0454 16.5827C16.9688 16.6897 16.8718 16.7806 16.76 16.85Z" fill="#141414"/>
+</svg>

package/src/icons/ic_star.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.3697 9.60947C21.2557 9.27681 21.0563 8.98217 20.7904 8.75405C20.5246 8.52594 20.2017 8.38337 19.8504 8.32635L15.6155 7.68003L13.7164 3.59303C13.5645 3.26988 13.3176 2.99424 13.0137 2.79464C12.7099 2.60455 12.3586 2.5 11.9977 2.5C11.6369 2.5 11.2856 2.60455 10.9817 2.79464C10.6779 2.98474 10.431 3.26037 10.2791 3.59303L8.37999 7.68003L4.10708 8.32635C3.76524 8.38337 3.43291 8.52594 3.16704 8.75405C2.90117 8.98217 2.70176 9.27681 2.58782 9.60947C2.48337 9.93263 2.47387 10.2843 2.54984 10.617C2.6258 10.9496 2.79672 11.2633 3.0341 11.5104L6.15808 14.723L5.41744 19.2757C5.36047 19.6274 5.40794 19.9885 5.54088 20.3117C5.67381 20.6349 5.9017 20.92 6.19606 21.1291C6.50941 21.3667 6.89872 21.4998 7.29752 21.5093C7.62986 21.5093 7.9527 21.4332 8.24706 21.2717L12.0357 19.1806L15.8244 21.2717C16.1092 21.4332 16.4416 21.5188 16.7739 21.5093C17.1727 21.5093 17.5525 21.3857 17.8754 21.1576C18.1602 20.9485 18.3881 20.6729 18.5305 20.3402C18.6635 20.0171 18.711 19.6559 18.654 19.3042L17.9133 14.7515L21.0373 11.5389C21.2652 11.2823 21.4076 10.9591 21.4741 10.617C21.5311 10.2748 21.4931 9.92312 21.3697 9.60947Z" fill="#141414"/>
+</svg>