@stokr/components-library 2.3.65-beta.1 → 2.3.65-beta.10

package/dist/components/AdminDashboard/Table/ReactTable.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WrapperWithSubTable = exports.WithoutPagination = exports.WithSubTable = exports.WithStatusBasedHover = exports.WithRowSpecificHover = exports.WithRowHover = exports.WithHoverStylesAndContent = exports.WithHoverContent = exports.WithFixedColumnWidths = exports.WithCustomStyling = exports.DefaultWrapper = exports.Default = exports.CustomStyledTable = exports.BoxStyleTable = exports.BlueWrapper = exports.BlueTable = void 0;
+exports.default = exports.WrapperWithSubTable = exports.WithoutPagination = exports.WithSubTable = exports.WithStatusBasedHover = exports.WithRowSpecificHover = exports.WithRowHover = exports.WithRowClick = exports.WithHoverStylesAndContent = exports.WithHoverContent = exports.WithFixedColumnWidths = exports.WithCustomStyling = exports.SortableHeaders = exports.RowClickWithExpandedContent = exports.RowClickWithButtons = exports.PerColumnHeaderClick = exports.HeaderClick = exports.FilterableHeaders = exports.ExpandedWithRichContent = exports.DefaultWrapper = exports.Default = exports.CustomStyledTable = exports.CustomExpandedContent = exports.BoxStyleTable = exports.BlueWrapper = exports.BlueTable = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ReactTable = require("./ReactTable");
 var _ReactTableWrapper = require("./ReactTableWrapper");
@@ -403,4 +403,511 @@ CustomStyledTable.args = _objectSpread(_objectSpread({}, Default.args), {}, {
     textTransform: 'uppercase',
     letterSpacing: '0.5px'
   })
-});
+});
+
+// ============================================
+// NEW FEATURE STORIES: onRowClick & renderExpandedContent
+// ============================================
+
+// Row Click Handler - Basic
+const WithRowClick = exports.WithRowClick = Template.bind({});
+WithRowClick.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  onRowClick: (rowData, rowIndex, event) => {
+    alert("Clicked row ".concat(rowIndex + 1, ": ").concat(rowData.name, " (").concat(rowData.status, ")"));
+  }
+});
+WithRowClick.parameters = {
+  docs: {
+    description: {
+      story: 'Click anywhere on a row to trigger an action. Buttons and links inside cells will NOT trigger the row click.'
+    }
+  }
+};
+
+// Row Click with Buttons Inside - Demonstrates click isolation
+const columnsWithActions = [...columns.slice(0, 3), {
+  Header: 'Actions',
+  accessor: 'actions',
+  width: '40%',
+  Cell: _ref => {
+    let {
+      row
+    } = _ref;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '8px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      style: {
+        padding: '6px 12px',
+        backgroundColor: '#0050ca',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer'
+      },
+      onClick: () => alert("Edit button clicked for ".concat(row.original.name))
+    }, "Edit"), /*#__PURE__*/_react.default.createElement("button", {
+      style: {
+        padding: '6px 12px',
+        backgroundColor: '#dc3545',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer'
+      },
+      onClick: () => alert("Delete button clicked for ".concat(row.original.name))
+    }, "Delete"));
+  }
+}];
+const RowClickWithButtons = exports.RowClickWithButtons = Template.bind({});
+RowClickWithButtons.args = {
+  columns: columnsWithActions,
+  data: data,
+  noPagination: false,
+  onRowClick: (rowData, rowIndex) => {
+    alert("Row clicked: ".concat(rowData.name));
+  }
+};
+RowClickWithButtons.parameters = {
+  docs: {
+    description: {
+      story: 'Demonstrates that clicking buttons inside cells does NOT trigger onRowClick. Only clicking on non-interactive areas triggers the row click.'
+    }
+  }
+};
+
+// Custom Expanded Content - Simple
+const CustomExpandedContent = exports.CustomExpandedContent = Template.bind({});
+CustomExpandedContent.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  renderExpandedContent: (row, toggleExpanded) => {
+    var _row$original$subData;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '20px',
+        backgroundColor: '#f8f9fa',
+        borderRadius: '8px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("h4", {
+      style: {
+        margin: '0 0 12px 0'
+      }
+    }, "Details for ", row.original.name), /*#__PURE__*/_react.default.createElement("p", {
+      style: {
+        margin: '0 0 8px 0'
+      }
+    }, /*#__PURE__*/_react.default.createElement("strong", null, "ID:"), " ", row.original.id), /*#__PURE__*/_react.default.createElement("p", {
+      style: {
+        margin: '0 0 8px 0'
+      }
+    }, /*#__PURE__*/_react.default.createElement("strong", null, "Status:"), " ", row.original.status), /*#__PURE__*/_react.default.createElement("p", {
+      style: {
+        margin: '0 0 16px 0'
+      }
+    }, /*#__PURE__*/_react.default.createElement("strong", null, "Sub-items:"), " ", ((_row$original$subData = row.original.subData) === null || _row$original$subData === void 0 ? void 0 : _row$original$subData.length) || 0), /*#__PURE__*/_react.default.createElement("button", {
+      style: {
+        padding: '8px 16px',
+        backgroundColor: '#6c757d',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer'
+      },
+      onClick: () => toggleExpanded()
+    }, "Collapse"));
+  }
+});
+CustomExpandedContent.parameters = {
+  docs: {
+    description: {
+      story: 'Click on a row to expand and show custom content instead of a sub-table. The toggleExpanded function allows you to collapse the row programmatically.'
+    }
+  }
+};
+
+// Custom Expanded Content - Rich Component
+const ExpandedWithRichContent = exports.ExpandedWithRichContent = Template.bind({});
+ExpandedWithRichContent.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  renderExpandedContent: row => {
+    var _row$original$subData2;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '24px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: '24px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px',
+        backgroundColor: '#fff',
+        border: '1px solid #e1e1e1',
+        borderRadius: '8px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("h4", {
+      style: {
+        margin: '0 0 16px 0',
+        color: '#0050ca'
+      }
+    }, "User Information"), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, "Name:"), " ", row.original.name), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, "ID:"), " #", row.original.id), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, "Status:"), ' ', /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        padding: '2px 8px',
+        borderRadius: '12px',
+        backgroundColor: row.original.status === 'Active' ? '#d4edda' : row.original.status === 'Inactive' ? '#f8d7da' : '#fff3cd',
+        color: row.original.status === 'Active' ? '#155724' : row.original.status === 'Inactive' ? '#721c24' : '#856404',
+        fontSize: '12px'
+      }
+    }, row.original.status)))), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px',
+        backgroundColor: '#fff',
+        border: '1px solid #e1e1e1',
+        borderRadius: '8px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("h4", {
+      style: {
+        margin: '0 0 16px 0',
+        color: '#0050ca'
+      }
+    }, "Sub Items"), ((_row$original$subData2 = row.original.subData) === null || _row$original$subData2 === void 0 ? void 0 : _row$original$subData2.length) > 0 ? /*#__PURE__*/_react.default.createElement("ul", {
+      style: {
+        margin: 0,
+        paddingLeft: '20px'
+      }
+    }, row.original.subData.map(item => /*#__PURE__*/_react.default.createElement("li", {
+      key: item.detailId,
+      style: {
+        marginBottom: '8px'
+      }
+    }, item.detailName, " (ID: ", item.detailId, ")"))) : /*#__PURE__*/_react.default.createElement("p", {
+      style: {
+        margin: 0,
+        color: '#6c757d',
+        fontStyle: 'italic'
+      }
+    }, "No sub-items"))), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        marginTop: '16px',
+        display: 'flex',
+        gap: '8px',
+        justifyContent: 'flex-end'
+      }
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      style: {
+        padding: '8px 16px',
+        backgroundColor: '#0050ca',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer'
+      },
+      onClick: () => alert("Edit ".concat(row.original.name))
+    }, "Edit User"), /*#__PURE__*/_react.default.createElement("button", {
+      style: {
+        padding: '8px 16px',
+        backgroundColor: 'transparent',
+        color: '#0050ca',
+        border: '1px solid #0050ca',
+        borderRadius: '4px',
+        cursor: 'pointer'
+      },
+      onClick: () => alert("View full profile for ".concat(row.original.name))
+    }, "View Profile")));
+  }
+});
+ExpandedWithRichContent.parameters = {
+  docs: {
+    description: {
+      story: 'A more complex example showing a rich expanded content with multiple panels, styled badges, and action buttons.'
+    }
+  }
+};
+
+// Combined: Row Click + Custom Expanded Content
+const RowClickWithExpandedContent = exports.RowClickWithExpandedContent = Template.bind({});
+RowClickWithExpandedContent.args = {
+  columns: columnsWithActions,
+  data: data,
+  noPagination: false,
+  onRowClick: (rowData, rowIndex) => {
+    console.log('Row clicked (but not triggering anything in this demo)');
+  },
+  renderExpandedContent: (row, toggleExpanded) => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '20px',
+      backgroundColor: '#e3f2fd',
+      borderLeft: '4px solid #0050ca'
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      margin: '0 0 12px 0'
+    }
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Expanded details for:"), " ", row.original.name), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      margin: 0,
+      color: '#666'
+    }
+  }, "Click anywhere on the row to expand/collapse. Buttons work independently."))
+};
+RowClickWithExpandedContent.parameters = {
+  docs: {
+    description: {
+      story: 'Combined example: rows are clickable AND expandable. The onRowClick and renderExpandedContent work together. Buttons inside cells remain independent.'
+    }
+  }
+};
+
+// ============================================
+// HEADER CLICK STORIES: onHeaderClick & renderHeaderContent
+// ============================================
+
+// Basic Header Click - shows alert
+const HeaderClick = exports.HeaderClick = Template.bind({});
+HeaderClick.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  onHeaderClick: (column, event) => {
+    alert("Header clicked: ".concat(column.id || column.Header));
+  }
+});
+HeaderClick.parameters = {
+  docs: {
+    description: {
+      story: 'Click on any column header to trigger an action. Useful for implementing custom sorting or filtering.'
+    }
+  }
+};
+
+// Header Click with Sort State (External Control)
+const SortableTableDemo = () => {
+  const [sortConfig, setSortConfig] = _react.default.useState({
+    key: null,
+    direction: 'asc'
+  });
+  const [tableData, setTableData] = _react.default.useState(data);
+  const handleHeaderClick = column => {
+    // Skip non-sortable columns (like actions)
+    if (column.id === 'dropdown' || column.id === 'actions') return;
+    let direction = 'asc';
+    if (sortConfig.key === column.id && sortConfig.direction === 'asc') {
+      direction = 'desc';
+    }
+    setSortConfig({
+      key: column.id,
+      direction
+    });
+
+    // Sort the data
+    const sorted = [...data].sort((a, b) => {
+      const aVal = a[column.id];
+      const bVal = b[column.id];
+      if (aVal < bVal) return direction === 'asc' ? -1 : 1;
+      if (aVal > bVal) return direction === 'asc' ? 1 : -1;
+      return 0;
+    });
+    setTableData(sorted);
+  };
+
+  // Add sort indicators to headers
+  const renderHeaderContent = (column, defaultContent) => {
+    // Skip non-sortable columns
+    if (column.id === 'dropdown' || column.id === 'actions') {
+      return defaultContent;
+    }
+    const isSorted = sortConfig.key === column.id;
+    const arrow = isSorted ? sortConfig.direction === 'asc' ? ' ↑' : ' ↓' : '';
+    return /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '4px'
+      }
+    }, defaultContent, /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        opacity: isSorted ? 1 : 0.3
+      }
+    }, isSorted ? arrow : ' ↕'));
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Current sort:"), ' ', sortConfig.key ? "".concat(sortConfig.key, " (").concat(sortConfig.direction, ")") : 'None'), /*#__PURE__*/_react.default.createElement(_ReactTable.ReactTable, {
+    columns: columns,
+    data: tableData,
+    noPagination: false,
+    onHeaderClick: handleHeaderClick,
+    renderHeaderContent: renderHeaderContent
+  }));
+};
+const SortableHeaders = exports.SortableHeaders = {
+  render: () => /*#__PURE__*/_react.default.createElement(SortableTableDemo, null),
+  parameters: {
+    docs: {
+      description: {
+        story: 'External sorting controlled by parent component. Click headers to sort. Uses onHeaderClick for the action and renderHeaderContent for the sort indicators.'
+      }
+    }
+  }
+};
+
+// Header with Custom Dropdown Filter
+const FilterableTableDemo = () => {
+  const [filters, setFilters] = _react.default.useState({});
+  const [activeDropdown, setActiveDropdown] = _react.default.useState(null);
+  const [tableData, setTableData] = _react.default.useState(data);
+
+  // Get unique values for a column
+  const getUniqueValues = columnId => {
+    return [...new Set(data.map(row => row[columnId]))];
+  };
+  const handleFilter = (columnId, value) => {
+    const newFilters = _objectSpread({}, filters);
+    if (value === 'all') {
+      delete newFilters[columnId];
+    } else {
+      newFilters[columnId] = value;
+    }
+    setFilters(newFilters);
+    setActiveDropdown(null);
+
+    // Apply filters
+    let filtered = [...data];
+    Object.keys(newFilters).forEach(key => {
+      filtered = filtered.filter(row => row[key] === newFilters[key]);
+    });
+    setTableData(filtered);
+  };
+
+  // Custom header with filter dropdown
+  const renderHeaderContent = (column, defaultContent) => {
+    // Only add filter to specific columns
+    if (!['status'].includes(column.id)) {
+      return defaultContent;
+    }
+    const isActive = activeDropdown === column.id;
+    const hasFilter = filters[column.id];
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        position: 'relative'
+      }
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px'
+      },
+      "data-clickable": "true",
+      onClick: e => {
+        e.stopPropagation();
+        setActiveDropdown(isActive ? null : column.id);
+      }
+    }, defaultContent, /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        fontSize: '10px',
+        padding: '2px 6px',
+        borderRadius: '4px',
+        backgroundColor: hasFilter ? '#0050ca' : '#e1e1e1',
+        color: hasFilter ? 'white' : '#666'
+      }
+    }, hasFilter ? '✓' : '▼')), isActive && /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        position: 'absolute',
+        top: '100%',
+        left: 0,
+        marginTop: '4px',
+        backgroundColor: 'white',
+        border: '1px solid #e1e1e1',
+        borderRadius: '4px',
+        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+        zIndex: 100,
+        minWidth: '120px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '8px 12px',
+        cursor: 'pointer',
+        borderBottom: '1px solid #e1e1e1'
+      },
+      onClick: () => handleFilter(column.id, 'all')
+    }, "All"), getUniqueValues(column.id).map(value => /*#__PURE__*/_react.default.createElement("div", {
+      key: value,
+      style: {
+        padding: '8px 12px',
+        cursor: 'pointer',
+        backgroundColor: filters[column.id] === value ? '#f0f8ff' : 'transparent'
+      },
+      onClick: () => handleFilter(column.id, value)
+    }, value))));
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Active filters:"), ' ', Object.keys(filters).length > 0 ? Object.entries(filters).map(_ref2 => {
+    let [k, v] = _ref2;
+    return "".concat(k, ": ").concat(v);
+  }).join(', ') : 'None'), /*#__PURE__*/_react.default.createElement(_ReactTable.ReactTable, {
+    columns: columns,
+    data: tableData,
+    noPagination: false,
+    renderHeaderContent: renderHeaderContent
+  }));
+};
+const FilterableHeaders = exports.FilterableHeaders = {
+  render: () => /*#__PURE__*/_react.default.createElement(FilterableTableDemo, null),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Custom filter dropdown in the "Status" header. Click the dropdown icon to filter. Uses renderHeaderContent to add the dropdown UI.'
+      }
+    }
+  }
+};
+
+// Per-Column Header Click Handler
+const columnsWithColumnClick = [{
+  Header: 'ID (Click me!)',
+  accessor: 'id',
+  width: '15%',
+  onHeaderClick: column => {
+    alert('ID column has its own click handler!');
+  }
+}, {
+  Header: 'Name',
+  accessor: 'name',
+  width: '30%'
+}, {
+  Header: 'Status',
+  accessor: 'status',
+  width: '20%'
+}, {
+  Header: 'Actions (No click)',
+  accessor: 'dropdown',
+  width: '35%'
+  // No onHeaderClick - won't trigger global onHeaderClick either
+}];
+const PerColumnHeaderClick = exports.PerColumnHeaderClick = Template.bind({});
+PerColumnHeaderClick.args = {
+  columns: columnsWithColumnClick,
+  data: data,
+  noPagination: false,
+  onHeaderClick: column => {
+    alert("Global header click: ".concat(column.id));
+  }
+};
+PerColumnHeaderClick.parameters = {
+  docs: {
+    description: {
+      story: 'Columns can have their own onHeaderClick handlers. The "ID" column has a custom handler. Other columns use the global onHeaderClick. The "Actions" column has neither.'
+    }
+  }
+};

package/dist/components/Chips/Chip.js

@@ -28,10 +28,9 @@ const Chip = _ref => {
   }, props), /*#__PURE__*/_react.default.createElement(_ChipStyles.ChipText, null, children), tooltip && /*#__PURE__*/_react.default.createElement(_InfoIcon.default, _extends({
     title: tooltip,
     position: "top",
-    noIcon: true,
     noMarginLeft: true,
     noMarginRight: true
-  }, tooltipProps), /*#__PURE__*/_react.default.createElement(_ChipStyles.TooltipChipIcon, null)));
+  }, tooltipProps)));
 };
 exports.Chip = Chip;
 Chip.propTypes = {

package/dist/components/Icon/Icon.stories.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AllSvgIcons = exports.AllIcons = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Icon = require("./Icon.style");
+var _global = _interopRequireDefault(require("../../styles/global"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+var _transferIcon = require("../../static/images/transfer-icon.svg");
+var _plusIcon = require("../../static/images/plus-icon.svg");
+var _documentIcon = require("../../static/images/document-icon.svg");
+var _sentIcon = require("../../static/images/sent-icon.svg");
+var _searchIcon = require("../../static/images/search-icon.svg");
+var _checkIcon = require("../../static/images/check-icon.svg");
+var _crossIcon = require("../../static/images/cross-icon.svg");
+var _copy_icon = require("../../static/images/copy_icon.svg");
+var _usdcLogo = require("../../static/images/usdc-logo.svg");
+var _warningFilled = require("../../static/images/warning-filled.svg");
+var _download_icon = require("../../static/images/download_icon.svg");
+var _profInv = require("../../static/images/prof-inv.svg");
+var _upload = require("../../static/images/upload.svg");
+var _refresh = require("../../static/images/refresh.svg");
+var _logo = require("../../static/images/logo.svg");
+var _earlyAdopter = require("../../static/images/early-adopter.svg");
+var _eth = require("../../static/images/eth.svg");
+var _eur = require("../../static/images/eur.svg");
+var _faceScanIcon = require("../../static/images/face-scan-icon.svg");
+var _adminBadge = require("../../static/images/admin-badge.svg");
+var _arrowDownBlack = require("../../static/images/arrow-down-black.svg");
+var _capsLock = require("../../static/images/caps-lock.svg");
+var _Glassess = require("../../static/images/Glassess.svg");
+var _VerifiedBadge = require("../../static/images/VerifiedBadge.svg");
+var _playBtn = require("../../static/images/play-btn.svg");
+var _mangopay = require("../../static/images/mangopay.svg");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// SVG Icons from static/images
+
+// Map of all SVG icons for easy iteration
+const svgIcons = {
+  'transfer-icon': _transferIcon.ReactComponent,
+  'plus-icon': _plusIcon.ReactComponent,
+  'document-icon': _documentIcon.ReactComponent,
+  'sent-icon': _sentIcon.ReactComponent,
+  'search-icon': _searchIcon.ReactComponent,
+  'check-icon': _checkIcon.ReactComponent,
+  'cross-icon': _crossIcon.ReactComponent,
+  'copy-icon': _copy_icon.ReactComponent,
+  'usdc-logo': _usdcLogo.ReactComponent,
+  'warning-filled': _warningFilled.ReactComponent,
+  'download-icon': _download_icon.ReactComponent,
+  'prof-inv': _profInv.ReactComponent,
+  upload: _upload.ReactComponent,
+  refresh: _refresh.ReactComponent,
+  logo: _logo.ReactComponent,
+  'early-adopter': _earlyAdopter.ReactComponent,
+  eth: _eth.ReactComponent,
+  eur: _eur.ReactComponent,
+  'face-scan-icon': _faceScanIcon.ReactComponent,
+  'admin-badge': _adminBadge.ReactComponent,
+  'arrow-down-black': _arrowDownBlack.ReactComponent,
+  'caps-lock': _capsLock.ReactComponent,
+  glasses: _Glassess.ReactComponent,
+  'verified-badge': _VerifiedBadge.ReactComponent,
+  'play-btn': _playBtn.ReactComponent,
+  mangopay: _mangopay.ReactComponent
+};
+const IconsGrid = _styledComponents.default.div.withConfig({
+  displayName: "Iconstories__IconsGrid",
+  componentId: "sc-ue519l-0"
+})(["display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:24px;padding:24px;"]);
+const IconBox = _styledComponents.default.div.withConfig({
+  displayName: "Iconstories__IconBox",
+  componentId: "sc-ue519l-1"
+})(["display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;border:1px solid ", ";border-radius:4px;background:", ";&:hover{background:", ";}"], _colors.default.lightGrey, _colors.default.white, _colors.default.lightGrey);
+const IconName = _styledComponents.default.span.withConfig({
+  displayName: "Iconstories__IconName",
+  componentId: "sc-ue519l-2"
+})(["font-family:'Open Sans',sans-serif;font-size:11px;color:", ";text-align:center;word-break:break-word;"], _colors.default.grey2);
+var _default = exports.default = {
+  title: 'Components Library/Icon',
+  component: _Icon.Icon,
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(Story, null))]
+};
+const AllIcons = () => /*#__PURE__*/_react.default.createElement(IconsGrid, null, Object.entries(_Icon.iconsMap).map(_ref => {
+  let [name, iconCode] = _ref;
+  return /*#__PURE__*/_react.default.createElement(IconBox, {
+    key: name
+  }, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: iconCode,
+    size: 24,
+    color: _colors.default.dark
+  }), /*#__PURE__*/_react.default.createElement(IconName, null, name));
+}));
+exports.AllIcons = AllIcons;
+const SvgIconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Iconstories__SvgIconWrapper",
+  componentId: "sc-ue519l-3"
+})(["width:32px;height:32px;display:flex;align-items:center;justify-content:center;svg{max-width:100%;max-height:100%;}"]);
+const AllSvgIcons = () => /*#__PURE__*/_react.default.createElement(IconsGrid, null, Object.entries(svgIcons).map(_ref2 => {
+  let [name, SvgComponent] = _ref2;
+  return /*#__PURE__*/_react.default.createElement(IconBox, {
+    key: name
+  }, /*#__PURE__*/_react.default.createElement(SvgIconWrapper, null, /*#__PURE__*/_react.default.createElement(SvgComponent, null)), /*#__PURE__*/_react.default.createElement(IconName, null, name));
+}));
+exports.AllSvgIcons = AllSvgIcons;