@webority/mobile-ui 0.0.39 → 0.1.0

package/lib/module/utils/squircle.js

@@ -1,151 +1 @@
-"use strict";
-
-/**
- * Smooth ("squircle") corners as an SVG path.
- *
- * iOS draws Apple's continuous curve natively (`borderCurve: 'continuous'`,
- * see `./corners`). Android has no such style, so the components draw the
- * shape themselves with react-native-svg and this path.
- *
- * Ported from figma-squircle 1.1.0 by Tien Pham (MIT licence, copyright
- * 2021, https://github.com/phamfoo/figma-squircle), which follows Figma's
- * "Desperately seeking squircles" article and MartinRGB's approximation.
- * Only the uniform-radius branch is kept: the components draw the shape
- * only when all four corners agree and leave the platform's own corner in
- * place otherwise. The curve is Figma's, not Apple's; the two are close
- * but not identical.
- */
-
-/** Figma's "iOS" corner-smoothing preset. */
-export const SQUIRCLE_SMOOTHING = 0.6;
-/**
- * Below this radius the curve is not worth an overlay: the squircle bulges
- * past the circle by about a sixth of the radius at the diagonal (1 dp at
- * 6 dp, computed from the path), which is under a device pixel on most
- * screens. Checkbox corners and small chips stay native.
- */
-export const SQUIRCLE_MIN_RADIUS = 6;
-
-/**
- * Whether a squircle is worth drawing for this box: a radius under
- * `SQUIRCLE_MIN_RADIUS` changes nothing a user can see, and once the radius
- * reaches half the shorter side (a pill) there is no straight run left for
- * the curve to blend into.
- */
-export const squircleApplies = (width, height, radius) => radius >= SQUIRCLE_MIN_RADIUS && width > 0 && height > 0 && 2 * radius < Math.min(width, height);
-
-/**
- * The native corner radius an OPAQUE host keeps under the overlay.
- *
- * Figma's squircle sits inside the circle of the same radius: it keeps the
- * circle's arc at the diagonal and cuts deeper along the tangents. A host
- * that must keep an opaque native background (an elevated surface, whose
- * Android shadow is cast from its own outline) would therefore show its
- * circular corner peeking out around the shape. Doubling the native radius
- * pushes that circle inside the squircle everywhere (checked numerically at
- * 1.8x and above); the shadow follows the deeper corner with no visible
- * change. Capped at half the shorter side, as a pill would be.
- */
-export const squircleHostRadius = (width, height, radius) => Math.min(2 * radius, Math.min(width, height) / 2);
-const toRadians = degrees => degrees * Math.PI / 180;
-const num = value => {
-  const fixed = value.toFixed(4);
-  // Keep "-0.0000" from leaking into the path.
-  return fixed === '-0.0000' ? '0.0000' : fixed;
-};
-
-/** Figure 11.1 / 12.2 of Figma's article: the eight control points of one corner. */
-const cornerParams = (cornerRadius, smoothing, budget) => {
-  // p = (1 + smoothing) * q, and q = R because the corner angle is 90 degrees.
-  let p = (1 + smoothing) * cornerRadius;
-  // Figma's behaviour: when the smoothing does not fit, cap it so p stays
-  // inside the budget (half the shorter side).
-  const maxSmoothing = budget / cornerRadius - 1;
-  const cornerSmoothing = Math.min(smoothing, maxSmoothing);
-  p = Math.min(p, budget);
-
-  // A plain rounded rectangle has a 90 degree arc; smoothing shortens it.
-  const arcMeasure = 90 * (1 - cornerSmoothing);
-  const arcSectionLength = Math.sin(toRadians(arcMeasure / 2)) * cornerRadius * Math.SQRT2;
-
-  // The distance between control points P3 and P4 in the article.
-  const angleAlpha = (90 - arcMeasure) / 2;
-  const p3ToP4Distance = cornerRadius * Math.tan(toRadians(angleAlpha / 2));
-  const angleBeta = 45 * cornerSmoothing;
-  const c = p3ToP4Distance * Math.cos(toRadians(angleBeta));
-  const d = c * Math.tan(toRadians(angleBeta));
-  const b = (p - arcSectionLength - c - d) / 3;
-  const a = 2 * b;
-  return {
-    a,
-    b,
-    c,
-    d,
-    p,
-    arcSectionLength,
-    cornerRadius
-  };
-};
-const topRight = ({
-  cornerRadius: r,
-  a,
-  b,
-  c,
-  d,
-  arcSectionLength: s
-}) => `c ${num(a)} 0 ${num(a + b)} 0 ${num(a + b + c)} ${num(d)} ` + `a ${num(r)} ${num(r)} 0 0 1 ${num(s)} ${num(s)} ` + `c ${num(d)} ${num(c)} ${num(d)} ${num(b + c)} ${num(d)} ${num(a + b + c)}`;
-const bottomRight = ({
-  cornerRadius: r,
-  a,
-  b,
-  c,
-  d,
-  arcSectionLength: s
-}) => `c 0 ${num(a)} 0 ${num(a + b)} ${num(-d)} ${num(a + b + c)} ` + `a ${num(r)} ${num(r)} 0 0 1 ${num(-s)} ${num(s)} ` + `c ${num(-c)} ${num(d)} ${num(-(b + c))} ${num(d)} ${num(-(a + b + c))} ${num(d)}`;
-const bottomLeft = ({
-  cornerRadius: r,
-  a,
-  b,
-  c,
-  d,
-  arcSectionLength: s
-}) => `c ${num(-a)} 0 ${num(-(a + b))} 0 ${num(-(a + b + c))} ${num(-d)} ` + `a ${num(r)} ${num(r)} 0 0 1 ${num(-s)} ${num(-s)} ` + `c ${num(-d)} ${num(-c)} ${num(-d)} ${num(-(b + c))} ${num(-d)} ${num(-(a + b + c))}`;
-const topLeft = ({
-  cornerRadius: r,
-  a,
-  b,
-  c,
-  d,
-  arcSectionLength: s
-}) => `c 0 ${num(-a)} 0 ${num(-(a + b))} ${num(d)} ${num(-(a + b + c))} ` + `a ${num(r)} ${num(r)} 0 0 1 ${num(s)} ${num(-s)} ` + `c ${num(c)} ${num(-d)} ${num(b + c)} ${num(-d)} ${num(a + b + c)} ${num(-d)}`;
-
-/**
- * The closed path of a smooth-cornered rectangle whose bounds are
- * `(inset, inset)` to `(width - inset, height - inset)`, drawn clockwise
- * from the top edge. Every corner shares one radius; the radius and the
- * smoothing are capped so the curve fits the box (Figma's own behaviour).
- */
-export function squirclePath({
-  width,
-  height,
-  radius,
-  smoothing = SQUIRCLE_SMOOTHING,
-  inset = 0
-}) {
-  const w = Math.max(0, width - 2 * inset);
-  const h = Math.max(0, height - 2 * inset);
-  const x0 = inset;
-  const y0 = inset;
-  const r = Math.max(0, radius - inset);
-  const budget = Math.min(w, h) / 2;
-  const cornerRadius = Math.min(r, budget);
-  if (cornerRadius <= 0) {
-    return `M ${num(x0)} ${num(y0)} L ${num(x0 + w)} ${num(y0)} L ${num(x0 + w)} ${num(y0 + h)} L ${num(x0)} ${num(y0 + h)} Z`;
-  }
-  const corner = cornerParams(cornerRadius, Math.min(1, Math.max(0, smoothing)), budget);
-  const {
-    p
-  } = corner;
-  return `M ${num(x0 + w - p)} ${num(y0)} ` + `${topRight(corner)} ` + `L ${num(x0 + w)} ${num(y0 + h - p)} ` + `${bottomRight(corner)} ` + `L ${num(x0 + p)} ${num(y0 + h)} ` + `${bottomLeft(corner)} ` + `L ${num(x0)} ${num(y0 + p)} ` + `${topLeft(corner)} Z`;
-}
-//# sourceMappingURL=squircle.js.map
+export const SQUIRCLE_SMOOTHING=.6;export const SQUIRCLE_MIN_RADIUS=6;export const squircleApplies=($,t,a)=>a>=6&&$>0&&t>0&&2*a<Math.min($,t);export const squircleHostRadius=($,t,a)=>Math.min(2*a,Math.min($,t)/2);const toRadians=$=>$*Math.PI/180,num=$=>{const t=$.toFixed(4);return"-0.0000"===t?"0.0000":t};export function squirclePath({width:$,height:t,radius:a,smoothing:n=.6,inset:c=0}){const e=Math.max(0,$-2*c),i=Math.max(0,t-2*c),r=c,o=c,h=Math.max(0,a-c),s=Math.min(e,i)/2,M=Math.min(h,s);if(M<=0)return`M ${num(r)} ${num(o)} L ${num(r+e)} ${num(o)} L ${num(r+e)} ${num(o+i)} L ${num(r)} ${num(o+i)} Z`;const u=(($,t,a)=>{let n=(1+t)*$;const c=a/$-1,e=Math.min(t,c);n=Math.min(n,a);const i=90*(1-e),r=Math.sin(toRadians(i/2))*$*Math.SQRT2,o=(90-i)/2,h=45*e,s=$*Math.tan(toRadians(o/2))*Math.cos(toRadians(h)),M=s*Math.tan(toRadians(h)),u=(n-r-s-M)/3;return{a:2*u,b:u,c:s,d:M,p:n,arcSectionLength:r,cornerRadius:$}})(M,Math.min(1,Math.max(0,n)),s),{p:d}=u;return`M ${num(r+e-d)} ${num(o)} ${(({cornerRadius:$,a:t,b:a,c:n,d:c,arcSectionLength:e})=>`c ${num(t)} 0 ${num(t+a)} 0 ${num(t+a+n)} ${num(c)} a ${num($)} ${num($)} 0 0 1 ${num(e)} ${num(e)} c ${num(c)} ${num(n)} ${num(c)} ${num(a+n)} ${num(c)} ${num(t+a+n)}`)(u)} L ${num(r+e)} ${num(o+i-d)} ${(({cornerRadius:$,a:t,b:a,c:n,d:c,arcSectionLength:e})=>`c 0 ${num(t)} 0 ${num(t+a)} ${num(-c)} ${num(t+a+n)} a ${num($)} ${num($)} 0 0 1 ${num(-e)} ${num(e)} c ${num(-n)} ${num(c)} ${num(-(a+n))} ${num(c)} ${num(-(t+a+n))} ${num(c)}`)(u)} L ${num(r+d)} ${num(o+i)} ${(({cornerRadius:$,a:t,b:a,c:n,d:c,arcSectionLength:e})=>`c ${num(-t)} 0 ${num(-(t+a))} 0 ${num(-(t+a+n))} ${num(-c)} a ${num($)} ${num($)} 0 0 1 ${num(-e)} ${num(-e)} c ${num(-c)} ${num(-n)} ${num(-c)} ${num(-(a+n))} ${num(-c)} ${num(-(t+a+n))}`)(u)} L ${num(r)} ${num(o+d)} ${(({cornerRadius:$,a:t,b:a,c:n,d:c,arcSectionLength:e})=>`c 0 ${num(-t)} 0 ${num(-(t+a))} ${num(c)} ${num(-(t+a+n))} a ${num($)} ${num($)} 0 0 1 ${num(e)} ${num(-e)} c ${num(n)} ${num(-c)} ${num(a+n)} ${num(-c)} ${num(t+a+n)} ${num(-c)}`)(u)} Z`}

package/lib/module/utils/warnUnknownProps.js

@@ -1,42 +1 @@
-"use strict";
-
-import { Logger } from '@webority/mobile-core';
-
-/**
- * Dev-time warning for props a component does not accept.
- *
- * This exists for a class of bug that nothing in a JS consumer's toolchain
- * objects to. A component destructures the props it knows and ignores the rest,
- * so a renamed or mistyped prop is simply dropped — silently, at every call
- * site. The web library hit this three times in one day: `body` instead of
- * `message` left nine destructive confirm dialogs with no explanatory text, and
- * `name` instead of `icon` emptied an entire actions column across 23 call
- * sites. Neither failed a build, a lint or a test.
- *
- * Our components are TypeScript, so a TS consumer is already protected at
- * compile time. Several apps in the fleet are plain JS, and they get nothing —
- * which is who this is for. The check therefore has to be a runtime one, and it
- * has to run where the mistake is made: the consumer's dev server.
- *
- * DEV ONLY — the `__DEV__` guard means it costs a release build nothing.
- */
-export const warnUnknownProps = (componentName, rest) => {
-  if (!__DEV__ || !rest) {
-    return;
-  }
-  const unknown = Object.keys(rest).filter(key => !isAllowed(key));
-  if (unknown.length === 0) {
-    return;
-  }
-  Logger.warn(`[${componentName}] received prop(s) it does not accept: ${unknown.join(', ')}. ` + "They were ignored — check for a rename or a typo against the component's props.");
-};
-
-/**
- * Keys that legitimately arrive through `...rest` and must never warn. The list
- * is deliberately generous: a false positive fires on correct code, and a
- * warning people learn to ignore is worse than no warning at all.
- */
-const ALLOWED_EXACT = new Set(['children', 'key', 'ref', 'style', 'testID', 'collapsable', 'nativeID', 'pointerEvents', 'removeClippedSubviews', 'renderToHardwareTextureAndroid', 'shouldRasterizeIOS', 'needsOffscreenAlphaCompositing', 'hitSlop', 'onLayout', 'importantForAccessibility', 'role']);
-const ALLOWED_PREFIXES = ['accessibility', 'aria-', 'on', 'data-'];
-const isAllowed = key => ALLOWED_EXACT.has(key) || ALLOWED_PREFIXES.some(p => key.startsWith(p));
-//# sourceMappingURL=warnUnknownProps.js.map
+import{Logger as e}from"@webority/mobile-core";export const warnUnknownProps=(o,t)=>{if(!__DEV__||!t)return;const r=Object.keys(t).filter(e=>!isAllowed(e));0!==r.length&&e.warn(`[${o}] received prop(s) it does not accept: ${r.join(", ")}. They were ignored — check for a rename or a typo against the component's props.`)};const o=new Set(["children","key","ref","style","testID","collapsable","nativeID","pointerEvents","removeClippedSubviews","renderToHardwareTextureAndroid","shouldRasterizeIOS","needsOffscreenAlphaCompositing","hitSlop","onLayout","importantForAccessibility","role"]),t=["accessibility","aria-","on","data-"],isAllowed=e=>o.has(e)||t.some(o=>e.startsWith(o));

package/lib/typescript/commonjs/components/AppBar/AppBar.d.ts

@@ -2,10 +2,19 @@ import React from 'react';
 import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
 import { Animated } from 'react-native';
 import type { HapticType } from '../../utils/hapticUtils';
+import type { TextVariant } from '../Text/Text';
 export type AppBarVariant = 'default' | 'large' | 'compact';
 export type AppBarTitleAlignment = 'left' | 'center';
 export interface AppBarAction {
-    icon: React.ReactNode;
+    /** The glyph. Give `icon` or `text`; with neither the button draws nothing. */
+    icon?: React.ReactNode;
+    /**
+     * A text action: a pill-less label in the link colour, at least 44 by 44.
+     * `accessibilityLabel` defaults to this text. Wins over `icon` when both are set.
+     */
+    text?: string;
+    /** Draws a small unread dot on the button's corner, with no count. */
+    dot?: boolean;
     onPress: () => void;
     accessibilityLabel?: string;
     testID?: string;
@@ -19,6 +28,38 @@ export interface AppBarProps {
     titleAlignment?: AppBarTitleAlignment;
     leftAction?: AppBarAction;
     rightActions?: AppBarRightAction[];
+    /** Any node in the left slot, after `leftAction` (a profile avatar button, say). */
+    leading?: React.ReactNode;
+    /** Any node in the right slot, after `rightActions`. */
+    trailing?: React.ReactNode;
+    /**
+     * Draws a back arrow as the left action, labelled "Back", and calls this on press.
+     * Navigation-agnostic: pass `navigation.goBack`. An explicit `leftAction` wins.
+     */
+    onBack?: () => void;
+    /**
+     * The page gutter: the distance from the screen edge to the VISIBLE edge of the outermost
+     * glyph. The bar subtracts the empty space inside an action button (button size minus
+     * `theme.components.appBar.iconSize`, halved; the text padding for a text action). A
+     * `leading` or `trailing` node is taken to draw to its own edge. Default: the bar's own
+     * `spacing.xs` padding.
+     */
+    gutter?: number;
+    /**
+     * Title typography: a `Text` variant, or one registered in `theme.textVariants`.
+     * Replaces the bar variant's size and weight. Default: the bar variant's own title style.
+     */
+    titleVariant?: TextVariant | (string & {});
+    /**
+     * Exact space between the left slot and the title. When set, both side slots shrink to
+     * their content (no 48pt minimum), action buttons drop their outer margin, and the title
+     * sits this far from the left slot, or on the bar padding when that slot is empty.
+     */
+    titleOffset?: number;
+    /** Bar height in pt, excluding the safe-area top. Overrides the variant's height; ignored while collapsing. */
+    height?: number;
+    /** Hairline under the bar. Default `true` unless `transparent`. */
+    divider?: boolean;
     variant?: AppBarVariant;
     transparent?: boolean;
     /**

package/lib/typescript/commonjs/components/AppIcon/AppIcon.d.ts

@@ -27,14 +27,27 @@ import { CURATED_ICON_NAMES } from './glyphs.g';
 import type { IconVariantName } from './variants.g';
 export type { CuratedIconName, IconName };
 export { CURATED_ICON_NAMES, ICON_NAMES };
+/**
+ * A curated name and an Iconsax name can share a spelling (`lock`,
+ * `receipt`); the curated glyph wins, so `<name>-iconsax` reaches the
+ * catalogue glyph it shadows: `lock-iconsax` is Iconsax's own lock.
+ */
+export declare const ICONSAX_SUFFIX = "-iconsax";
+export type IconsaxShadowedName = `${CuratedIconName}${typeof ICONSAX_SUFFIX}`;
+/** Every name AppIcon draws: curated, catalogue, and the shadowed catalogue spellings. */
+export type AppIconName = IconName | IconsaxShadowedName;
 /** `linear` is the default Iconsax style; the rest come from the lazy modules. */
 export type IconVariant = 'linear' | IconVariantName;
 export type AppIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /** Pixel sizes behind the size tokens; a raw number is accepted too. */
 export declare const APP_ICON_SIZES: Record<AppIconSize, number>;
 export interface AppIconProps {
-    /** Icon name; the union is generated from the design system's icon map plus the full catalogue. */
-    name: IconName;
+    /**
+     * Icon name; the union is generated from the design system's icon map plus
+     * the full catalogue. Append `-iconsax` to a curated name to draw the
+     * Iconsax glyph it shadows (`lock-iconsax`).
+     */
+    name: AppIconName;
     /** Size token or a pixel number. Default `'md'` (22). */
     size?: AppIconSize | number;
     /** Any colour string. Default `theme.colors.text.primary`. */

package/lib/typescript/commonjs/components/AppIcon/catalog.g.d.ts

@@ -1,4 +1,4 @@
-export type IconName = 'aave' | 'activity' | 'add' | 'add-circle' | 'add-square' | 'additem' | 'airdrop' | 'airplane' | 'airplane-square' | 'airpod' | 'airpods' | 'alarm' | 'alert-circle' | 'alert-triangle' | 'align-bottom' | 'align-horizontally' | 'align-left' | 'align-right' | 'align-top' | 'align-vertically' | 'android' | 'ankr' | 'apple' | 'aquarius' | 'archive' | 'archive-add' | 'archive-book' | 'archive-box' | 'archive-minus' | 'archive-slash' | 'archive-tick' | 'arrange-horizontal' | 'arrange-horizontal-circle' | 'arrange-horizontal-square' | 'arrange-vertical' | 'arrange-vertical-circle' | 'arrange-vertical-square' | 'arrow' | 'arrow-circle-down' | 'arrow-circle-down-2' | 'arrow-circle-left' | 'arrow-circle-left-2' | 'arrow-circle-right' | 'arrow-circle-right-2' | 'arrow-circle-up' | 'arrow-circle-up-2' | 'arrow-down' | 'arrow-down-2' | 'arrow-down-3' | 'arrow-down-up' | 'arrow-forward' | 'arrow-forward-square' | 'arrow-left' | 'arrow-left-2' | 'arrow-left-3' | 'arrow-right' | 'arrow-right-2' | 'arrow-right-3' | 'arrow-rotate-left' | 'arrow-rotate-right' | 'arrow-square' | 'arrow-square-down' | 'arrow-square-left' | 'arrow-square-right' | 'arrow-square-up' | 'arrow-swap-horizontal' | 'arrow-swap-vertical' | 'arrow-up' | 'arrow-up-2' | 'arrow-up-3' | 'arrow-up-right' | 'attach-circle' | 'attach-square' | 'audio-square' | 'augur' | 'autobrightness' | 'autonio' | 'avalanche' | 'award' | 'back' | 'back-square' | 'backward' | 'backward-10-seconds' | 'backward-15-seconds' | 'backward-5-seconds' | 'backward-item' | 'badge-check' | 'bag' | 'bag-2' | 'bag-cross' | 'bag-cross-1' | 'bag-happy' | 'bag-tick' | 'bag-tick-2' | 'bag-timer' | 'bank' | 'barcode' | 'battery-charging' | 'battery-disable' | 'battery-empty' | 'battery-empty-1' | 'battery-full' | 'be' | 'bell' | 'bezier' | 'bill' | 'binance-coin' | 'binance-usd' | 'bitcoin' | 'bitcoin-card' | 'bitcoin-convert' | 'bitcoin-refresh' | 'blend' | 'blend-2' | 'blogger' | 'bluetooth' | 'bluetooth-2' | 'bluetooth-circle' | 'bluetooth-rectangle' | 'blur' | 'book' | 'book-1' | 'book-saved' | 'book-square' | 'bookmark' | 'bookmark-2' | 'bootstrap' | 'box' | 'box-1' | 'box-2' | 'box-add' | 'box-remove' | 'box-seam' | 'box-search' | 'box-tick' | 'box-time' | 'briefcase' | 'brifecase-cross' | 'brifecase-tick' | 'brifecase-timer' | 'brodcast' | 'broom' | 'brush' | 'brush-2' | 'brush-3' | 'brush-big' | 'brush-square' | 'bubble' | 'bucket' | 'bucket-circle' | 'bucket-square' | 'bug' | 'building' | 'building-2' | 'building-3' | 'building-4' | 'buildings' | 'buildings-2' | 'buliding' | 'bullseye' | 'bus' | 'buy-crypto' | 'cake' | 'calculator' | 'calendar' | 'calendar-1' | 'calendar-2' | 'calendar-add' | 'calendar-check' | 'calendar-circle' | 'calendar-dots' | 'calendar-edit' | 'calendar-remove' | 'calendar-search' | 'calendar-tick' | 'call' | 'call-add' | 'call-calling' | 'call-incoming' | 'call-minus' | 'call-outgoing' | 'call-received' | 'call-remove' | 'call-slash' | 'camera' | 'camera-slash' | 'candle' | 'candle-2' | 'car' | 'card' | 'card-add' | 'card-coin' | 'card-edit' | 'card-pos' | 'card-receive' | 'card-remove' | 'card-remove-1' | 'card-send' | 'card-slash' | 'card-tick' | 'card-tick-1' | 'cardano' | 'cards' | 'cash-stack' | 'category' | 'category-2' | 'cd' | 'celo' | 'celsius' | 'chainlink' | 'chart' | 'chart-1' | 'chart-2' | 'chart-21' | 'chart-circle' | 'chart-column' | 'chart-fail' | 'chart-square' | 'chart-success' | 'chat' | 'chat-dots' | 'check' | 'check-check' | 'check-circle' | 'chemical-glass' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevrons-left' | 'chevrons-right' | 'chevrons-up-down' | 'chrome' | 'circle' | 'circle-help' | 'civic' | 'clipboard' | 'clipboard-check' | 'clipboard-close' | 'clipboard-export' | 'clipboard-import' | 'clipboard-text' | 'clipboard-tick' | 'clock' | 'close-circle' | 'close-square' | 'cloud' | 'cloud-add' | 'cloud-change' | 'cloud-connection' | 'cloud-cross' | 'cloud-drizzle' | 'cloud-fog' | 'cloud-lightning' | 'cloud-minus' | 'cloud-notif' | 'cloud-plus' | 'cloud-remove' | 'cloud-snow' | 'cloud-sunny' | 'code' | 'code-1' | 'code-circle' | 'coffee' | 'coin' | 'coin-1' | 'coins' | 'color-swatch' | 'colorfilter' | 'colors-square' | 'command' | 'command-square' | 'component' | 'computing' | 'contact' | 'convert' | 'convert-3-d-cube' | 'convert-card' | 'convertshape' | 'convertshape-2' | 'copy' | 'copy-success' | 'copyright' | 'courthouse' | 'cpu' | 'cpu-charge' | 'cpu-setting' | 'creative-commons' | 'credit-card' | 'crop' | 'crown' | 'crown-1' | 'cup' | 'cursor' | 'cut' | 'dai' | 'danger' | 'dash' | 'data' | 'data-2' | 'decred' | 'dent' | 'designtools' | 'device-message' | 'devices' | 'diagram' | 'diagram-3' | 'diamonds' | 'direct' | 'direct-down' | 'direct-inbox' | 'direct-left' | 'direct-normal' | 'direct-notification' | 'direct-right' | 'direct-send' | 'direct-up' | 'directbox-default' | 'directbox-notif' | 'directbox-receive' | 'directbox-send' | 'discount-circle' | 'discount-shape' | 'discover' | 'dislike' | 'display' | 'document' | 'document-cloud' | 'document-code' | 'document-code-2' | 'document-copy' | 'document-download' | 'document-favorite' | 'document-filter' | 'document-forward' | 'document-like' | 'document-previous' | 'document-sketch' | 'document-text' | 'document-text-1' | 'document-upload' | 'dollar-circle' | 'dollar-square' | 'download' | 'dribbble' | 'driver' | 'driver-2' | 'driver-refresh' | 'driving' | 'drop' | 'dropbox' | 'edit' | 'edit-2' | 'educare' | 'electricity' | 'element' | 'element-2' | 'element-3' | 'element-4' | 'element-equal' | 'element-plus' | 'emercoin' | 'emoji-happy' | 'emoji-normal' | 'emoji-sad' | 'emoji-smile' | 'empty-wallet' | 'empty-wallet-add' | 'empty-wallet-change' | 'empty-wallet-remove' | 'empty-wallet-tick' | 'empty-wallet-time' | 'enjin-coin' | 'eos' | 'eraser' | 'eraser-square' | 'ethereum' | 'ethereum-classic' | 'export' | 'export-circle' | 'export-curve' | 'export-square' | 'external-drive' | 'external-link' | 'eye' | 'eye-off' | 'eye-slash' | 'facebook' | 'factory' | 'fatrows' | 'favorite-chart' | 'figma' | 'figma-1' | 'file-plus-2' | 'file-text' | 'files' | 'filter' | 'filter-add' | 'filter-edit' | 'filter-remove' | 'filter-search' | 'filter-square' | 'filter-tick' | 'finger-cricle' | 'finger-scan' | 'firstline' | 'flag' | 'flag-2' | 'flash' | 'flash-circle' | 'flash-slash' | 'flashy' | 'folder' | 'folder-2' | 'folder-add' | 'folder-cloud' | 'folder-connection' | 'folder-cross' | 'folder-favorite' | 'folder-kanban' | 'folder-minus' | 'folder-open' | 'folder-plus' | 'forbidden' | 'forbidden-2' | 'format-circle' | 'format-square' | 'forward' | 'forward-10-seconds' | 'forward-15-seconds' | 'forward-5-seconds' | 'forward-item' | 'framer' | 'ftx-token' | 'gallery' | 'gallery-add' | 'gallery-edit' | 'gallery-export' | 'gallery-favorite' | 'gallery-import' | 'gallery-remove' | 'gallery-slash' | 'gallery-tick' | 'game' | 'gameboy' | 'gas-station' | 'gauge' | 'gemini' | 'gemini-2' | 'ghost' | 'gift' | 'glass' | 'global' | 'global-edit' | 'global-refresh' | 'global-search' | 'globe' | 'globe2' | 'google' | 'google-drive' | 'google-play' | 'gps' | 'gps-slash' | 'grammerly' | 'graph' | 'grid' | 'grid-1' | 'grid-2' | 'grid-3' | 'grid-4' | 'grid-5' | 'grid-6' | 'grid-7' | 'grid-8' | 'grid-9' | 'grid-edit' | 'grid-eraser' | 'grid-lock' | 'hamberger-menu' | 'happyemoji' | 'hard-hat' | 'harmony' | 'hashtag' | 'hashtag-down' | 'hashtag-square' | 'hashtag-up' | 'headphone' | 'headphones' | 'health' | 'heart' | 'heart-add' | 'heart-circle' | 'heart-edit' | 'heart-remove' | 'heart-search' | 'heart-slash' | 'heart-tick' | 'hedera-hashgraph' | 'hex' | 'hierarchy' | 'hierarchy-2' | 'hierarchy-3' | 'hierarchy-square' | 'hierarchy-square-2' | 'hierarchy-square-3' | 'history' | 'home' | 'home-2' | 'home-3' | 'home-hashtag' | 'home-trend-down' | 'home-trend-up' | 'home-wifi' | 'hospital' | 'house' | 'house-2' | 'html-3' | 'html-5' | 'huobi-token' | 'i-24-support' | 'i-3-d-cube-scan' | 'i-3-d-rotate' | 'i-3-d-square' | 'i-3-dcube' | 'i-3-square' | 'icon' | 'illustrator' | 'image' | 'import' | 'import-circle' | 'import-curve' | 'import-square' | 'inbox' | 'info' | 'info-circle' | 'information' | 'instagram' | 'iost' | 'java-script' | 'js' | 'judge' | 'kanban' | 'key' | 'key-square' | 'keyboard' | 'keyboard-open' | 'kyber-network' | 'lamp' | 'lamp-charge' | 'lamp-on' | 'lamp-slash' | 'language-circle' | 'language-square' | 'layer' | 'layout-dashboard' | 'layout-grid' | 'layout-maximize' | 'level' | 'lifebuoy' | 'lightbulb' | 'like' | 'like-1' | 'like-dislike' | 'like-shapes' | 'like-tag' | 'link' | 'link-1' | 'link-2' | 'link-21' | 'link-circle' | 'link-square' | 'list' | 'litecoin' | 'location' | 'location-add' | 'location-cross' | 'location-discover' | 'location-minus' | 'location-slash' | 'location-tick' | 'lock' | 'lock-1' | 'lock-circle' | 'lock-slash' | 'log-out' | 'login' | 'login-curve' | 'logout' | 'logout-curve' | 'lovely' | 'magic-star' | 'magicpen' | 'mail' | 'main-component' | 'maker' | 'man' | 'map' | 'map-1' | 'map-pin' | 'mask' | 'mask-left' | 'mask-right' | 'math' | 'maximize' | 'maximize-1' | 'maximize-2' | 'maximize-3' | 'maximize-4' | 'maximize-circle' | 'medal' | 'medal-star' | 'menu' | 'menu-board' | 'message' | 'message-2' | 'message-add' | 'message-add-1' | 'message-circle' | 'message-edit' | 'message-favorite' | 'message-minus' | 'message-notif' | 'message-programming' | 'message-question' | 'message-remove' | 'message-search' | 'message-square' | 'message-text' | 'message-text-1' | 'message-tick' | 'message-time' | 'messages' | 'messages-1' | 'messages-2' | 'messages-3' | 'messenger' | 'microphone' | 'microphone-2' | 'microphone-slash' | 'microphone-slash-1' | 'microscope' | 'milk' | 'mini-music-sqaure' | 'minus' | 'minus-cirlce' | 'minus-square' | 'mirror' | 'mirroring-screen' | 'mobile' | 'mobile-programming' | 'monero' | 'money' | 'money-2' | 'money-3' | 'money-4' | 'money-add' | 'money-archive' | 'money-change' | 'money-forbidden' | 'money-recive' | 'money-remove' | 'money-send' | 'money-tick' | 'money-time' | 'moneys' | 'monitor' | 'monitor-mobbile' | 'monitor-recorder' | 'moon' | 'more' | 'more-2' | 'more-circle' | 'more-horizontal' | 'more-square' | 'mouse' | 'mouse-circle' | 'mouse-square' | 'music' | 'music-circle' | 'music-dashboard' | 'music-filter' | 'music-library-2' | 'music-play' | 'music-playlist' | 'music-square' | 'music-square-add' | 'music-square-remove' | 'music-square-search' | 'musicnote' | 'nebulas' | 'nem' | 'nexo' | 'next' | 'note' | 'note-1' | 'note-add' | 'note-favorite' | 'note-remove' | 'note-square' | 'note-text' | 'notepad' | 'notepad-2' | 'notification' | 'notification-1' | 'notification-bing' | 'notification-circle' | 'notification-favorite' | 'notification-status' | 'ocean-protocol' | 'okb' | 'okru' | 'omega-circle' | 'omega-square' | 'ontology' | 'paintbucket' | 'palette' | 'panel-left-close' | 'panel-left-open' | 'paperclip' | 'paperclip-2' | 'password-check' | 'path-tool' | 'path-tool-2' | 'path-tool-square' | 'pause' | 'pause-circle' | 'paypal' | 'pen-add' | 'pen-close' | 'pen-remove' | 'pen-tool' | 'pen-tool-2' | 'pencil' | 'people' | 'percentage-circle' | 'percentage-square' | 'personalcard' | 'pet' | 'pharagraphspacing' | 'phone' | 'photoshop' | 'picture-frame' | 'play' | 'play-add' | 'play-circle' | 'play-cricle' | 'play-remove' | 'plug' | 'plus' | 'plus-circle' | 'pointer' | 'polkadot' | 'polygon' | 'polyswarm' | 'presention-chart' | 'previous' | 'printer' | 'printer-slash' | 'profile' | 'profile-2-user' | 'profile-add' | 'profile-circle' | 'profile-delete' | 'profile-remove' | 'profile-tick' | 'programming-arrow' | 'programming-arrows' | 'python' | 'quant' | 'quote-down' | 'quote-down-circle' | 'quote-down-square' | 'quote-up' | 'quote-up-circle' | 'quote-up-square' | 'radar' | 'radar-2' | 'radio' | 'ram' | 'ram-2' | 'rank' | 'ranking' | 'receipt' | 'receipt-1' | 'receipt-2' | 'receipt-21' | 'receipt-add' | 'receipt-discount' | 'receipt-disscount' | 'receipt-edit' | 'receipt-item' | 'receipt-minus' | 'receipt-search' | 'receipt-square' | 'receipt-text' | 'receive' | 'receive-square' | 'receive-square-2' | 'record' | 'record-circle' | 'recovery-convert' | 'refresh' | 'refresh-2' | 'refresh-circle' | 'refresh-cw' | 'refresh-left-square' | 'refresh-right-square' | 'refresh-square' | 'repeat' | 'repeat-circle' | 'repeate-music' | 'repeate-one' | 'reserve' | 'rotate-ccw' | 'rotate-left' | 'rotate-right' | 'route-square' | 'routing' | 'routing-2' | 'row-horizontal' | 'row-vertical' | 'ruler' | 'ruler-pen' | 'safe-home' | 'sagittarius' | 'save-2' | 'save-add' | 'save-minus' | 'save-remove' | 'scan' | 'scan-barcode' | 'scanner' | 'scanning' | 'scissor' | 'screenmirroring' | 'scroll' | 'search' | 'search-favorite' | 'search-favorite-1' | 'search-normal' | 'search-normal-1' | 'search-status' | 'search-status-1' | 'search-zoom-in' | 'search-zoom-in-1' | 'search-zoom-out' | 'search-zoom-out-1' | 'security' | 'security-card' | 'security-safe' | 'security-time' | 'security-user' | 'send' | 'send-2' | 'server' | 'setting' | 'setting-2' | 'setting-3' | 'setting-4' | 'setting-5' | 'settings' | 'shapes' | 'shapes-1' | 'share' | 'share-2' | 'shield' | 'shield-check' | 'shield-cross' | 'shield-lock' | 'shield-plus' | 'shield-search' | 'shield-security' | 'shield-slash' | 'shield-tick' | 'ship' | 'shop' | 'shop-add' | 'shop-remove' | 'shopping-bag' | 'shopping-cart' | 'shuffle' | 'shutterstock' | 'siacoin' | 'sidebar-bottom' | 'sidebar-left' | 'sidebar-right' | 'sidebar-top' | 'signpost' | 'simcard' | 'simcard-1' | 'simcard-2' | 'size' | 'slack' | 'slash' | 'slider' | 'slider-horizontal' | 'slider-horizontal-1' | 'slider-vertical' | 'slider-vertical-1' | 'smallcaps' | 'smart-car' | 'smart-home' | 'smileys' | 'sms' | 'sms-edit' | 'sms-notification' | 'sms-search' | 'sms-star' | 'sms-tracking' | 'snapchat' | 'solana' | 'sort' | 'sound' | 'sparkles' | 'speaker' | 'speedometer' | 'spotify' | 'stacks' | 'star' | 'star-1' | 'star-slash' | 'stars' | 'status' | 'status-up' | 'stellar' | 'sticker' | 'stickynote' | 'stop' | 'stop-circle' | 'story' | 'strongbox' | 'strongbox-2' | 'subtitle' | 'sun' | 'sun-1' | 'sun-fog' | 'table-document' | 'table-lamp' | 'tag' | 'tag-2' | 'tag-cross' | 'tag-right' | 'tag-user' | 'task' | 'task-square' | 'teacher' | 'telephone' | 'tenx' | 'tether' | 'text' | 'text-block' | 'text-bold' | 'text-italic' | 'text-underline' | 'textalign-center' | 'textalign-justifycenter' | 'textalign-justifyleft' | 'textalign-justifyright' | 'textalign-left' | 'textalign-right' | 'the-graph' | 'theta' | 'thorchain' | 'tick-circle' | 'tick-square' | 'ticket' | 'ticket-2' | 'ticket-discount' | 'ticket-expired' | 'ticket-star' | 'timer' | 'timer-1' | 'timer-pause' | 'timer-start' | 'toggle-off' | 'toggle-off-circle' | 'toggle-on' | 'toggle-on-circle' | 'trade' | 'transaction-minus' | 'translate' | 'transmit' | 'transmit-sqaure-2' | 'transmit-square' | 'trash' | 'trash-2' | 'tree' | 'trello' | 'trend-down' | 'trend-up' | 'trending-up' | 'triangle' | 'triangle-logo' | 'trontron' | 'truck' | 'truck-fast' | 'truck-remove' | 'truck-tick' | 'truck-time' | 'trush-square' | 'twitch' | 'two-page' | 'ui-8' | 'unlimited' | 'unlock' | 'upload' | 'usd-coin' | 'user' | 'user-add' | 'user-check' | 'user-cirlce-add' | 'user-edit' | 'user-minus' | 'user-octagon' | 'user-plus' | 'user-remove' | 'user-search' | 'user-square' | 'user-tag' | 'user-tick' | 'users' | 'velas' | 'verify' | 'vibe' | 'video' | 'video-add' | 'video-circle' | 'video-horizontal' | 'video-octagon' | 'video-play' | 'video-remove' | 'video-slash' | 'video-square' | 'video-tick' | 'video-time' | 'video-vertical' | 'voice-cricle' | 'voice-square' | 'volume' | 'volume-cross' | 'volume-high' | 'volume-low' | 'volume-low-1' | 'volume-mute' | 'volume-slash' | 'volume-up' | 'wallet' | 'wallet-1' | 'wallet-2' | 'wallet-3' | 'wallet-add' | 'wallet-add-1' | 'wallet-check' | 'wallet-minus' | 'wallet-money' | 'wallet-remove' | 'wallet-search' | 'wallet2' | 'wanchain' | 'wanchain-1' | 'wand-sparkles' | 'warning-2' | 'watch' | 'watch-status' | 'weight' | 'weight-meter' | 'whatsapp' | 'wifi' | 'wifi-square' | 'wind' | 'wind-2' | 'windows' | 'wing' | 'woman' | 'wrist-clock' | 'x' | 'x-circle' | 'xd' | 'xiaomi' | 'xrp' | 'youtube' | 'zap' | 'zel' | 'zoom' | 'zoom-in' | 'zoom-out';
+export type IconName = 'aave' | 'activity' | 'add' | 'add-circle' | 'add-square' | 'additem' | 'airdrop' | 'airplane' | 'airplane-square' | 'airpod' | 'airpods' | 'alarm' | 'alert-circle' | 'alert-triangle' | 'align-bottom' | 'align-horizontally' | 'align-left' | 'align-right' | 'align-top' | 'align-vertically' | 'android' | 'ankr' | 'apple' | 'aquarius' | 'archive' | 'archive-add' | 'archive-book' | 'archive-box' | 'archive-minus' | 'archive-slash' | 'archive-tick' | 'arrange-horizontal' | 'arrange-horizontal-circle' | 'arrange-horizontal-square' | 'arrange-vertical' | 'arrange-vertical-circle' | 'arrange-vertical-square' | 'arrow' | 'arrow-circle-down' | 'arrow-circle-down-2' | 'arrow-circle-left' | 'arrow-circle-left-2' | 'arrow-circle-right' | 'arrow-circle-right-2' | 'arrow-circle-up' | 'arrow-circle-up-2' | 'arrow-down' | 'arrow-down-2' | 'arrow-down-3' | 'arrow-down-up' | 'arrow-forward' | 'arrow-forward-square' | 'arrow-left' | 'arrow-left-2' | 'arrow-left-3' | 'arrow-right' | 'arrow-right-2' | 'arrow-right-3' | 'arrow-rotate-left' | 'arrow-rotate-right' | 'arrow-square' | 'arrow-square-down' | 'arrow-square-left' | 'arrow-square-right' | 'arrow-square-up' | 'arrow-swap-horizontal' | 'arrow-swap-vertical' | 'arrow-up' | 'arrow-up-2' | 'arrow-up-3' | 'arrow-up-right' | 'attach-circle' | 'attach-square' | 'audio-square' | 'augur' | 'autobrightness' | 'autonio' | 'avalanche' | 'award' | 'back' | 'back-square' | 'backward' | 'backward-10-seconds' | 'backward-15-seconds' | 'backward-5-seconds' | 'backward-item' | 'badge-check' | 'bag' | 'bag-2' | 'bag-cross' | 'bag-cross-1' | 'bag-happy' | 'bag-tick' | 'bag-tick-2' | 'bag-timer' | 'bank' | 'barcode' | 'battery-charging' | 'battery-disable' | 'battery-empty' | 'battery-empty-1' | 'battery-full' | 'be' | 'bell' | 'bezier' | 'bill' | 'binance-coin' | 'binance-usd' | 'bitcoin' | 'bitcoin-card' | 'bitcoin-convert' | 'bitcoin-refresh' | 'blend' | 'blend-2' | 'blogger' | 'bluetooth' | 'bluetooth-2' | 'bluetooth-circle' | 'bluetooth-rectangle' | 'blur' | 'book' | 'book-1' | 'book-saved' | 'book-square' | 'bookmark' | 'bookmark-2' | 'bootstrap' | 'box' | 'box-1' | 'box-2' | 'box-add' | 'box-remove' | 'box-seam' | 'box-search' | 'box-tick' | 'box-time' | 'briefcase' | 'brifecase-cross' | 'brifecase-tick' | 'brifecase-timer' | 'brodcast' | 'broom' | 'brush' | 'brush-2' | 'brush-3' | 'brush-big' | 'brush-square' | 'bubble' | 'bucket' | 'bucket-circle' | 'bucket-square' | 'bug' | 'building' | 'building-2' | 'building-3' | 'building-4' | 'buildings' | 'buildings-2' | 'buliding' | 'bullseye' | 'bus' | 'buy-crypto' | 'cake' | 'calculator' | 'calendar' | 'calendar-1' | 'calendar-2' | 'calendar-add' | 'calendar-check' | 'calendar-circle' | 'calendar-dots' | 'calendar-edit' | 'calendar-remove' | 'calendar-search' | 'calendar-tick' | 'call' | 'call-add' | 'call-calling' | 'call-incoming' | 'call-minus' | 'call-outgoing' | 'call-received' | 'call-remove' | 'call-slash' | 'camera' | 'camera-slash' | 'candle' | 'candle-2' | 'car' | 'card' | 'card-add' | 'card-coin' | 'card-edit' | 'card-pos' | 'card-receive' | 'card-remove' | 'card-remove-1' | 'card-send' | 'card-slash' | 'card-tick' | 'card-tick-1' | 'cardano' | 'cards' | 'cash-stack' | 'category' | 'category-2' | 'cd' | 'celo' | 'celsius' | 'chainlink' | 'chart' | 'chart-1' | 'chart-2' | 'chart-21' | 'chart-circle' | 'chart-column' | 'chart-fail' | 'chart-square' | 'chart-success' | 'chat' | 'chat-dots' | 'check' | 'check-check' | 'check-circle' | 'chemical-glass' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevrons-left' | 'chevrons-right' | 'chevrons-up-down' | 'chrome' | 'circle' | 'circle-help' | 'civic' | 'clipboard' | 'clipboard-check' | 'clipboard-close' | 'clipboard-export' | 'clipboard-import' | 'clipboard-text' | 'clipboard-tick' | 'clock' | 'close-circle' | 'close-square' | 'cloud' | 'cloud-add' | 'cloud-change' | 'cloud-connection' | 'cloud-cross' | 'cloud-drizzle' | 'cloud-fog' | 'cloud-lightning' | 'cloud-minus' | 'cloud-notif' | 'cloud-plus' | 'cloud-remove' | 'cloud-snow' | 'cloud-sunny' | 'code' | 'code-1' | 'code-circle' | 'coffee' | 'coin' | 'coin-1' | 'coins' | 'color-swatch' | 'colorfilter' | 'colors-square' | 'command' | 'command-square' | 'component' | 'computing' | 'contact' | 'convert' | 'convert-3-d-cube' | 'convert-card' | 'convertshape' | 'convertshape-2' | 'copy' | 'copy-success' | 'copyright' | 'courthouse' | 'cpu' | 'cpu-charge' | 'cpu-setting' | 'creative-commons' | 'credit-card' | 'crop' | 'crown' | 'crown-1' | 'cup' | 'cursor' | 'cut' | 'dai' | 'danger' | 'dash' | 'data' | 'data-2' | 'decred' | 'dent' | 'designtools' | 'device-message' | 'devices' | 'diagram' | 'diagram-3' | 'diamonds' | 'direct' | 'direct-down' | 'direct-inbox' | 'direct-left' | 'direct-normal' | 'direct-notification' | 'direct-right' | 'direct-send' | 'direct-up' | 'directbox-default' | 'directbox-notif' | 'directbox-receive' | 'directbox-send' | 'discount-circle' | 'discount-shape' | 'discover' | 'dislike' | 'display' | 'document' | 'document-cloud' | 'document-code' | 'document-code-2' | 'document-copy' | 'document-download' | 'document-favorite' | 'document-filter' | 'document-forward' | 'document-like' | 'document-previous' | 'document-sketch' | 'document-text' | 'document-text-1' | 'document-upload' | 'dollar-circle' | 'dollar-square' | 'download' | 'dribbble' | 'driver' | 'driver-2' | 'driver-refresh' | 'driving' | 'drop' | 'dropbox' | 'edit' | 'edit-2' | 'educare' | 'electricity' | 'element' | 'element-2' | 'element-3' | 'element-4' | 'element-equal' | 'element-plus' | 'emercoin' | 'emoji-happy' | 'emoji-normal' | 'emoji-sad' | 'emoji-smile' | 'empty-wallet' | 'empty-wallet-add' | 'empty-wallet-change' | 'empty-wallet-remove' | 'empty-wallet-tick' | 'empty-wallet-time' | 'enjin-coin' | 'eos' | 'eraser' | 'eraser-square' | 'ethereum' | 'ethereum-classic' | 'export' | 'export-circle' | 'export-curve' | 'export-square' | 'external-drive' | 'external-link' | 'eye' | 'eye-off' | 'eye-slash' | 'facebook' | 'factory' | 'fatrows' | 'favorite-chart' | 'figma' | 'figma-1' | 'file-plus-2' | 'file-text' | 'files' | 'filter' | 'filter-add' | 'filter-edit' | 'filter-remove' | 'filter-search' | 'filter-square' | 'filter-tick' | 'finger-cricle' | 'finger-scan' | 'firstline' | 'flag' | 'flag-2' | 'flash' | 'flash-circle' | 'flash-slash' | 'flashy' | 'folder' | 'folder-2' | 'folder-add' | 'folder-cloud' | 'folder-connection' | 'folder-cross' | 'folder-favorite' | 'folder-kanban' | 'folder-minus' | 'folder-open' | 'folder-plus' | 'forbidden' | 'forbidden-2' | 'format-circle' | 'format-square' | 'forward' | 'forward-10-seconds' | 'forward-15-seconds' | 'forward-5-seconds' | 'forward-item' | 'framer' | 'ftx-token' | 'gallery' | 'gallery-add' | 'gallery-edit' | 'gallery-export' | 'gallery-favorite' | 'gallery-import' | 'gallery-remove' | 'gallery-slash' | 'gallery-tick' | 'game' | 'gameboy' | 'gas-station' | 'gauge' | 'gemini' | 'gemini-2' | 'ghost' | 'gift' | 'glass' | 'global' | 'global-edit' | 'global-refresh' | 'global-search' | 'globe' | 'globe2' | 'google' | 'google-drive' | 'google-play' | 'gps' | 'gps-slash' | 'grammerly' | 'graph' | 'grid' | 'grid-1' | 'grid-2' | 'grid-3' | 'grid-4' | 'grid-5' | 'grid-6' | 'grid-7' | 'grid-8' | 'grid-9' | 'grid-edit' | 'grid-eraser' | 'grid-lock' | 'hamberger-menu' | 'happyemoji' | 'hard-hat' | 'harmony' | 'hashtag' | 'hashtag-down' | 'hashtag-square' | 'hashtag-up' | 'headphone' | 'headphones' | 'health' | 'heart' | 'heart-add' | 'heart-circle' | 'heart-edit' | 'heart-remove' | 'heart-search' | 'heart-slash' | 'heart-tick' | 'hedera-hashgraph' | 'hex' | 'hierarchy' | 'hierarchy-2' | 'hierarchy-3' | 'hierarchy-square' | 'hierarchy-square-2' | 'hierarchy-square-3' | 'history' | 'home' | 'home-2' | 'home-3' | 'home-hashtag' | 'home-trend-down' | 'home-trend-up' | 'home-wifi' | 'hospital' | 'house' | 'house-2' | 'html-3' | 'html-5' | 'huobi-token' | 'i-24-support' | 'i-3-d-cube-scan' | 'i-3-d-rotate' | 'i-3-d-square' | 'i-3-dcube' | 'i-3-square' | 'icon' | 'illustrator' | 'image' | 'import' | 'import-circle' | 'import-curve' | 'import-square' | 'inbox' | 'info' | 'info-circle' | 'information' | 'instagram' | 'iost' | 'java-script' | 'js' | 'judge' | 'kanban' | 'key' | 'key-square' | 'keyboard' | 'keyboard-open' | 'kyber-network' | 'lamp' | 'lamp-charge' | 'lamp-on' | 'lamp-slash' | 'language-circle' | 'language-square' | 'layer' | 'layout-dashboard' | 'layout-grid' | 'layout-maximize' | 'level' | 'lifebuoy' | 'lightbulb' | 'like' | 'like-1' | 'like-dislike' | 'like-shapes' | 'like-tag' | 'link' | 'link-1' | 'link-2' | 'link-21' | 'link-circle' | 'link-square' | 'list' | 'litecoin' | 'location' | 'location-add' | 'location-cross' | 'location-discover' | 'location-minus' | 'location-slash' | 'location-tick' | 'lock' | 'lock-1' | 'lock-circle' | 'lock-slash' | 'log-out' | 'login' | 'login-curve' | 'logout' | 'logout-curve' | 'lovely' | 'magic-star' | 'magicpen' | 'mail' | 'main-component' | 'maker' | 'man' | 'map' | 'map-1' | 'map-pin' | 'mask' | 'mask-left' | 'mask-right' | 'math' | 'maximize' | 'maximize-1' | 'maximize-2' | 'maximize-3' | 'maximize-4' | 'maximize-circle' | 'medal' | 'medal-star' | 'menu' | 'menu-board' | 'message' | 'message-2' | 'message-add' | 'message-add-1' | 'message-circle' | 'message-edit' | 'message-favorite' | 'message-minus' | 'message-notif' | 'message-programming' | 'message-question' | 'message-remove' | 'message-search' | 'message-square' | 'message-text' | 'message-text-1' | 'message-tick' | 'message-time' | 'messages' | 'messages-1' | 'messages-2' | 'messages-3' | 'messenger' | 'microphone' | 'microphone-2' | 'microphone-slash' | 'microphone-slash-1' | 'microscope' | 'milk' | 'mini-music-sqaure' | 'minus' | 'minus-cirlce' | 'minus-square' | 'mirror' | 'mirroring-screen' | 'mobile' | 'mobile-programming' | 'monero' | 'money' | 'money-2' | 'money-3' | 'money-4' | 'money-add' | 'money-archive' | 'money-change' | 'money-forbidden' | 'money-recive' | 'money-remove' | 'money-send' | 'money-tick' | 'money-time' | 'moneys' | 'monitor' | 'monitor-mobbile' | 'monitor-recorder' | 'moon' | 'more' | 'more-2' | 'more-circle' | 'more-horizontal' | 'more-square' | 'mouse' | 'mouse-circle' | 'mouse-square' | 'music' | 'music-circle' | 'music-dashboard' | 'music-filter' | 'music-library-2' | 'music-play' | 'music-playlist' | 'music-square' | 'music-square-add' | 'music-square-remove' | 'music-square-search' | 'musicnote' | 'nebulas' | 'nem' | 'nexo' | 'next' | 'note' | 'note-1' | 'note-add' | 'note-favorite' | 'note-remove' | 'note-square' | 'note-text' | 'notepad' | 'notepad-2' | 'notification' | 'notification-1' | 'notification-bing' | 'notification-circle' | 'notification-favorite' | 'notification-status' | 'ocean-protocol' | 'okb' | 'okru' | 'omega-circle' | 'omega-square' | 'ontology' | 'paintbucket' | 'palette' | 'panel-left-close' | 'panel-left-open' | 'paperclip' | 'paperclip-2' | 'password-check' | 'path-tool' | 'path-tool-2' | 'path-tool-square' | 'pause' | 'pause-circle' | 'paypal' | 'pen-add' | 'pen-close' | 'pen-remove' | 'pen-tool' | 'pen-tool-2' | 'pencil' | 'people' | 'percentage-circle' | 'percentage-square' | 'personalcard' | 'pet' | 'pharagraphspacing' | 'phone' | 'photoshop' | 'picture-frame' | 'play' | 'play-add' | 'play-circle' | 'play-cricle' | 'play-remove' | 'plug' | 'plus' | 'plus-circle' | 'pointer' | 'polkadot' | 'polygon' | 'polyswarm' | 'presention-chart' | 'previous' | 'printer' | 'printer-slash' | 'profile' | 'profile-2-user' | 'profile-add' | 'profile-circle' | 'profile-delete' | 'profile-remove' | 'profile-tick' | 'programming-arrow' | 'programming-arrows' | 'python' | 'quant' | 'quote-down' | 'quote-down-circle' | 'quote-down-square' | 'quote-up' | 'quote-up-circle' | 'quote-up-square' | 'radar' | 'radar-2' | 'radio' | 'ram' | 'ram-2' | 'rank' | 'ranking' | 'receipt' | 'receipt-1' | 'receipt-2' | 'receipt-21' | 'receipt-add' | 'receipt-discount' | 'receipt-disscount' | 'receipt-edit' | 'receipt-item' | 'receipt-minus' | 'receipt-search' | 'receipt-square' | 'receipt-text' | 'receive' | 'receive-square' | 'receive-square-2' | 'record' | 'record-circle' | 'recovery-convert' | 'refresh' | 'refresh-2' | 'refresh-circle' | 'refresh-cw' | 'refresh-left-square' | 'refresh-right-square' | 'refresh-square' | 'repeat' | 'repeat-circle' | 'repeate-music' | 'repeate-one' | 'reserve' | 'rotate-ccw' | 'rotate-cw' | 'rotate-left' | 'rotate-right' | 'route-square' | 'routing' | 'routing-2' | 'row-horizontal' | 'row-vertical' | 'ruler' | 'ruler-pen' | 'safe-home' | 'sagittarius' | 'save-2' | 'save-add' | 'save-minus' | 'save-remove' | 'scan' | 'scan-barcode' | 'scanner' | 'scanning' | 'scissor' | 'screenmirroring' | 'scroll' | 'search' | 'search-favorite' | 'search-favorite-1' | 'search-normal' | 'search-normal-1' | 'search-status' | 'search-status-1' | 'search-zoom-in' | 'search-zoom-in-1' | 'search-zoom-out' | 'search-zoom-out-1' | 'security' | 'security-card' | 'security-safe' | 'security-time' | 'security-user' | 'send' | 'send-2' | 'server' | 'setting' | 'setting-2' | 'setting-3' | 'setting-4' | 'setting-5' | 'settings' | 'shapes' | 'shapes-1' | 'share' | 'share-2' | 'shield' | 'shield-check' | 'shield-cross' | 'shield-lock' | 'shield-plus' | 'shield-search' | 'shield-security' | 'shield-slash' | 'shield-tick' | 'ship' | 'shop' | 'shop-add' | 'shop-remove' | 'shopping-bag' | 'shopping-cart' | 'shuffle' | 'shutterstock' | 'siacoin' | 'sidebar-bottom' | 'sidebar-left' | 'sidebar-right' | 'sidebar-top' | 'signpost' | 'simcard' | 'simcard-1' | 'simcard-2' | 'size' | 'slack' | 'slash' | 'slider' | 'slider-horizontal' | 'slider-horizontal-1' | 'slider-vertical' | 'slider-vertical-1' | 'smallcaps' | 'smart-car' | 'smart-home' | 'smileys' | 'sms' | 'sms-edit' | 'sms-notification' | 'sms-search' | 'sms-star' | 'sms-tracking' | 'snapchat' | 'solana' | 'sort' | 'sound' | 'sparkles' | 'speaker' | 'speedometer' | 'spotify' | 'stacks' | 'star' | 'star-1' | 'star-slash' | 'stars' | 'status' | 'status-up' | 'stellar' | 'sticker' | 'stickynote' | 'stop' | 'stop-circle' | 'story' | 'strongbox' | 'strongbox-2' | 'subtitle' | 'sun' | 'sun-1' | 'sun-fog' | 'table-document' | 'table-lamp' | 'tag' | 'tag-2' | 'tag-cross' | 'tag-right' | 'tag-user' | 'task' | 'task-square' | 'teacher' | 'telephone' | 'tenx' | 'tether' | 'text' | 'text-block' | 'text-bold' | 'text-italic' | 'text-underline' | 'textalign-center' | 'textalign-justifycenter' | 'textalign-justifyleft' | 'textalign-justifyright' | 'textalign-left' | 'textalign-right' | 'the-graph' | 'theta' | 'thorchain' | 'tick-circle' | 'tick-square' | 'ticket' | 'ticket-2' | 'ticket-discount' | 'ticket-expired' | 'ticket-star' | 'timer' | 'timer-1' | 'timer-pause' | 'timer-start' | 'toggle-off' | 'toggle-off-circle' | 'toggle-on' | 'toggle-on-circle' | 'trade' | 'transaction-minus' | 'translate' | 'transmit' | 'transmit-sqaure-2' | 'transmit-square' | 'trash' | 'trash-2' | 'tree' | 'trello' | 'trend-down' | 'trend-up' | 'trending-up' | 'triangle' | 'triangle-logo' | 'trontron' | 'truck' | 'truck-fast' | 'truck-remove' | 'truck-tick' | 'truck-time' | 'trush-square' | 'twitch' | 'two-page' | 'ui-8' | 'unlimited' | 'unlock' | 'upload' | 'usd-coin' | 'user' | 'user-add' | 'user-check' | 'user-cirlce-add' | 'user-edit' | 'user-minus' | 'user-octagon' | 'user-plus' | 'user-remove' | 'user-search' | 'user-square' | 'user-tag' | 'user-tick' | 'users' | 'velas' | 'verify' | 'vibe' | 'video' | 'video-add' | 'video-circle' | 'video-horizontal' | 'video-octagon' | 'video-play' | 'video-remove' | 'video-slash' | 'video-square' | 'video-tick' | 'video-time' | 'video-vertical' | 'voice-cricle' | 'voice-square' | 'volume' | 'volume-cross' | 'volume-high' | 'volume-low' | 'volume-low-1' | 'volume-mute' | 'volume-slash' | 'volume-up' | 'wallet' | 'wallet-1' | 'wallet-2' | 'wallet-3' | 'wallet-add' | 'wallet-add-1' | 'wallet-check' | 'wallet-minus' | 'wallet-money' | 'wallet-remove' | 'wallet-search' | 'wallet2' | 'wanchain' | 'wanchain-1' | 'wand-sparkles' | 'warning-2' | 'watch' | 'watch-status' | 'weight' | 'weight-meter' | 'whatsapp' | 'wifi' | 'wifi-square' | 'wind' | 'wind-2' | 'windows' | 'wing' | 'woman' | 'wrist-clock' | 'x' | 'x-circle' | 'xd' | 'xiaomi' | 'xrp' | 'youtube' | 'zap' | 'zel' | 'zoom' | 'zoom-in' | 'zoom-out';
 export declare const ICON_NAMES: IconName[];
 export type CatalogStyle = 'linear' | 'bold' | 'broken' | 'bulk' | 'outline' | 'twotone';
 type ShardLoader = () => Record<string, string>;