jfs-components 0.0.1

package/lib/module/components/Drawer/Drawer.mdx

@@ -0,0 +1,67 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as DrawerStories from './Drawer.stories';
+import Drawer from './Drawer';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={DrawerStories} />
+
+# Drawer
+
+Lightweight bottom drawer/sheet with a draggable handle.
+
+## 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.
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+## Usage
+
+<Canvas>
+  <Story of={DrawerStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Provide `accessibilityLabel`/`accessibilityHint` describing what the sheet contains and how to expand/collapse it.',
+    'Ensure the drag handle remains reachable via a `button` role; do not rely on gestures alone.',
+    'Give action items and custom children readable labels and predictable focus order.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Handle</strong> — drag affordance at the top of the sheet.</li>
+    <li><strong>Header</strong> — optional title text above actions.</li>
+    <li><strong>Actions</strong> — grid of IconButtons rendered from the `items` prop.</li>
+    <li><strong>Content slot</strong> — custom children rendered after the actions row.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Keep `expandedRatio` between 0.2–0.95 to avoid clipping or full-screen takeover.',
+    'Pass stable `items` keys/labels; avoid heavy scrollable children inside the animated sheet.',
+    'For web, keep nested content click/drag friendly; avoid stacking additional absolute sheets inside.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={Drawer} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`drawer/background`**
+- **`drawer/handle/color`**
+- **`drawer/handle/height`**
+- **`drawer/handle/width`**
+- **`drawer/padding`**
+- **`drawer/radius`**
+- **`drawer/title/color`**
+- **`drawer/title/size`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/module/components/FilterBar/FilterBar.js

@@ -0,0 +1,154 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import TextInput from '../TextInput/TextInput';
+
+/**
+ * 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 { jsx as _jsx } from "react/jsx-runtime";
+function cloneChildrenWithModes(children, modes) {
+  const result = React.Children.map(children, child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return child;
+    }
+
+    // Get existing children
+    const childChildren = child.props?.children;
+    const hasChildren = childChildren !== undefined && childChildren !== null;
+
+    // Clone the child with modes prop if it doesn't already have one
+    // or merge with existing modes if it does
+    // Merge order: parent modes first, then child's explicit modes override them
+    const existingModes = child.props?.modes;
+    const mergedModes = existingModes ? {
+      ...modes,
+      ...existingModes
+    } : modes;
+
+    // Recursively process children if they exist
+    const processedChildren = hasChildren ? cloneChildrenWithModes(React.Children.toArray(childChildren), modes) : undefined;
+
+    // Clone element with modes and processed children
+    return /*#__PURE__*/React.cloneElement(child, {
+      ...child.props,
+      modes: mergedModes
+    }, processedChildren);
+  });
+  return result || [];
+}
+/**
+ * FilterBar component that mirrors the Figma "filterBar" component.
+ *
+ * This component supports:
+ *  - **TextInput** integration with search functionality
+ *  - **design-token driven styling** via `getVariableByName` and `modes`
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.placeholder='Search'] - Placeholder text for the search input
+ * @param {string} [props.value=''] - Current value of the search input
+ * @param {Function} [props.onChangeText] - Callback function called when text changes
+ * @param {React.ReactNode} [props.children] - Optional custom content to replace the default TextInput. When provided (and `renderInput` is not set), this is treated as a full override and FilterBar will not wire up value or onChangeText.
+ * @param {Function} [props.renderInput] - Optional render prop that receives the input props (placeholder, value, onChangeText, modes, accessibilityLabel/accessibilityHint) and returns a custom input. This takes precedence over `children`.
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
+ * @param {Object} [props.style] - Optional container style overrides
+ * @param {string} [props.accessibilityLabel] - Accessibility label for the filter bar
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+function FilterBar({
+  placeholder = 'Search',
+  value = '',
+  onChangeText,
+  children,
+  renderInput,
+  modes = {},
+  style,
+  accessibilityLabel,
+  accessibilityHint,
+  ...rest
+}) {
+  const [isFocused, setIsFocused] = useState(false);
+  const focusStyle = {
+    borderWidth: isFocused ? 1 : 0,
+    borderColor: isFocused ? '#222' : 'transparent'
+  };
+  // Resolve container tokens
+  const paddingHorizontal = getVariableByName('filterBar/padding/horizontal', modes) || 16;
+  const paddingVertical = getVariableByName('filterBar/padding/vertical', modes) || 10;
+  const resolvedAccessibilityLabel = accessibilityLabel || 'Search filter';
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    width: '100%',
+    paddingHorizontal,
+    paddingVertical
+  };
+  const fullWidthStyle = {
+    width: '100%'
+  };
+  const defaultInput = /*#__PURE__*/_jsx(TextInput, {
+    placeholder: placeholder,
+    value: value,
+    ...(onChangeText !== undefined && {
+      onChangeText
+    }),
+    modes: modes,
+    style: fullWidthStyle,
+    accessibilityLabel: resolvedAccessibilityLabel,
+    ...(accessibilityHint !== undefined && {
+      accessibilityHint
+    }),
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false)
+  });
+  let processedChildren;
+
+  // Provide focus handlers to renderInput or children so the container can show a focus state.
+  if (renderInput) {
+    processedChildren = renderInput({
+      placeholder,
+      value,
+      onChangeText,
+      modes,
+      accessibilityLabel: resolvedAccessibilityLabel,
+      accessibilityHint,
+      onFocus: () => setIsFocused(true),
+      onBlur: () => setIsFocused(false)
+    });
+  } else if (children) {
+    // Clone custom children and inject onFocus/onBlur where possible.
+    const cloned = cloneChildrenWithModes(React.Children.toArray(children), modes);
+    processedChildren = React.Children.map(cloned, child => {
+      if (! /*#__PURE__*/React.isValidElement(child)) return child;
+      const existingOnFocus = child.props?.onFocus;
+      const existingOnBlur = child.props?.onBlur;
+      return /*#__PURE__*/React.cloneElement(child, {
+        ...child.props,
+        onFocus: e => {
+          setIsFocused(true);
+          existingOnFocus?.(e);
+        },
+        onBlur: e => {
+          setIsFocused(false);
+          existingOnBlur?.(e);
+        }
+      });
+    });
+  } else {
+    processedChildren = defaultInput;
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, focusStyle, style],
+    accessibilityRole: "search",
+    accessibilityLabel: resolvedAccessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    ...rest,
+    children: processedChildren
+  });
+}
+export default FilterBar;
+//# sourceMappingURL=FilterBar.js.map

package/lib/module/components/FilterBar/FilterBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","View","getVariableByName","TextInput","jsx","_jsx","cloneChildrenWithModes","children","modes","result","Children","map","child","isValidElement","childChildren","props","hasChildren","undefined","existingModes","mergedModes","processedChildren","toArray","cloneElement","FilterBar","placeholder","value","onChangeText","renderInput","style","accessibilityLabel","accessibilityHint","rest","isFocused","setIsFocused","focusStyle","borderWidth","borderColor","paddingHorizontal","paddingVertical","resolvedAccessibilityLabel","containerStyle","flexDirection","alignItems","width","fullWidthStyle","defaultInput","onFocus","onBlur","cloned","existingOnFocus","existingOnBlur","e","accessibilityRole"],"sourceRoot":"../../../../src","sources":["components/FilterBar/FilterBar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/FilterBar/FilterBar.mdx

@@ -0,0 +1,61 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as FilterBarStories from './FilterBar.stories';
+import FilterBar from './FilterBar';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={FilterBarStories} />
+
+# FilterBar
+
+FilterBar component that hosts a token-styled search input and exposes controlled override hooks.
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+<Canvas>
+  <Story of={FilterBarStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Use `accessibilityLabel` to describe what the search filters (e.g., “Filter transactions”).',
+    'If you supply custom children, they fully replace the default TextInput; ensure they expose textbox or chip roles appropriately and wire `value`/`onChangeText` yourself.',
+    'Prefer the `renderInput` prop when you want to customize the inner input while still receiving placeholder, value, modes, and accessibility props from FilterBar.',
+    'Keep placeholders meaningful; avoid empty placeholder strings.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Container</strong> — padded column wrapper.</li>
+    <li><strong>Input slot</strong> — default TextInput.Search or custom filter controls.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Forward `modes` so nested TextInput inherits the same token set.',
+    'Keep the bar full width; avoid horizontal scrolling for filters.',
+    'When replacing the default input, preserve search semantics (textbox role and hint).',
+  ]}
+/>
+## Props
+
+<ArgsTable of={FilterBar} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`filterBar/padding/horizontal`**
+- **`filterBar/padding/vertical`**
+
+All tokens support mode-based theming through the `modes` prop.
+## Custom input patterns
+
+- Use the default configuration (no `children` or `renderInput`) for a token-driven TextInput.Search instance.
+- Use `renderInput` to override just the inner input while still receiving `placeholder`, `value`, `onChangeText`, `modes`, `accessibilityLabel`, and `accessibilityHint` from FilterBar.
+- Use `children` for a full-content replacement of the input area; in this mode FilterBar does not connect `value` or `onChangeText` to your controls, so you must implement those behaviors and accessibility semantics yourself.

package/lib/module/components/IconButton/IconButton.js

@@ -0,0 +1,162 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { Pressable } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import Icon from '../../icons/Icon';
+import { usePressableWebSupport } from '../../utils/web-platform-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * IconButton component that displays an icon within a pressable button container.
+ * 
+ * This component displays an icon within a styled button container that can be pressed.
+ * All styling values are resolved from Figma design tokens using the provided modes.
+ * 
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
+ * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Button / Size": "M", "Appearance": "high"})
+ * @param {Function} [props.onPress] - Callback function called when the button is pressed
+ * @param {boolean} [props.disabled=false] - Whether the button is disabled
+ * @param {Object} [props.style] - Additional styles for the container
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, defaults to iconName
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ * @param {Object} [props.accessibilityState] - Additional accessibility state information
+ * 
+ * @example
+ * ```jsx
+ * // Default icon button
+ * <IconButton modes={{}} />
+ * 
+ * // Custom icon with size mode
+ * <IconButton iconName="ic_rupee" modes={{"Button / Size": "M"}} />
+ * 
+ * // With appearance mode
+ * <IconButton modes={{"Appearance": "high"}} onPress={() => console.log('pressed')} />
+ * 
+ * // With accessibility label
+ * <IconButton iconName="ic_search" accessibilityLabel="Search" accessibilityHint="Opens the search screen" />
+ * ```
+ */
+function IconButton({
+  iconName = "ic_card",
+  modes = {},
+  onPress,
+  disabled = false,
+  style,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  webAccessibilityProps,
+  ...rest
+}) {
+  const [isFocused, setIsFocused] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isPressed, setIsPressed] = useState(false);
+
+  // Resolve design tokens using only the Figma-defined base tokens for Icon Button (node 72:14)
+  const radius = getVariableByName('iconButton/radius', modes) ?? 9999;
+  const padding = getVariableByName('iconButton/padding', modes) ?? 12;
+  const backgroundColor = getVariableByName('iconButton/background', modes) ?? '#cfa159';
+  const borderColor = getVariableByName('iconButton/border/color', modes) ?? '#ffffff00';
+  const borderSize = getVariableByName('iconButton/border/size', modes) ?? 1;
+  const iconColor = getVariableByName('iconButton/icon/color', modes) ?? '#0f0d0a';
+  const iconSize = getVariableByName('iconButton/icon/size', modes) ?? 18;
+
+  // Convert radius to React Native format (if 9999, use padding*2 for perfect circle)
+  // For a button, the size is determined by padding, so radius should be padding*2 for a circle
+  const buttonSize = padding * 2 + iconSize;
+  const borderRadius = radius === 9999 ? buttonSize / 2 : radius;
+
+  // Container base style
+  const baseContainerStyle = {
+    width: buttonSize,
+    height: buttonSize,
+    borderRadius: borderRadius,
+    borderWidth: borderSize,
+    borderColor: borderColor,
+    backgroundColor: backgroundColor,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: padding,
+    opacity: disabled ? 0.5 : 1
+  };
+
+  // Generate default accessibility label from icon name if not provided
+  const defaultAccessibilityLabel = accessibilityLabel || iconName.replace(/^ic_/, '').replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+
+  // Get web platform support props
+  const webProps = usePressableWebSupport({
+    restProps: rest,
+    onPress: disabled ? undefined : onPress,
+    disabled,
+    accessibilityLabel: defaultAccessibilityLabel,
+    webAccessibilityProps
+  });
+  return /*#__PURE__*/_jsx(Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: defaultAccessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityState: {
+      disabled,
+      ...accessibilityState
+    },
+    onPress: onPress,
+    disabled: disabled,
+    onPressIn: e => {
+      setIsPressed(true);
+      rest?.onPressIn?.(e);
+    },
+    onPressOut: e => {
+      setIsPressed(false);
+      rest?.onPressOut?.(e);
+    },
+    onFocus: e => {
+      setIsFocused(true);
+      rest?.onFocus?.(e);
+    },
+    onBlur: e => {
+      setIsFocused(false);
+      rest?.onBlur?.(e);
+    },
+    onHoverIn: e => {
+      setIsHovered(true);
+      rest?.onHoverIn?.(e);
+    },
+    onHoverOut: e => {
+      setIsHovered(false);
+      rest?.onHoverOut?.(e);
+    },
+    style: ({
+      pressed
+    }) => {
+      const pressedStyle = pressed && !disabled ? {
+        opacity: 0.7
+      } : null;
+      const hoverStyle = isHovered && !disabled ? {
+        opacity: 0.85
+      } : null;
+      const focusStyle = isFocused && !disabled ? {
+        borderWidth: 1,
+        borderColor: '#222'
+      } : null;
+      const manualPressStyle = isPressed && !disabled ? {
+        transform: [{
+          scale: 0.98
+        }]
+      } : null;
+      return [baseContainerStyle, style, pressedStyle, hoverStyle, focusStyle, manualPressStyle];
+    },
+    ...webProps,
+    children: /*#__PURE__*/_jsx(Icon, {
+      name: iconName,
+      size: iconSize,
+      color: iconColor,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    })
+  });
+}
+export default IconButton;
+//# sourceMappingURL=IconButton.js.map

package/lib/module/components/IconButton/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Pressable","getVariableByName","Icon","usePressableWebSupport","jsx","_jsx","IconButton","iconName","modes","onPress","disabled","style","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","isFocused","setIsFocused","isHovered","setIsHovered","isPressed","setIsPressed","radius","padding","backgroundColor","borderColor","borderSize","iconColor","iconSize","buttonSize","borderRadius","baseContainerStyle","width","height","borderWidth","overflow","alignItems","justifyContent","opacity","defaultAccessibilityLabel","replace","l","toUpperCase","webProps","restProps","undefined","accessibilityRole","onPressIn","e","onPressOut","onFocus","onBlur","onHoverIn","onHoverOut","pressed","pressedStyle","hoverStyle","focusStyle","manualPressStyle","transform","scale","children","name","size","color","accessibilityElementsHidden","importantForAccessibility"],"sourceRoot":"../../../../src","sources":["components/IconButton/IconButton.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/IconButton/IconButton.mdx

@@ -0,0 +1,76 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as IconButtonStories from './IconButton.stories';
+import IconButton from './IconButton';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={IconButtonStories} />
+
+# IconButton
+
+IconButton component that displays an icon within a pressable button container.
+
+## 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.
+
+### Button / Size
+- **Modes:** M | S
+- **Default:** M
+
+### Emphasis
+- **Modes:** High | Medium | Low
+- **Default:** High
+
+### Appearance.Brand
+- **Modes:** Primary | Secondary | Neutral
+- **Default:** Primary
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+## Usage
+
+<Canvas>
+  <Story of={IconButtonStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Set `accessibilityLabel` to describe the action; icon names are not announced.',
+    'Use `accessibilityState.disabled` for disabled buttons instead of removing them.',
+    'Add `accessibilityHint` for destructive or navigational actions.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Container</strong> — circular pressable with padding, border, and background tokens.</li>
+    <li><strong>Icon</strong> — centered vector icon hidden from the accessibility tree.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Use `modes` to align size/appearance with Buttons and AppBars.',
+    'Keep content to a single icon; avoid nesting text or additional pressables.',
+    'Pair with nearby labels or tooltips in dense layouts to reduce ambiguity.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={IconButton} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`iconButton/background`**
+- **`iconButton/border/color`**
+- **`iconButton/border/size`**
+- **`iconButton/icon/color`**
+- **`iconButton/icon/size`**
+- **`iconButton/padding`**
+- **`iconButton/radius`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/module/components/IconCapsule/IconCapsule.js

@@ -0,0 +1,85 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import Icon from '../../icons/Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * IconCapsule component that displays an icon within a circular or rounded container.
+ * 
+ * This component displays an icon (default: ic_card) within a styled capsule container.
+ * All styling values are resolved from Figma design tokens using the provided modes.
+ * 
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
+ * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Appearance": "Primary"})
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, defaults to iconName
+ * @param {string} [props.accessibilityRole] - Accessibility role (defaults to "image" for decorative icons)
+ * 
+ * @example
+ * ```jsx
+ * // Default icon (ic_card)
+ * <IconCapsule modes={{}} />
+ * 
+ * // Custom icon
+ * <IconCapsule iconName="ic_rupee" modes={{}} />
+ * 
+ * // With appearance mode
+ * <IconCapsule modes={{"Appearance": "Secondary"}} />
+ * 
+ * // With accessibility label
+ * <IconCapsule iconName="ic_card" accessibilityLabel="Credit card icon" />
+ * ```
+ */
+function IconCapsule({
+  iconName = "ic_card",
+  modes = {},
+  accessibilityLabel,
+  accessibilityRole = "image",
+  ...rest
+}) {
+  // Resolve design tokens using the provided modes
+  const size = getVariableByName('iconCapsule/size', modes) || 42;
+  const radius = getVariableByName('iconCapsule/radius', modes) || 9999;
+  const backgroundColor = getVariableByName('iconCapsule/background', modes) || '#cfa159';
+  const borderColor = getVariableByName('iconCapsuleborder/color', modes) || 'rgba(255,255,255,0)';
+  const borderSize = getVariableByName('iconCapsuleborder/size', modes) || 1;
+  const iconColor = getVariableByName('iconCapsuleicon/color', modes) || '#0f0d0a';
+  const iconSize = getVariableByName('iconCapsule/icon/size', modes) || 18;
+
+  // Convert radius to React Native format (if 9999, use size/2 for perfect circle)
+  const borderRadius = radius === 9999 ? size / 2 : radius;
+
+  // Container style
+  const containerStyle = {
+    width: size,
+    height: size,
+    borderRadius: borderRadius,
+    borderWidth: borderSize,
+    borderColor: borderColor,
+    backgroundColor: backgroundColor,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+
+  // Generate default accessibility label from icon name if not provided
+  const defaultAccessibilityLabel = accessibilityLabel || iconName.replace(/^ic_/, '').replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+  return /*#__PURE__*/_jsx(View, {
+    style: containerStyle,
+    accessibilityRole: accessibilityRole,
+    accessibilityLabel: defaultAccessibilityLabel,
+    ...rest,
+    children: /*#__PURE__*/_jsx(Icon, {
+      name: iconName,
+      size: iconSize,
+      color: iconColor,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    })
+  });
+}
+export default IconCapsule;
+//# sourceMappingURL=IconCapsule.js.map

package/lib/module/components/IconCapsule/IconCapsule.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","getVariableByName","Icon","jsx","_jsx","IconCapsule","iconName","modes","accessibilityLabel","accessibilityRole","rest","size","radius","backgroundColor","borderColor","borderSize","iconColor","iconSize","borderRadius","containerStyle","width","height","borderWidth","overflow","alignItems","justifyContent","defaultAccessibilityLabel","replace","l","toUpperCase","style","children","name","color","accessibilityElementsHidden","importantForAccessibility"],"sourceRoot":"../../../../src","sources":["components/IconCapsule/IconCapsule.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAwC,cAAc;AACnE,SAASC,iBAAiB,QAAQ,8CAA8C;AAChF,OAAOC,IAAI,MAAM,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AASnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,WAAWA,CAAC;EACnBC,QAAQ,GAAG,SAAS;EACpBC,KAAK,GAAG,CAAC,CAAC;EACVC,kBAAkB;EAClBC,iBAAiB,GAAG,OAAO;EAC3B,GAAGC;AACa,CAAC,EAAE;EACnB;EACA,MAAMC,IAAI,GAAGV,iBAAiB,CAAC,kBAAkB,EAAEM,KAAK,CAAC,IAAI,EAAE;EAC/D,MAAMK,MAAM,GAAGX,iBAAiB,CAAC,oBAAoB,EAAEM,KAAK,CAAC,IAAI,IAAI;EACrE,MAAMM,eAAe,GAAGZ,iBAAiB,CAAC,wBAAwB,EAAEM,KAAK,CAAC,IAAI,SAAS;EACvF,MAAMO,WAAW,GAAGb,iBAAiB,CAAC,yBAAyB,EAAEM,KAAK,CAAC,IAAI,qBAAqB;EAChG,MAAMQ,UAAU,GAAGd,iBAAiB,CAAC,wBAAwB,EAAEM,KAAK,CAAC,IAAI,CAAC;EAC1E,MAAMS,SAAS,GAAGf,iBAAiB,CAAC,uBAAuB,EAAEM,KAAK,CAAC,IAAI,SAAS;EAChF,MAAMU,QAAQ,GAAGhB,iBAAiB,CAAC,uBAAuB,EAAEM,KAAK,CAAC,IAAI,EAAE;;EAExE;EACA,MAAMW,YAAY,GAAGN,MAAM,KAAK,IAAI,GAAGD,IAAI,GAAG,CAAC,GAAGC,MAAM;;EAExD;EACA,MAAMO,cAAyB,GAAG;IAChCC,KAAK,EAAET,IAAI;IACXU,MAAM,EAAEV,IAAI;IACZO,YAAY,EAAEA,YAAY;IAC1BI,WAAW,EAAEP,UAAU;IACvBD,WAAW,EAAEA,WAAW;IACxBD,eAAe,EAAEA,eAAe;IAChCU,QAAQ,EAAE,QAAQ;IAClBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;;EAED;EACA,MAAMC,yBAAyB,GAAGlB,kBAAkB,IAAIF,QAAQ,CAACqB,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAACA,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAACA,OAAO,CAAC,OAAO,EAAEC,CAAC,IAAIA,CAAC,CAACC,WAAW,CAAC,CAAC,CAAC;EAE9I,oBACEzB,IAAA,CAACJ,IAAI;IACH8B,KAAK,EAAEX,cAAe;IACtBV,iBAAiB,EAAEA,iBAAkB;IACrCD,kBAAkB,EAAEkB,yBAA0B;IAAA,GAC1ChB,IAAI;IAAAqB,QAAA,eAER3B,IAAA,CAACF,IAAI;MACH8B,IAAI,EAAE1B,QAAS;MACfK,IAAI,EAAEM,QAAS;MACfgB,KAAK,EAAEjB,SAAU;MACjBkB,2BAA2B,EAAE,IAAK;MAClCC,yBAAyB,EAAC;IAAI,CAC/B;EAAC,CACE,CAAC;AAEX;AAEA,eAAe9B,WAAW","ignoreList":[]}