@developer_tribe/react-builder 1.0.3 → 1.0.5

package/src/AttributesEditor.tsx

@@ -11,6 +11,7 @@ import {
 import { useRenderStore } from './store';
 import { Field } from './attributes-editor/Field';
 import { SpecialCategorySection } from './attributes-editor/SpecialCategorySection';
+import { toPreferredScale } from './attributes-editor/SizeField';
 import {
   LayoutContext,
   SchemaEntry,
@@ -19,6 +20,10 @@ import {
 import { FieldInfoTooltip } from './attributes-editor/FieldInfoTooltip';
 import type { ViewPropsGenerated } from './build-components/View/ViewProps.generated';
 import useNode from './build-components/useNode';
+import { MockableFeatureModal } from './modals';
+import { Icon } from './components/Icon.generated';
+import { IconPickerModal } from './modals/IconPickerModal';
+import type { IconsType } from './types/Icons';
 
 type AttributesEditorProps = {
   node: Node;
@@ -131,6 +136,13 @@ export function AttributesEditor({
     ],
   );
 
+  const patternForType = useMemo(
+    () => (data?.type ? getPatternByType(data.type) : undefined),
+    [data?.type],
+  );
+
+  const componentMeta = patternForType?.meta;
+
   const entries = useMemo(
     () =>
       Object.entries(schema).filter(([, type]) =>
@@ -139,16 +151,33 @@ export function AttributesEditor({
     [schema],
   );
 
-  const patternForType = useMemo(
-    () => (data?.type ? getPatternByType(data.type) : undefined),
-    [data?.type],
-  );
-
-  const componentMeta = patternForType?.meta;
+  const visibleEntries = useMemo(() => {
+    if (!componentMeta?.hideAllAttributes) return entries;
+    return entries.filter(([name]) => {
+      const meta = attributeMeta?.[name];
+      return meta?.forceVisible === true || meta?.override === true;
+    });
+  }, [attributeMeta, componentMeta?.hideAllAttributes, entries]);
 
   const componentTitle = componentMeta?.label ?? data?.type ?? 'Component';
   const componentDescription = componentMeta?.description;
 
+  const mockableFeatureKeys = useMemo(() => {
+    const mockable = componentMeta?.mockableFeatures;
+    if (!mockable || typeof mockable !== 'object') return [];
+    return Object.entries(mockable)
+      .filter(([, enabled]) => enabled === true)
+      .map(([key]) => key)
+      .filter((key) => typeof key === 'string' && key.trim().length > 0)
+      .sort((a, b) => a.localeCompare(b));
+  }, [componentMeta?.mockableFeatures]);
+
+  const [activeMockableFeature, setActiveMockableFeature] = useState<
+    string | null
+  >(null);
+
+  const [activeIconField, setActiveIconField] = useState<string | null>(null);
+
   const headerSection = (
     <div className="attributes-editor__component-meta">
       <p className="attributes-editor__component-title">{componentTitle}</p>
@@ -160,6 +189,31 @@ export function AttributesEditor({
     </div>
   );
 
+  const mockableSection =
+    mockableFeatureKeys.length > 0 ? (
+      <section className="attributes-editor__mockable">
+        <p className="attributes-editor__mockable-title">Mockable</p>
+        <table className="attributes-editor__mockable-table">
+          <tbody>
+            {mockableFeatureKeys.map((key) => (
+              <tr key={key} className="attributes-editor__mockable-row">
+                <td className="attributes-editor__mockable-name">{key}</td>
+                <td className="attributes-editor__mockable-action">
+                  <button
+                    type="button"
+                    className="editor-button"
+                    onClick={() => setActiveMockableFeature(key)}
+                  >
+                    {key}
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </section>
+    ) : null;
+
   const { grouped, specialGroups } = useMemo(() => {
     const groups: Record<TabId, SchemaEntry[]> = {
       style: [],
@@ -175,7 +229,7 @@ export function AttributesEditor({
       return order !== 0 ? order : a.name.localeCompare(b.name);
     };
 
-    entries.forEach(([name, type]) => {
+    visibleEntries.forEach(([name, type]) => {
       const meta = attributeMeta?.[name];
       const specialCategory = meta?.specialCategory;
       if (typeof specialCategory === 'string') {
@@ -208,7 +262,7 @@ export function AttributesEditor({
     });
 
     return { grouped: groups, specialGroups: specials };
-  }, [attributeMeta, entries]);
+  }, [attributeMeta, visibleEntries]);
 
   const specialSectionsByTab = useMemo<Record<TabId, SpecialSection[]>>(() => {
     const buckets: Record<TabId, SpecialSection[]> = {
@@ -262,6 +316,59 @@ export function AttributesEditor({
     [baseData, onChange],
   );
 
+  const renderIconTypeField = useCallback(
+    (name: string, currentValue: unknown) => {
+      const normalized =
+        typeof currentValue === 'string'
+          ? (currentValue as IconsType)
+          : undefined;
+      return (
+        <>
+          <button
+            type="button"
+            onClick={() => setActiveIconField(name)}
+            style={{
+              width: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              gap: 8,
+              borderRadius: 6,
+              border: '1px solid #ddd',
+              padding: '8px 10px',
+              background: '#fff',
+              cursor: 'pointer',
+            }}
+          >
+            <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              {normalized ? <Icon iconType={normalized} size={18} /> : null}
+              <span style={{ fontWeight: 500 }}>
+                {normalized ?? 'Select icon'}
+              </span>
+            </span>
+            <span style={{ fontSize: 12, color: '#666' }}>Open</span>
+          </button>
+
+          {activeIconField === name ? (
+            <IconPickerModal
+              value={normalized}
+              onSelect={(iconName) => {
+                handleAttributeChange(name, iconName);
+                setActiveIconField(null);
+              }}
+              onClose={() => setActiveIconField(null)}
+              onClear={() => {
+                handleAttributeChange(name, undefined);
+                setActiveIconField(null);
+              }}
+            />
+          ) : null}
+        </>
+      );
+    },
+    [activeIconField, handleAttributeChange],
+  );
+
   const handleChildrenChange = useCallback(
     (val: string) => {
       const next: NodeData<NodeDefaultAttribute> = {
@@ -281,6 +388,21 @@ export function AttributesEditor({
             ? meta.label
             : key.charAt(0).toUpperCase() + key.slice(1);
         const normalizedDescription = meta?.description;
+        const orderedEntries = [...sectionEntries].sort((a, b) => {
+          const preferredOrder = [
+            'width',
+            'height',
+            'minWidth',
+            'minHeight',
+            'maxWidth',
+            'maxHeight',
+          ];
+          const aIndex = preferredOrder.indexOf(a.name);
+          const bIndex = preferredOrder.indexOf(b.name);
+          const aRank = aIndex === -1 ? Number.MAX_SAFE_INTEGER : aIndex;
+          const bRank = bIndex === -1 ? Number.MAX_SAFE_INTEGER : bIndex;
+          return aRank !== bRank ? aRank - bRank : a.name.localeCompare(b.name);
+        });
         return (
           <section key={key} className="special-category-section">
             <div className="special-category-section__header">
@@ -294,10 +416,12 @@ export function AttributesEditor({
               </p>
             ) : null}
             <div className="attributes-editor__size-grid">
-              {sectionEntries.map(({ name, type }) => {
+              {orderedEntries.map(({ name, type }) => {
                 const label = attributeMeta?.[name]?.label ?? name;
                 const description = attributeMeta?.[name]?.description;
-                const preferredScale = attributeMeta?.[name]?.preferedScale;
+                const preferredScale = toPreferredScale(
+                  attributeMeta?.[name]?.preferedScale,
+                );
                 const currentValue = (attributes as Record<string, unknown>)[
                   name
                 ];
@@ -318,18 +442,22 @@ export function AttributesEditor({
                           {label}
                         </p>
                       ) : null}
-                      <Field
-                        name={name}
-                        type={type}
-                        value={currentValue}
-                        onChange={(val) => handleAttributeChange(name, val)}
-                        componentType={data?.type}
-                        projectColors={projectColorsForPicker}
-                        layoutContext={layoutContext}
-                        viewAttributes={viewAttributes}
-                        label={isBoolean ? label : undefined}
-                        preferredScale={preferredScale}
-                      />
+                      {type === 'iconType' ? (
+                        renderIconTypeField(name, currentValue)
+                      ) : (
+                        <Field
+                          name={name}
+                          type={type}
+                          value={currentValue}
+                          onChange={(val) => handleAttributeChange(name, val)}
+                          componentType={data?.type}
+                          projectColors={projectColorsForPicker}
+                          layoutContext={layoutContext}
+                          viewAttributes={viewAttributes}
+                          label={isBoolean ? label : undefined}
+                          preferredScale={preferredScale}
+                        />
+                      )}
                     </div>
                   </FieldInfoTooltip>
                 );
@@ -361,6 +489,7 @@ export function AttributesEditor({
       handleAttributeChange,
       layoutContext,
       projectColorsForPicker,
+      renderIconTypeField,
       viewAttributes,
     ],
   );
@@ -473,16 +602,23 @@ export function AttributesEditor({
     </div>
   );
 
-  if (entries.length === 0) {
+  if (visibleEntries.length === 0) {
     return (
       <div className="attributes-editor">
         {headerSection}
+        {mockableSection}
         {tabsSection}
         {childrenSection}
         {activeSpecialSections.map(renderSpecialSection)}
         <div className="attributes-editor__empty-state">
           No editable attributes
         </div>
+        {activeMockableFeature ? (
+          <MockableFeatureModal
+            featureKey={activeMockableFeature}
+            onClose={() => setActiveMockableFeature(null)}
+          />
+        ) : null}
       </div>
     );
   }
@@ -490,6 +626,7 @@ export function AttributesEditor({
   return (
     <div className="attributes-editor">
       {headerSection}
+      {mockableSection}
       {tabsSection}
       {childrenSection}
       {activeSpecialSections.map(renderSpecialSection)}
@@ -497,7 +634,9 @@ export function AttributesEditor({
       {activeEntries.map(({ name, type }) => {
         const label = attributeMeta?.[name]?.label ?? name;
         const description = attributeMeta?.[name]?.description;
-        const preferredScale = attributeMeta?.[name]?.preferedScale;
+        const preferredScale = toPreferredScale(
+          attributeMeta?.[name]?.preferedScale,
+        );
         const isBoolean = isBooleanFieldType(type);
         const wrapperClassNames = [
           'attributes-editor__field-wrapper',
@@ -511,22 +650,32 @@ export function AttributesEditor({
               {!isBoolean ? (
                 <p className="attributes-editor__field-label">{label}</p>
               ) : null}
-              <Field
-                name={name}
-                type={type}
-                value={attributes?.[name]}
-                onChange={(val) => handleAttributeChange(name, val)}
-                componentType={data?.type}
-                projectColors={projectColorsForPicker}
-                layoutContext={layoutContext}
-                viewAttributes={viewAttributes}
-                label={isBoolean ? label : undefined}
-                preferredScale={preferredScale}
-              />
+              {type === 'iconType' ? (
+                renderIconTypeField(name, attributes?.[name])
+              ) : (
+                <Field
+                  name={name}
+                  type={type}
+                  value={attributes?.[name]}
+                  onChange={(val) => handleAttributeChange(name, val)}
+                  componentType={data?.type}
+                  projectColors={projectColorsForPicker}
+                  layoutContext={layoutContext}
+                  viewAttributes={viewAttributes}
+                  label={isBoolean ? label : undefined}
+                  preferredScale={preferredScale}
+                />
+              )}
             </div>
           </FieldInfoTooltip>
         );
       })}
+      {activeMockableFeature ? (
+        <MockableFeatureModal
+          featureKey={activeMockableFeature}
+          onClose={() => setActiveMockableFeature(null)}
+        />
+      ) : null}
     </div>
   );
 }

package/src/DeviceMockFrame.tsx

@@ -43,50 +43,48 @@ export function DeviceMockFrame({ children, appName }: DeviceMockFrameProps) {
   const navBarColor = isDark ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)';
 
   return (
-    <div className="stage-wrapper" style={{ overflow: 'auto' }}>
-      <div
-        className="stage"
-        style={{
-          width: device.width,
-          height: device.height,
-          minWidth: device.width,
-          maxWidth: device.width,
-          minHeight: device.height,
-          maxHeight: device.height,
-          overflow: 'hidden',
-          position: 'relative',
-          padding: 4,
-          direction: appConfig.isRtl ? 'rtl' : 'ltr',
-          backgroundColor:
-            appConfig.theme === 'dark'
-              ? appConfig.screenStyle.dark.backgroundColor
-              : appConfig.screenStyle.light.backgroundColor,
-          color:
-            appConfig.theme === 'dark'
-              ? appConfig.screenStyle.dark.color
-              : appConfig.screenStyle.light.color,
-          display: 'flex',
-          flexDirection: 'column',
-          borderRadius: device.radius ?? 0,
-        }}
+    <div
+      className="stage"
+      style={{
+        width: device.width,
+        height: device.height,
+        minWidth: device.width,
+        maxWidth: device.width,
+        minHeight: device.height,
+        maxHeight: device.height,
+        overflow: 'hidden',
+        position: 'relative',
+        padding: 4,
+        direction: appConfig.isRtl ? 'rtl' : 'ltr',
+        backgroundColor:
+          appConfig.theme === 'dark'
+            ? appConfig.screenStyle.dark.backgroundColor
+            : appConfig.screenStyle.light.backgroundColor,
+        color:
+          appConfig.theme === 'dark'
+            ? appConfig.screenStyle.dark.color
+            : appConfig.screenStyle.light.color,
+        display: 'flex',
+        flexDirection: 'column',
+        borderRadius: device.radius ?? 0,
+      }}
+    >
+      <MockOSProvider
+        appName={appName}
+        statusBarHeight={statusBarHeight}
+        statusBarBackgroundColor={statusBarColor}
+        statusBarPlatform={device.platform}
+        statusBarIsDark={isDark}
+        navBarHeight={navBarHeight}
+        navBarBackgroundColor={navBarColor}
+        navBarPlatform={device.platform}
+        navBarNavigationBarType={device.navigationBarType}
+        navBarIsDark={isDark}
+        insetLeft={insetLeft}
+        insetRight={insetRight}
       >
-        <MockOSProvider
-          appName={appName}
-          statusBarHeight={statusBarHeight}
-          statusBarBackgroundColor={statusBarColor}
-          statusBarPlatform={device.platform}
-          statusBarIsDark={isDark}
-          navBarHeight={navBarHeight}
-          navBarBackgroundColor={navBarColor}
-          navBarPlatform={device.platform}
-          navBarNavigationBarType={device.navigationBarType}
-          navBarIsDark={isDark}
-          insetLeft={insetLeft}
-          insetRight={insetRight}
-        >
-          {children}
-        </MockOSProvider>
-      </div>
+        {children}
+      </MockOSProvider>
     </div>
   );
 }

package/src/RenderPage.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useRef } from 'react';
 import { DeviceMockFrame } from './DeviceMockFrame';
-import { Node, NodeData } from './types/Node';
+import { Node } from './types/Node';
 import { RenderNode } from './build-components';
 import { useRenderStore } from './store';
 import { useLogRender } from './utils/useLogRender';
+import { findNodeByKeyNested } from './utils/findNodeByKeyNested';
 export type ScreenStyle = {
   light: { backgroundColor: string; color: string; seperatorColor?: string };
   dark: { backgroundColor: string; color: string; seperatorColor?: string };
@@ -14,42 +15,11 @@ interface RenderPageProps {
   onSelectNode?: (node: Node | null) => void;
 }
 
-function findNodeByKeyNested(node: Node, key: string): Node | null {
-  if (node === null || node === undefined) {
-    return null;
-  }
-
-  if (typeof node === 'string') {
-    return null;
-  }
-
-  if (Array.isArray(node)) {
-    for (const child of node) {
-      const found = findNodeByKeyNested(child, key);
-      if (found) {
-        return found;
-      }
-    }
-    return null;
-  }
-
-  const recordData = node as NodeData;
-  if (recordData.key === key) {
-    return recordData;
-  }
-
-  if (recordData.children) {
-    return findNodeByKeyNested(recordData.children as Node, key);
-  }
-
-  return null;
-}
-
 export function RenderPage({ data, name, onSelectNode }: RenderPageProps) {
   useLogRender('RenderPage');
-  const { device, previewMode, setCurrent } = useRenderStore((s) => ({
-    device: s.device,
+  const { previewMode, forceRender, setCurrent } = useRenderStore((s) => ({
     previewMode: s.previewMode,
+    forceRender: s.forceRender,
     setCurrent: s.setCurrent,
   }));
   const previewRootRef = useRef<HTMLDivElement | null>(null);
@@ -88,18 +58,11 @@ export function RenderPage({ data, name, onSelectNode }: RenderPageProps) {
     return () => {
       root.removeEventListener('click', handleClick);
     };
-  }, [previewMode, data, onSelectNode, setCurrent]);
-
-  const screenPreviewHeight = 800;
-  // The calculation is correct for maintaining the aspect ratio of the target screen size.
-  // It scales the width proportionally to a fixed preview height.
-  // width = (previewHeight * targetWidth) / targetHeight
-  const height = screenPreviewHeight;
-  const width = (height * device.width) / device.height;
+  }, [previewMode, data, onSelectNode, setCurrent, forceRender]); // forceRender: retrigger effect when we want to force a refresh (e.g. route change)
 
   return (
     <DeviceMockFrame appName={name}>
-      <div ref={previewRootRef}>
+      <div className="screen-preview" ref={previewRootRef}>
         <RenderNode node={data} />
       </div>
     </DeviceMockFrame>

package/src/assets/benefits.json

@@ -0,0 +1,24 @@
+{
+  "Embeded Paywall": {
+    "unlimited_access": true,
+    "trial_days": 7,
+    "headline": "Unlock everything"
+  },
+  "basic": {
+    "unlimited_access": true,
+    "trial_days": 7,
+    "headline": "Unlock everything"
+  },
+  "vpn": {
+    "secure_connection": true,
+    "no_logs": true,
+    "locations": 120,
+    "headline": "Private & fast VPN"
+  },
+  "pro": {
+    "remove_ads": true,
+    "priority_support": true,
+    "devices": 5,
+    "headline": "Go Pro"
+  }
+}

package/src/assets/iconset/activity-heart.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5 11.5H14.5L13 14.5L11 8.5L9.5 11.5H8.5M11.9932 5.13581C9.9938 2.7984 6.65975 2.16964 4.15469 4.31001C1.64964 6.45038 1.29697 10.029 3.2642 12.5604C4.75009 14.4724 8.97129 18.311 10.948 20.0749C11.3114 20.3991 11.4931 20.5613 11.7058 20.6251C11.8905 20.6805 12.0958 20.6805 12.2805 20.6251C12.4932 20.5613 12.6749 20.3991 13.0383 20.0749C15.015 18.311 19.2362 14.4724 20.7221 12.5604C22.6893 10.029 22.3797 6.42787 19.8316 4.31001C17.2835 2.19216 13.9925 2.7984 11.9932 5.13581Z" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/iconset/activity.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.41667 10.5605H10V15.1367M1.75917 10.5605H1.75M6.3425 15.1367H6.33333M10.0092 18.7976H10M18.2592 10.5605H18.25M1.75 15.1367H3.125M13.2083 10.5605H15.0417M1.75 18.7976H6.33333M10 1.4082V6.8996M15.1333 18.7976H16.7833C17.2967 18.7976 17.5534 18.7976 17.7495 18.6979C17.922 18.6101 18.0622 18.4701 18.1501 18.2979C18.25 18.1021 18.25 17.8458 18.25 17.3333V15.6858C18.25 15.1733 18.25 14.917 18.1501 14.7212C18.0622 14.549 17.922 14.409 17.7495 14.3212C17.5534 14.2215 17.2967 14.2215 16.7833 14.2215H15.1333C14.62 14.2215 14.3633 14.2215 14.1672 14.3212C13.9947 14.409 13.8545 14.549 13.7666 14.7212C13.6667 14.917 13.6667 15.1733 13.6667 15.6858V17.3333C13.6667 17.8458 13.6667 18.1021 13.7666 18.2979C13.8545 18.4701 13.9947 18.6101 14.1672 18.6979C14.3633 18.7976 14.62 18.7976 15.1333 18.7976ZM15.1333 6.8996H16.7833C17.2967 6.8996 17.5534 6.8996 17.7495 6.79985C17.922 6.7121 18.0622 6.57209 18.1501 6.39988C18.25 6.2041 18.25 5.94781 18.25 5.43523V3.78781C18.25 3.27523 18.25 3.01894 18.1501 2.82316C18.0622 2.65095 17.922 2.51094 17.7495 2.42319C17.5534 2.32344 17.2967 2.32344 16.7833 2.32344H15.1333C14.62 2.32344 14.3633 2.32344 14.1672 2.42319C13.9947 2.51094 13.8545 2.65095 13.7666 2.82316C13.6667 3.01894 13.6667 3.27523 13.6667 3.78781V5.43523C13.6667 5.94781 13.6667 6.2041 13.7666 6.39988C13.8545 6.57209 13.9947 6.7121 14.1672 6.79985C14.3633 6.8996 14.62 6.8996 15.1333 6.8996ZM3.21667 6.8996H4.86667C5.38005 6.8996 5.63674 6.8996 5.83282 6.79985C6.00531 6.7121 6.14554 6.57209 6.23342 6.39988C6.33333 6.2041 6.33333 5.94781 6.33333 5.43523V3.78781C6.33333 3.27523 6.33333 3.01894 6.23342 2.82316C6.14554 2.65095 6.00531 2.51094 5.83282 2.42319C5.63674 2.32344 5.38005 2.32344 4.86667 2.32344H3.21667C2.70329 2.32344 2.44659 2.32344 2.25051 2.42319C2.07803 2.51094 1.93779 2.65095 1.84991 2.82316C1.75 3.01894 1.75 3.27523 1.75 3.78781V5.43523C1.75 5.94781 1.75 6.2041 1.84991 6.39988C1.93779 6.57209 2.07803 6.7121 2.25051 6.79985C2.44659 6.8996 2.70329 6.8996 3.21667 6.8996Z" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/iconset/alert-circle.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM12 7C12.5523 7 13 7.44772 13 8V13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13V8C11 7.44772 11.4477 7 12 7ZM13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16V16.0001C11 16.5524 11.4477 17.0001 12 17.0001C12.5523 17.0001 13 16.5524 13 16.0001V16Z" />
+</svg>

package/src/assets/iconset/alert-triangle.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="21" viewBox="0 0 24 21" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9998 7.99999V12M11.9998 16H12.0098M10.6151 2.89171L2.39019 17.0983C1.93398 17.8863 1.70588 18.2803 1.73959 18.6037C1.769 18.8857 1.91677 19.142 2.14613 19.3088C2.40908 19.5 2.86435 19.5 3.77487 19.5H20.2246C21.1352 19.5 21.5904 19.5 21.8534 19.3088C22.0827 19.142 22.2305 18.8857 22.2599 18.6037C22.2936 18.2803 22.0655 17.8863 21.6093 17.0983L13.3844 2.89171C12.9299 2.10654 12.7026 1.71396 12.4061 1.58211C12.1474 1.4671 11.8521 1.4671 11.5935 1.58211C11.2969 1.71396 11.0696 2.10655 10.6151 2.89171Z" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/iconset/anchor.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" stroke="black"  fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 8C13.6569 8 15 6.65685 15 5C15 3.34315 13.6569 2 12 2C10.3431 2 9 3.34315 9 5C9 6.65685 10.3431 8 12 8ZM12 8V22M12 22C9.34784 22 6.8043 20.9464 4.92893 19.0711C3.05357 17.1957 2 14.6522 2 12H5M12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12H19" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/iconset/archive.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 7.9966C3.83599 7.99236 3.7169 7.98287 3.60982 7.96157C2.81644 7.80376 2.19624 7.18356 2.03843 6.39018C2 6.19698 2 5.96466 2 5.5C2 5.03534 2 4.80302 2.03843 4.60982C2.19624 3.81644 2.81644 3.19624 3.60982 3.03843C3.80302 3 4.03534 3 4.5 3H19.5C19.9647 3 20.197 3 20.3902 3.03843C21.1836 3.19624 21.8038 3.81644 21.9616 4.60982C22 4.80302 22 5.03534 22 5.5C22 5.96466 22 6.19698 21.9616 6.39018C21.8038 7.18356 21.1836 7.80376 20.3902 7.96157C20.2831 7.98287 20.164 7.99236 20 7.9966M10 13H14M4 8H20V16.2C20 17.8802 20 18.7202 19.673 19.362C19.3854 19.9265 18.9265 20.3854 18.362 20.673C17.7202 21 16.8802 21 15.2 21H8.8C7.11984 21 6.27976 21 5.63803 20.673C5.07354 20.3854 4.6146 19.9265 4.32698 19.362C4 18.7202 4 17.8802 4 16.2V8Z" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/iconset/arrow-down.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9999 19L17.9999 13M11.9999 19L5.99988 13M11.9999 19L11.9999 5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/iconset/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 8H1M1 8L8 15M1 8L8 1" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/iconset/arrow-narrow-down-left.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 1L1 13M1 13H9M1 13V5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/iconset/arrow-narrow-up-right.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14"  stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 13L13 1M13 1H5M13 1V9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/iconset/arrow-right-smooth.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0253 15.6833C11.8669 15.6833 11.7086 15.625 11.5836 15.5C11.3419 15.2583 11.3419 14.8583 11.5836 14.6167L16.2003 9.99999L11.5836 5.38332C11.3419 5.14166 11.3419 4.74166 11.5836 4.49999C11.8253 4.25832 12.2253 4.25832 12.4669 4.49999L17.5253 9.55833C17.7669 9.79999 17.7669 10.2 17.5253 10.4417L12.4669 15.5C12.3419 15.625 12.1836 15.6833 12.0253 15.6833Z" fill="#EC9A39"/>
+<path d="M16.9415 10.625H2.9165C2.57484 10.625 2.2915 10.3417 2.2915 10C2.2915 9.65833 2.57484 9.375 2.9165 9.375H16.9415C17.2832 9.375 17.5665 9.65833 17.5665 10C17.5665 10.3417 17.2832 10.625 16.9415 10.625Z" fill="#EC9A39"/>
+</svg>

package/src/assets/iconset/arrow-right.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="vuesax/outline/arrow-right">
+<g id="arrow-right">
+<path id="Vector" d="M8.90998 20.67C8.71998 20.67 8.52998 20.6 8.37998 20.45C8.08998 20.16 8.08998 19.68 8.37998 19.39L14.9 12.87C15.38 12.39 15.38 11.61 14.9 11.13L8.37998 4.61002C8.08998 4.32002 8.08998 3.84002 8.37998 3.55002C8.66998 3.26002 9.14998 3.26002 9.43998 3.55002L15.96 10.07C16.47 10.58 16.76 11.27 16.76 12C16.76 12.73 16.48 13.42 15.96 13.93L9.43998 20.45C9.28998 20.59 9.09998 20.67 8.90998 20.67Z" fill=""/>
+</g>
+</g>
+</svg>

package/src/assets/iconset/asterisk-01.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2V22M19.0711 4.92893L4.92893 19.0711M22 12H2M19.0711 19.0711L4.92893 4.92893" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/iconset/asterisk-02.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 4V20M18 6L6 18M20 12H4M18 18L6 6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/iconset/at-sign.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 7.99999V13C16 13.7956 16.3161 14.5587 16.8787 15.1213C17.4413 15.6839 18.2044 16 19 16C19.7957 16 20.5587 15.6839 21.1213 15.1213C21.6839 14.5587 22 13.7956 22 13V12C21.9999 9.74302 21.2362 7.55247 19.8333 5.78452C18.4303 4.01658 16.4706 2.77521 14.2726 2.26229C12.0747 1.74936 9.76794 1.99503 7.72736 2.95936C5.68677 3.92368 4.03241 5.54995 3.03327 7.57371C2.03413 9.59748 1.74898 11.8997 2.22418 14.1061C2.69938 16.3125 3.90699 18.2932 5.65064 19.7263C7.39429 21.1593 9.57144 21.9603 11.8281 21.9991C14.0847 22.0379 16.2881 21.3122 18.08 19.94M16 12C16 14.2091 14.2092 16 12 16C9.79087 16 8.00001 14.2091 8.00001 12C8.00001 9.79085 9.79087 7.99999 12 7.99999C14.2092 7.99999 16 9.79085 16 12Z" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/iconset/award.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.8104 5.49V6.23L14.2704 4.18C12.9304 3.41 11.0604 3.41 9.73043 4.18L6.19043 6.24V5.49C6.19043 3.24 7.42043 2 9.67043 2H14.3304C16.5804 2 17.8104 3.24 17.8104 5.49Z" fill="#FFA54B"/>
+<path d="M17.84 7.97023L17.7 7.90023L16.34 7.12023L13.52 5.49023C12.66 4.99023 11.34 4.99023 10.48 5.49023L7.66 7.11023L6.3 7.91023L6.12 8.00023C4.37 9.18023 4.25 9.40023 4.25 11.2902V15.8102C4.25 17.7002 4.37 17.9202 6.16 19.1302L10.48 21.6202C10.91 21.8802 11.45 21.9902 12 21.9902C12.54 21.9902 13.09 21.8702 13.52 21.6202L17.88 19.1002C19.64 17.9202 19.75 17.7102 19.75 15.8102V11.2902C19.75 9.40023 19.63 9.18023 17.84 7.97023ZM14.79 13.5002L14.18 14.2502C14.08 14.3602 14.01 14.5702 14.02 14.7202L14.08 15.6802C14.12 16.2702 13.7 16.5702 13.15 16.3602L12.26 16.0002C12.12 15.9502 11.89 15.9502 11.75 16.0002L10.86 16.3502C10.31 16.5702 9.89 16.2602 9.93 15.6702L9.99 14.7102C10 14.5602 9.93 14.3502 9.83 14.2402L9.21 13.5002C8.83 13.0502 9 12.5502 9.57 12.4002L10.5 12.1602C10.65 12.1202 10.82 11.9802 10.9 11.8602L11.42 11.0602C11.74 10.5602 12.25 10.5602 12.58 11.0602L13.1 11.8602C13.18 11.9902 13.36 12.1202 13.5 12.1602L14.43 12.4002C15 12.5502 15.17 13.0502 14.79 13.5002Z" fill="#FFA54B"/>
+</svg>

package/src/assets/iconset/battery-charging.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="#000" stroke="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5 15.25C20.09 15.25 19.75 14.91 19.75 14.5C19.75 14.09 20.09 13.75 20.5 13.75C21.09 13.75 21.22 13.66 21.23 13.66C21.25 13.6 21.25 13.25 21.25 13V11C21.25 10.75 21.25 10.41 21.21 10.32C21.2 10.33 21.05 10.25 20.5 10.25C20.09 10.25 19.75 9.91 19.75 9.5C19.75 9.09 20.09 8.75 20.5 8.75C22.58 8.75 22.75 9.77 22.75 11V13C22.75 14.23 22.58 15.25 20.5 15.25Z" />
+<path d="M10 16.75C9.83001 16.75 9.65001 16.69 9.51001 16.57C9.20001 16.3 9.16001 15.83 9.43001 15.51L11.51 13.08C11.54 12.99 11.51 12.91 11.49 12.87C11.46 12.82 11.4 12.75 11.27 12.75H8.97001C8.34001 12.75 7.77001 12.42 7.45001 11.88C7.13001 11.34 7.13001 10.68 7.45001 10.13L9.40001 7.55003C9.65001 7.22003 10.12 7.15003 10.45 7.40003C10.78 7.65003 10.85 8.12003 10.6 8.45003L8.71001 10.95C8.70001 10.98 8.74001 11.07 8.76001 11.12C8.79001 11.17 8.85001 11.24 8.98001 11.24H11.28C11.91 11.24 12.48 11.57 12.8 12.11C13.12 12.65 13.12 13.31 12.8 13.86C12.78 13.9 12.75 13.94 12.72 13.97L10.58 16.47C10.42 16.66 10.21 16.75 10 16.75Z" />
+<path d="M7 19.75C2.59 19.75 1.25 18.41 1.25 14V10C1.25 5.59 2.59 4.25 7 4.25C7.41 4.25 7.75 4.59 7.75 5C7.75 5.41 7.41 5.75 7 5.75C3.43 5.75 2.75 6.43 2.75 10V14C2.75 17.57 3.43 18.25 7 18.25C7.41 18.25 7.75 18.59 7.75 19C7.75 19.41 7.41 19.75 7 19.75Z" />
+<path d="M13 19.75C12.59 19.75 12.25 19.41 12.25 19C12.25 18.59 12.59 18.25 13 18.25C16.57 18.25 17.25 17.57 17.25 14V10C17.25 6.43 16.57 5.75 13 5.75C12.59 5.75 12.25 5.41 12.25 5C12.25 4.59 12.59 4.25 13 4.25C17.41 4.25 18.75 5.59 18.75 10V14C18.75 18.41 17.41 19.75 13 19.75Z" />
+</svg>