@rango-dev/ui 0.15.1-next.2 → 0.15.1-next.21

package/src/components/Icon/SearchIcon.tsx

@@ -16,8 +16,7 @@ export const SearchIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M11.5 21a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19ZM22 22l-2-2"
         strokeWidth={1.5}

package/src/components/Icon/SearchMinusIcon.tsx

@@ -16,8 +16,7 @@ export const SearchMinusIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M9 11.7h5M11.5 21a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19ZM22 22l-2-2"
         strokeWidth={1.5}

package/src/components/Icon/SettingIcon.tsx

@@ -20,8 +20,7 @@ export const SettingsIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <circle cx="12" cy="12" r="3"></circle>
       <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
     </SvgWithStrokeColor>

package/src/components/Icon/SignatureIcon.tsx

@@ -16,8 +16,7 @@ export const SignatureIcon: React.FC<IconProps> = ({
       viewBox="0 0 122.88 107.95"
       xmlSpace="preserve"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M82.19 0c1.22-.01 2.27.4 3.18 1.27l13.27 12.7c.86.82 1.28 1.91 1.3 3.11.02 1.22-.34 2.33-1.18 3.18l-7.06 7.35L72.09 8.67l6.99-7.28C79.94.5 80.98.02 82.19 0zM20.08 68.29a4.536 4.536 0 1 1 2.67 8.67c-6.98 2.14-11.66 6.28-13.21 10.17-.41 1.04-.55 1.99-.39 2.77.12.59.48 1.13 1.07 1.56 2.55 1.86 8.04 2.34 17.26.1 5.46-1.33 11.31-3.13 16.49-4.73 5.29-1.63 9.91-3.06 13.12-3.66 5.92-1.1 11.83-1.85 16.6-1.61 6.26.31 10.96 2.32 12.57 7.13 1.04 3.11.75 5.81.49 8.23-.09.87-.18 1.68-.14 2.21 0 .02.95-.05 5.53-.41 5.3-.42 10.79-2.51 16.21-4.58 2.78-1.06 5.54-2.11 8.67-3.07 2.4-.73 4.93.63 5.65 3.02.73 2.4-.63 4.93-3.02 5.65-2.43.74-5.24 1.82-8.06 2.89-6.04 2.3-12.14 4.63-18.74 5.15-12.07.95-14.87-2.46-15.3-7.95-.1-1.29.03-2.54.17-3.88.16-1.5.34-3.18-.07-4.39-.18-.54-1.89-.82-4.39-.94-3.99-.2-9.22.48-14.54 1.47-2.65.49-7.05 1.85-12.09 3.41-5.27 1.63-11.22 3.46-17.02 4.87-12.14 2.95-20.21 1.7-24.73-1.6-2.54-1.85-4.05-4.27-4.63-7-.54-2.54-.23-5.28.85-8 2.46-6.14 9.23-12.5 18.98-15.48zm21.19-19.84L53.3 60.02l-14.71 3.95c-.53.1-.74-.11-.65-.6l3.33-14.92zm24.6-33.34 19.59 18.87L58.7 62.23l-23.98 6.43c-.86.17-1.2-.17-1.06-.98l5.43-24.31 26.78-28.26z"
         style={{

package/src/components/Icon/SwapWalletIcon.tsx

@@ -16,8 +16,7 @@ export const SwapWalletIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"

package/src/components/Icon/TimeIcon.tsx

@@ -13,8 +13,7 @@ export const TimeIcon = React.forwardRef<SVGSVGElement, IconProps>(
         xmlns="http://www.w3.org/2000/svg"
         className="_icon"
         {...props}
-        ref={forwardedRef}
-      >
+        ref={forwardedRef}>
         <circle cx={10} cy={10} r={7.25} strokeWidth={1.5} />
         <path
           fillRule="evenodd"

package/src/components/Icon/TrashIcon.tsx

@@ -16,8 +16,7 @@ export const TrashIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M21.5 5.98c-3.33-.33-6.68-.5-10.02-.5-1.98 0-3.96.1-5.94.3l-2.04.2M9 4.97l.22-1.31C9.38 2.71 9.5 2 11.19 2h2.62c1.69 0 1.82.75 1.97 1.67l.22 1.3M19.35 9.14l-.65 10.07c-.11 1.57-.2 2.79-2.99 2.79H9.29c-2.79 0-2.88-1.22-2.99-2.79L5.65 9.14M10.83 16.5h3.33M10 12.5h5"
         strokeWidth={1.5}

package/src/components/Icon/TryAgainIcon.tsx

@@ -16,8 +16,7 @@ export const TryAgainIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M22 12c0 5.52-4.48 10-10 10s-8.89-5.56-8.89-5.56m0 0h4.52m-4.52 0v5M2 12C2 6.48 6.44 2 12 2c6.67 0 10 5.56 10 5.56m0 0v-5m0 5h-4.44"
         strokeWidth={1.5}

package/src/components/Icon/VerticalSwapIcon.tsx

@@ -16,8 +16,7 @@ export const VerticalSwapIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="m13.82 6.85 3.04 3.04M13.82 17.15V6.85M10.18 17.15l-3.04-3.04M10.18 6.85v10.3"
         strokeWidth={1.5}

package/src/components/Icon/WalletIconIcon.tsx

@@ -16,8 +16,7 @@ export const WalletIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"

package/src/components/Icon/WarningIcon.tsx

@@ -16,8 +16,7 @@ export const WarningIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M12 9v5M12 21.41H5.94c-3.47 0-4.92-2.48-3.24-5.51l3.12-5.62L8.76 5c1.78-3.21 4.7-3.21 6.48 0l2.94 5.29 3.12 5.62c1.68 3.03.22 5.51-3.24 5.51H12v-.01Z"
         strokeWidth={1.5}

package/src/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,20 @@
+import type { PropTypes } from './IconButton.types';
+import type { Meta } from '@storybook/react';
+
+import React from 'react';
+
+import { WalletIcon } from '../../icons';
+
+import { IconButton } from './IconButton';
+
+const meta: Meta<typeof IconButton> = {
+  component: IconButton,
+};
+
+export default meta;
+
+export const Main = (props: PropTypes) => (
+  <IconButton {...props}>
+    <WalletIcon />
+  </IconButton>
+);

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,33 @@
+import type { PropTypes } from './IconButton.types';
+import type { PropsWithChildren, Ref } from 'react';
+
+import React from 'react';
+
+import { Button } from '../Button';
+
+// border-radius: 100% + overflow: hidden
+function IconButtonComponent(
+  props: PropsWithChildren<PropTypes>,
+  ref: Ref<HTMLButtonElement>
+) {
+  const { style, ...otherProps } = props;
+  return (
+    <Button
+      className="_icon-button"
+      ref={ref}
+      {...otherProps}
+      style={{
+        borderRadius: '100%',
+        lineHeight: 0,
+        ...style,
+      }}>
+      {props.children}
+    </Button>
+  );
+}
+
+const IconButton = React.forwardRef(IconButtonComponent);
+IconButton.displayName = 'IconButton';
+IconButton.toString = () => '._icon-button';
+
+export { IconButton };

package/src/components/IconButton/IconButton.types.ts

@@ -0,0 +1,12 @@
+import type { PropTypes as ButtonPropTypes } from '../Button/Button.types';
+import type { CSSProperties } from 'react';
+
+export type PropTypes = {
+  size?: ButtonPropTypes['size'];
+  type?: ButtonPropTypes['type'];
+  variant?: ButtonPropTypes['variant'];
+  onClick?: ButtonPropTypes['onClick'];
+  style?: CSSProperties;
+  loading?: boolean;
+  disabled?: boolean;
+};

package/src/components/IconButton/index.ts

@@ -0,0 +1 @@
+export { IconButton } from './IconButton';

package/src/components/LiquiditySourceList/LiquiditySource.stories.tsx

@@ -1,10 +1,13 @@
+import type { PropTypes } from './LiquiditySourceList';
+import type { Meta } from '@storybook/react';
+
 import React from 'react';
-import { Meta } from '@storybook/react';
-import { LiquiditySourceList, PropTypes } from './LiquiditySourceList';
+
+import { LiquiditySourceList } from './LiquiditySourceList';
 import { liquiditySources } from './mockData';
 
 export default {
-  title: 'Components/Liquidity Source List',
+  title: 'Components/Liquidity Source List(Deprecated)',
   component: LiquiditySourceList,
   args: {
     loadingStatus: 'success',

package/src/components/LiquiditySourceList/LiquiditySourceList.tsx

@@ -1,16 +1,18 @@
-import { CSSProperties } from '@stitches/react';
-import React, { useEffect, useState } from 'react';
+import type { LiquiditySource, LoadingStatus } from '../../types/meta';
+import type { CSSProperties } from '@stitches/react';
+
 import { i18n } from '@lingui/core';
+import React, { useEffect, useState } from 'react';
+
 import { styled } from '../../theme';
-import { LiquiditySource, LoadingStatus } from '../../types/meta';
+import { LoadingFailedAlert } from '../Alert/LoadingFailedAlert';
+import { NotFoundAlert } from '../Alert/NotFoundAlert';
 import { Button } from '../Button/Button';
+import { Image } from '../common';
 import { Divider } from '../Divider';
+import { Spinner } from '../Spinner';
 import { Switch } from '../Switch';
 import { Typography } from '../Typography';
-import { Spinner } from '../Spinner';
-import { LoadingFailedAlert } from '../Alert/LoadingFailedAlert';
-import { NotFoundAlert } from '../Alert/NotFoundAlert';
-import { Image } from '../common';
 
 const groupLiquiditySources = (
   liquiditySources: LiquiditySource[]
@@ -75,7 +77,9 @@ export function LiquiditySourceList(props: PropTypes) {
   const changeLiquiditySources = (clickedItem: LiquiditySource) => {
     clickedItem.selected = !clickedItem.selected;
     setSelected((prevState) => {
-      if (clickedItem.selected) return [...prevState, clickedItem];
+      if (clickedItem.selected) {
+        return [...prevState, clickedItem];
+      }
       return prevState.filter((item) => item.title != clickedItem.title);
     });
     onChange(clickedItem);
@@ -104,8 +108,10 @@ export function LiquiditySourceList(props: PropTypes) {
       loaded={loadingStatus === 'success'}>
       <div>
         <LiquiditySourceType>
-          <Typography variant="h5">{i18n.t('Bridges')}</Typography>
-          <Typography variant="body1" color="neutral800">
+          <Typography variant="title" size="xmedium">
+            {i18n.t('Bridges')}
+          </Typography>
+          <Typography variant="body" size="medium" color="neutral800">
             {totalSelectedBridges === totalBridges
               ? totalBridges
               : `${totalSelectedBridges} / ${totalBridges}`}
@@ -121,14 +127,18 @@ export function LiquiditySourceList(props: PropTypes) {
         {loadingStatus === 'success' && (
           <>
             {totalBridges ? (
-              bridges.map((liquiditySource, index) => (
-                <LiquiditySourceItem
-                  liquiditySource={liquiditySource}
-                  key={index}
-                  selected={isSelected(liquiditySource)}
-                  onChange={changeLiquiditySources}
-                />
-              ))
+              bridges.map((liquiditySource, index) => {
+                const key = `item-${index}`;
+
+                return (
+                  <LiquiditySourceItem
+                    liquiditySource={liquiditySource}
+                    key={key}
+                    selected={isSelected(liquiditySource)}
+                    onChange={changeLiquiditySources}
+                  />
+                );
+              })
             ) : (
               <NotFoundAlert catergory="Bridge" searchedFor={searchedFor} />
             )}
@@ -137,8 +147,10 @@ export function LiquiditySourceList(props: PropTypes) {
       </div>
       <div>
         <LiquiditySourceType>
-          <Typography variant="h5">{i18n.t('Exchanges')}</Typography>
-          <Typography variant="body1" color="neutral800">
+          <Typography variant="title" size="xmedium">
+            {i18n.t('Exchanges')}
+          </Typography>
+          <Typography variant="body" size="medium" color="neutral800">
             {totalSelectedExchanges === totalExchanges
               ? totalExchanges
               : `${totalSelectedExchanges} / ${totalExchanges}`}
@@ -154,14 +166,17 @@ export function LiquiditySourceList(props: PropTypes) {
         {loadingStatus == 'success' && (
           <>
             {totalExchanges ? (
-              exchanges.map((liquiditySource, index) => (
-                <LiquiditySourceItem
-                  liquiditySource={liquiditySource}
-                  key={index}
-                  selected={isSelected(liquiditySource)}
-                  onChange={changeLiquiditySources}
-                />
-              ))
+              exchanges.map((liquiditySource, index) => {
+                const key = `item-${index}`;
+                return (
+                  <LiquiditySourceItem
+                    liquiditySource={liquiditySource}
+                    key={key}
+                    selected={isSelected(liquiditySource)}
+                    onChange={changeLiquiditySources}
+                  />
+                );
+              })
             ) : (
               <NotFoundAlert catergory="Exchange" searchedFor={searchedFor} />
             )}
@@ -171,7 +186,9 @@ export function LiquiditySourceList(props: PropTypes) {
     </MainContainer>
   );
 }
-
+/**
+ * @deprecated will be removed in v2
+ */
 const LiquiditySourceItem = ({
   liquiditySource,
   selected,
@@ -183,7 +200,6 @@ const LiquiditySourceItem = ({
 }) => (
   <Button
     size="large"
-    align="start"
     variant="outlined"
     prefix={
       <LiquidityImageContainer>
@@ -193,6 +209,8 @@ const LiquiditySourceItem = ({
     suffix={<Switch checked={selected} />}
     style={{ marginBottom: '12px' }}
     onClick={onChange.bind(null, liquiditySource)}>
-    <Typography variant="body1">{liquiditySource.title}</Typography>
+    <Typography variant="body" size="medium">
+      {liquiditySource.title}
+    </Typography>
   </Button>
 );

package/src/components/List/List.stories.tsx

@@ -0,0 +1,181 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import React, { useState } from 'react';
+
+import {
+  ChevronRightIcon,
+  DeleteIcon,
+  RefreshIcon,
+  WalletIcon,
+} from '../../icons';
+import { Button } from '../Button';
+import { Checkbox } from '../Checkbox';
+import { Chip } from '../Chip';
+import { ListItemButton } from '../ListItemButton';
+
+import { List } from './List';
+
+const DEFAULT_TITLE = 'Your title';
+const DEFAULT_DESCRIPTION = 'Here you can write your description.';
+const DEFAULT_ICON = <WalletIcon />;
+
+type Story = StoryObj<typeof List>;
+
+export default {
+  title: 'Components/List',
+  component: List,
+  argTypes: {},
+} satisfies Meta<typeof List>;
+
+export const Item: Story = {
+  args: {},
+  render: () => {
+    return (
+      <List
+        items={[
+          {
+            id: '1',
+            title: DEFAULT_TITLE,
+            description: DEFAULT_DESCRIPTION,
+          },
+          {
+            id: '2',
+            title: DEFAULT_TITLE,
+          },
+          {
+            id: '3',
+            title: DEFAULT_TITLE,
+            description: DEFAULT_DESCRIPTION,
+            start: <DeleteIcon />,
+          },
+          {
+            id: '4',
+            title: DEFAULT_TITLE,
+            start: <RefreshIcon />,
+            end: (
+              <Button
+                type="primary"
+                onClick={() => {
+                  console.log('Clicked on Hello Button.');
+                }}>
+                Hello, Button.
+              </Button>
+            ),
+          },
+          {
+            id: '5',
+            title: DEFAULT_TITLE,
+            description: DEFAULT_DESCRIPTION,
+            start: DEFAULT_ICON,
+            end: <ChevronRightIcon />,
+          },
+          {
+            id: '6',
+            title: DEFAULT_TITLE,
+            description: DEFAULT_DESCRIPTION,
+            start: DEFAULT_ICON,
+            end: <Checkbox checked />,
+          },
+          {
+            id: '7',
+            title: (
+              <>
+                Dai
+                <Chip label="Ethereum" />
+              </>
+            ),
+            description: DEFAULT_DESCRIPTION,
+            start: DEFAULT_ICON,
+            end: <Checkbox checked />,
+          },
+          {
+            id: '8',
+            title: DEFAULT_TITLE,
+            description: DEFAULT_DESCRIPTION,
+            start: DEFAULT_ICON,
+            end: 'end can be anything',
+          },
+        ]}
+      />
+    );
+  },
+};
+
+export const ItemButton: Story = {
+  args: {},
+  render: () => {
+    return <ItemButtonExamples />;
+  },
+};
+
+function ItemButtonExamples() {
+  const [checkedItem, setCheckedItem] = useState('');
+  return (
+    <List
+      type={
+        <ListItemButton
+          id="_"
+          title="List Item Button"
+          onClick={(id) => {
+            console.log('clicked on ', {
+              id,
+              checkedItem,
+              check: checkedItem === id,
+              result: checkedItem === id ? '' : id,
+            });
+            setCheckedItem(checkedItem === id ? '' : id);
+          }}
+        />
+      }
+      items={[
+        {
+          id: '1',
+          title: DEFAULT_TITLE,
+          description: DEFAULT_DESCRIPTION,
+        },
+        {
+          id: '2',
+          title: DEFAULT_TITLE,
+        },
+        {
+          id: '3',
+          title: DEFAULT_TITLE,
+          description: DEFAULT_DESCRIPTION,
+          start: <DeleteIcon />,
+        },
+        {
+          id: '4',
+          title: DEFAULT_TITLE,
+          start: <RefreshIcon />,
+          end: <Button type="primary">Hello, Button.</Button>,
+        },
+        {
+          id: '5',
+          title: DEFAULT_TITLE,
+          description: DEFAULT_DESCRIPTION,
+          start: DEFAULT_ICON,
+          end: <ChevronRightIcon />,
+        },
+        {
+          id: '6',
+          title: DEFAULT_TITLE,
+          description: DEFAULT_DESCRIPTION,
+          start: DEFAULT_ICON,
+          end: <Checkbox checked={checkedItem === '6'} />,
+        },
+        {
+          id: '7',
+          title: (
+            <>
+              Dai
+              <Chip label="Ethereum" />
+            </>
+          ),
+          description: DEFAULT_DESCRIPTION,
+          start: DEFAULT_ICON,
+          end: <Checkbox checked={checkedItem === '7'} />,
+        },
+      ]}
+    />
+  );
+}

package/src/components/List/List.styles.tsx

@@ -0,0 +1,7 @@
+import { styled } from '../../theme';
+
+export const BaseList = styled('ul', {
+  padding: 0,
+  margin: 0,
+  listStyle: 'none',
+});

package/src/components/List/List.tsx

@@ -0,0 +1,30 @@
+import type { ListPropTypes } from './List.types';
+
+import React from 'react';
+
+import { ListItem } from '../ListItem';
+
+import { BaseList } from './List.styles';
+
+function List(props: ListPropTypes) {
+  const container = props.type;
+
+  return (
+    <BaseList as={props.as}>
+      {props.items.map((item) => {
+        const { id, ...itemProps } = item;
+
+        if (!!container) {
+          return React.cloneElement(container, {
+            ...itemProps,
+            key: id,
+            id,
+          });
+        }
+        return <ListItem key={id} {...itemProps} />;
+      })}
+    </BaseList>
+  );
+}
+
+export { List };

package/src/components/List/List.types.ts

@@ -0,0 +1,12 @@
+import type { ListItemProps } from '../ListItem';
+import type * as Stitches from '@stitches/react';
+import type React from 'react';
+
+export interface ListPropTypes {
+  type?: React.ReactElement;
+  items: (ListItemProps & {
+    id: string;
+  })[];
+  as?: 'div' | 'ul';
+  css?: Stitches.CSS;
+}

package/src/components/List/index.ts

@@ -0,0 +1 @@
+export { List } from './List';

package/src/components/ListItem/ListItem.styles.ts

@@ -0,0 +1,52 @@
+import { darkTheme, styled } from '../../theme';
+
+export const BaseListItem = styled('li', {
+  width: '100%',
+  borderRadius: '$xs',
+  display: 'flex',
+  alignItems: 'center',
+  padding: '$10 $5',
+  border: 0,
+  backgroundColor: 'transparent',
+
+  '.item-start-container': {
+    paddingRight: '$10',
+    flexShrink: 0,
+
+    '& svg': {
+      display: 'block',
+    },
+  },
+  '.item-text-container': {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 'auto',
+    textAlign: 'left',
+
+    '.item-text-title': {
+      fontWeight: 'bold',
+      display: 'flex',
+      alignItems: 'center',
+    },
+  },
+  '.item-end-container': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingLeft: '$10',
+  },
+  variants: {
+    hasDivider: {
+      true: {
+        borderBottom: '1px solid',
+        $$color: '$colors$neutral300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral400',
+        },
+        borderColor: '$$color',
+        borderBottomRightRadius: 0,
+        borderBottomLeftRadius: 0,
+      },
+    },
+  },
+});