@true-engineering/true-react-common-ui-kit 3.0.0-alpha.1 → 3.0.0-alpha.11

package/dist/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.11",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/AddButton/AddButton.stories.tsx

@@ -1,21 +1,21 @@
-import { ComponentStory } from '@storybook/react';
-import { AddButton } from './AddButton';
-
-export default {
-  title: 'AddButton',
-  component: AddButton,
-};
-
-const Template: ComponentStory<typeof AddButton> = (args) => (
-  <AddButton {...args} onClick={console.log} />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  text: 'Добавить билет',
-  isDisabled: false,
-  isFullWidth: false,
-};
-
-Default.parameters = { controls: { exclude: ['onClick'] } };
+import { ComponentStory } from '@storybook/react';
+import { AddButton } from './AddButton';
+
+export default {
+  title: 'AddButton',
+  component: AddButton,
+};
+
+const Template: ComponentStory<typeof AddButton> = (args) => (
+  <AddButton {...args} onClick={console.log} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: 'Добавить билет',
+  isDisabled: false,
+  isFullWidth: false,
+};
+
+Default.parameters = { controls: { exclude: ['onClick'] } };

package/src/components/Checkbox/Checkbox.styles.ts

@@ -4,6 +4,7 @@ export const useStyles = createThemedStyles('Checkbox', {
   root: {
     cursor: 'pointer',
     display: 'flex',
+    alignItems: 'center',
     gap: 14,
     width: 'fit-content',
   },

package/src/components/Checkbox/Checkbox.tsx

@@ -12,7 +12,7 @@ import { useStyles, ICheckboxStyles } from './Checkbox.styles';
 
 export interface ICheckboxProps<V> extends ICommonProps<ICheckboxStyles> {
   children?: ReactNode;
-  isChecked?: boolean;
+  isChecked: boolean | undefined;
   isSemiChecked?: boolean;
   isDisabled?: boolean;
   isReadonly?: boolean;

package/src/components/Colors/Colors.stories.tsx

@@ -1,7 +1,7 @@
-import { Colors } from './Colors';
-
-export default {
-  title: 'Colors',
-};
-
-export const Default = (): JSX.Element => <Colors />;
+import { Colors } from './Colors';
+
+export default {
+  title: 'Colors',
+};
+
+export const Default = (): JSX.Element => <Colors />;

package/src/components/DateInput/DateInput.tsx

@@ -1,6 +1,5 @@
 import { FormEvent, MouseEvent, forwardRef, ChangeEvent } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
@@ -33,7 +32,6 @@ export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
       data,
       isRange,
       tweakStyles,
-      testId,
       onClick,
       onChange,
       ...inputProps
@@ -70,12 +68,7 @@ export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
     };
 
     return (
-      <div
-        className={clsx(classes.root, className)}
-        onClick={onClick}
-        {...addDataTestId(testId)}
-        {...addDataAttributes(data)}
-      >
+      <div className={clsx(classes.root, className)} onClick={onClick} {...addDataAttributes(data)}>
         <Input
           {...inputProps}
           ref={ref}
@@ -84,7 +77,6 @@ export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
           placeholder={
             placeholder ?? (isRange ? EMPTY_DATE_RANGE_INPUT_VALUE : EMPTY_DATE_INPUT_VALUE)
           }
-          testId={getTestId(testId, 'input')}
           tweakStyles={tweakInputStyles}
           onChange={handleChange}
           beforeMaskedStateChange={beforeMaskedStateChange}

package/src/components/DateInput/constants.ts

@@ -1,2 +1,2 @@
-export const EMPTY_DATE_INPUT_VALUE = '__.__.____';
-export const EMPTY_DATE_RANGE_INPUT_VALUE = `${EMPTY_DATE_INPUT_VALUE} - ${EMPTY_DATE_INPUT_VALUE}`;
+export const EMPTY_DATE_INPUT_VALUE = '__.__.____';
+export const EMPTY_DATE_RANGE_INPUT_VALUE = `${EMPTY_DATE_INPUT_VALUE} - ${EMPTY_DATE_INPUT_VALUE}`;

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -47,6 +47,7 @@ const Template: ComponentStory<typeof DatePicker> = (args) => {
         <DatePicker
           {...args}
           locale={ru}
+          testId="datepicker"
           months={months}
           selectedDate={date}
           startDate={startDate}

package/src/components/DatePicker/DatePicker.tsx

@@ -4,7 +4,6 @@ import 'react-datepicker/dist/react-datepicker.css';
 import clsx from 'clsx';
 import { isAfter, isBefore, isValid } from 'date-fns';
 import {
-  addDataTestId,
   isEmpty,
   isNotEmpty,
   isStringNotEmpty,
@@ -40,7 +39,6 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
   (
     {
       data,
-      testId,
       selectedDate = null,
       minDate,
       maxDate,
@@ -234,7 +232,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
     }, [selectedDate, startDate, endDate]);
 
     return (
-      <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+      <div className={classes.root} {...addDataAttributes(data)}>
         <DatePickerComponent
           ref={ref}
           minDate={minDate}

package/src/components/FiltersPane/FiltersPane.stories.tsx

@@ -72,7 +72,6 @@ type ConfigValues = {
 
 interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps<Values, Content> {
   containerWidth: number;
-  multiselectWidth: number;
   isSearchDisabled: boolean;
   isSearchAutosizeable: boolean;
   shouldShowSettingsButton: boolean;
@@ -83,7 +82,6 @@ interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps
 
 function FiltersPaneWithCustomProps<Values, Content>({
   containerWidth,
-  multiselectWidth,
   isSearchDisabled,
   isSearchAutosizeable,
   shouldShowSettingsButton,
@@ -141,7 +139,6 @@ function FiltersPaneWithCustomProps<Values, Content>({
     multiSelect: {
       name: 'multiSelect',
       type: 'multiSelect',
-      width: multiselectWidth,
       pageSize: 15,
       checkboxPosition,
       isGroupingEnabled,
@@ -163,7 +160,6 @@ function FiltersPaneWithCustomProps<Values, Content>({
       isGroupingEnabled,
       checkboxPosition,
       searchMaxLength: 12,
-      width: multiselectWidth,
       fetchOptions: (q?: string): Promise<Array<{ v: string }>> => {
         if (q === '' || q === 'undefined' || q === '123') {
           return new Promise((resolve) => setTimeout(() => resolve([])));
@@ -265,9 +261,6 @@ export default {
     containerWidth: {
       control: { type: 'range', min: 100, max: 1000, step: 100 },
     },
-    multiselectWidth: {
-      control: { type: 'range', min: 100, max: 400, step: 50 },
-    },
     checkboxPosition: {
       control: 'inline-radio',
       options: ['left', 'right'],
@@ -288,7 +281,6 @@ Default.args = {
   hasClearButton: true,
   isDisabled: false,
   containerWidth: 400,
-  multiselectWidth: 200,
   withFieldNameInLabel: true,
   isGroupingEnabled: true,
   checkboxPosition: 'left',

package/src/components/FiltersPane/components/FilterInterval/FilterInterval.styles.ts

@@ -1,3 +1,4 @@
+import cloneDeep from 'lodash-es/cloneDeep';
 import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
 import { IButtonStyles } from '../../../Button';
 import { IInputStyles } from '../../../Input';
@@ -49,7 +50,7 @@ export const inputStyles: IInputStyles = {
   },
 };
 
-export const clearButtonStyles = innerTextButtonStyles;
+export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
 
 export type IFilterIntervalStyles = ITweakStyles<
   typeof useStyles,

package/src/components/FiltersPane/components/FilterSelect/FilterSelect.styles.ts

@@ -1,3 +1,4 @@
+import cloneDeep from 'lodash-es/cloneDeep';
 import { colors, createThemedStyles, helpers, ITweakStyles } from '../../../../theme';
 import { IButtonStyles } from '../../../Button';
 import { ISearchInputStyles } from '../../../SearchInput';
@@ -8,6 +9,7 @@ const LIST_GAP = 12;
 
 export const useStyles = createThemedStyles('FilterSelect', {
   root: {
+    width: 220,
     background: colors.CLASSIC_WHITE,
   },
 
@@ -127,7 +129,7 @@ export const searchInputStyles: ISearchInputStyles = {
   },
 };
 
-export const clearButtonStyles = innerTextButtonStyles;
+export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
 
 export type IFilterSelectStyles = ITweakStyles<
   typeof useStyles,

package/src/components/FiltersPane/components/FilterSelect/FilterSelect.tsx

@@ -30,10 +30,6 @@ export interface IFilterSelectProps<Value> extends ICommonProps<IFilterSelectSty
    * @default false
    */
   isGroupingEnabled?: boolean;
-  /**
-   * @default `220px`
-   */
-  width?: string | number;
   localeKey?: IFilterLocaleKey;
   locale?: Partial<ISelectLocale>;
   options?: Value[];
@@ -54,7 +50,6 @@ export function FilterSelect<Value>({
   value,
   isSearchEnabled = false,
   isGroupingEnabled = false,
-  width = 220,
   localeKey,
   locale,
   onChange,
@@ -225,7 +220,7 @@ export function FilterSelect<Value>({
   }, []);
 
   return (
-    <div className={classes.root} style={{ width }} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data)}>
       {isSearchEnabled && (
         <div className={classes.dropdownInput}>
           <SearchInput

package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.styles.ts

@@ -1,3 +1,4 @@
+import cloneDeep from 'lodash-es/cloneDeep';
 import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
 import { IButtonStyles } from '../../../Button';
 import { IDatePickerStyles } from '../../../DatePicker';
@@ -31,7 +32,7 @@ export const useStyles = createThemedStyles('FilterWithDates', {
   datepicker: {},
 });
 
-export const clearButtonStyles = innerTextButtonStyles;
+export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
 
 export const backButtonStyles = innerTextButtonStyles;
 

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.styles.ts

@@ -104,6 +104,7 @@ export const selectStyles: ISelectStyles = {
     borderBottomLeftRadius: 6,
     borderBottomRightRadius: 6,
     boxShadow: 'none',
+    width: '100%',
   },
 };
 

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.tsx

@@ -7,7 +7,7 @@ import { Icon } from '../../../Icon';
 import { SearchInput } from '../../../SearchInput';
 import { getLocale } from '../../helpers';
 import { IFilterLocaleKey, IFiltersPaneSearchPayload, IPartialFilterLocale } from '../../types';
-import { FilterSelect, IFilterSelectProps } from '../FilterSelect';
+import { FilterSelect } from '../FilterSelect';
 import {
   useStyles,
   IFiltersPaneSearchStyles,
@@ -26,7 +26,6 @@ export interface IFiltersPaneSearchProps<Value> extends ICommonProps<IFiltersPan
   getValueView?: (value: Value) => ReactNode;
   getValueId?: (value: Value) => string;
   getValueString?: (value: Value) => string;
-  selectWidth?: IFilterSelectProps<Value>['width'];
   hasClearSelectButton?: boolean;
   isDisabled?: boolean;
   isSelectSearchEnabled?: boolean;
@@ -43,7 +42,6 @@ export function FiltersPaneSearch<Value>({
   getValueId,
   getValueView,
   getValueString,
-  selectWidth = '100%',
   hasClearSelectButton,
   isDisabled = false,
   isSelectSearchEnabled = true,
@@ -155,7 +153,6 @@ export function FiltersPaneSearch<Value>({
               localeKey={localeKey}
               locale={translates}
               onChange={handleFieldsChange}
-              width={selectWidth}
               isSearchEnabled={isSelectSearchEnabled}
               hasClearButton={hasClearSelectButton}
               testId={testId !== undefined ? `${testId}-dropdown` : undefined}

package/src/components/FiltersPane/types.ts

@@ -152,5 +152,5 @@ export type ISelectLocaleKey = keyof typeof SelectLocales;
 
 export type IFilterWithDateDatePickerProps = Omit<
   IDatePickerProps,
-  'onChange' | 'value' | 'locale' | 'months' | 'selectedDate' | 'tweakStyles' // TODO: rethink
+  'onChange' | 'value' | 'locale' | 'months' | 'selectedDate' | 'tweakStyles'
 >;

package/src/components/Flag/augment.d.ts

@@ -1 +1 @@
-declare module 'country-flag-icons/react/3x2';
+declare module 'country-flag-icons/react/3x2';

package/src/components/FlexibleTable/FlexibleTable.stories.tsx

@@ -315,18 +315,20 @@ const tweak: IFlexibleTableStyles = {
 };
 
 const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (args) => (
-  <FlexibleTable<ITableContent>
-    {...args}
-    uniqueField="contractCode"
-    expandableRowComponent={(item, _, close) =>
-      item.contractCode === 'OB_UT_M119' ? (
-        <div onClick={close}>всем привет :) {item.contractCode}</div>
-      ) : null
-    }
-    tweakStyles={tweak}
-    content={content}
-    config={config}
-  />
+  <div style={{ width: 500, overflow: 'auto' }}>
+    <FlexibleTable<ITableContent>
+      {...args}
+      uniqueField="contractCode"
+      expandableRowComponent={(item, _, close) =>
+        item.contractCode === 'OB_UT_M119' ? (
+          <div onClick={close}>всем привет :) {item.contractCode}</div>
+        ) : null
+      }
+      tweakStyles={tweak}
+      content={content}
+      config={config}
+    />
+  </div>
 );
 
 export const Default = Template.bind({});

package/src/components/FlexibleTable/FlexibleTable.styles.ts

@@ -22,16 +22,6 @@ export const useStyles = createThemedStyles('FlexibleTable', {
     maxHeight: '100%',
   },
 
-  horizontallyScrolled: {
-    '& $cellSticky': {
-      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
-    },
-
-    '& $headerSticky::before': {
-      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
-    },
-  },
-
   loader: {
     position: 'sticky',
     left: 0,
@@ -75,6 +65,10 @@ export const useStyles = createThemedStyles('FlexibleTable', {
       pointerEvents: 'none',
       zIndex: 1,
       transition: ['box-shadow', '0.25s', 'ease-in-out'],
+
+      '[data-scrolled] &': {
+        boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
+      },
     },
 
     '&::after': {

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -1,10 +1,12 @@
 import { ReactNode, RefObject, useCallback, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
+import { addDataTestId, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ThemedPreloader } from '../ThemedPreloader';
 import { FlexibleTableRow } from './components';
+import { hasHorizontalScrollBar } from './helpers';
 import { IFlexibleTableConfigType, IInfinityScrollConfig, ITitleComponent } from './types';
 import { useStyles, IFlexibleTableStyles } from './FlexibleTable.styles';
 
@@ -19,6 +21,9 @@ export interface IFlexibleTableProps<Values extends Record<string, any>>
   isHorizontallyScrollable?: boolean;
   isFirstColumnSticky?: boolean;
   infinityScrollConfig?: IInfinityScrollConfig;
+  /**
+   * @default Индекс строки
+   */
   uniqueField?: keyof Values;
   onHeadClick?: (column: keyof Values) => void;
   // TODO: Заменить string на Generic Values[uniqueField]
@@ -63,6 +68,7 @@ export function FlexibleTable<Values extends Record<string, any>>({
 
   const observer = useRef<IntersectionObserver>();
   const scrollRef = useRef<HTMLDivElement>(null);
+  const ref = refForScroll ?? scrollRef;
 
   const initIntersectionObserver = useCallback(
     (node: HTMLDivElement) => {
@@ -97,7 +103,7 @@ export function FlexibleTable<Values extends Record<string, any>>({
   );
 
   useEffect(() => {
-    const scrollContainer = (refForScroll ?? scrollRef).current;
+    const scrollContainer = ref.current;
     if (scrollContainer === null || !isHorizontallyScrollable || !isFirstColumnSticky) {
       return;
     }
@@ -110,13 +116,15 @@ export function FlexibleTable<Values extends Record<string, any>>({
 
   return (
     <div
-      ref={refForScroll ?? scrollRef}
-      className={clsx(
-        isHorizontallyScrollable && classes.scroll,
-        isHorizontallyScrolled && classes.horizontallyScrolled,
-      )}
+      ref={ref}
+      className={clsx({ [classes.scroll]: isHorizontallyScrollable })}
+      {...addDataAttributes({
+        scrolled: isHorizontallyScrolled ? true : undefined,
+        scrollable:
+          isHorizontallyScrollable && hasHorizontalScrollBar(ref.current) ? true : undefined,
+      })}
     >
-      <table className={classes.root} data-testid={testId} {...addDataAttributes(data)}>
+      <table className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
         <thead>
           <tr className={classes.headerRow}>
             {(enabledColumns || Object.keys(content[0])).map((key, idx) => {
@@ -131,11 +139,10 @@ export function FlexibleTable<Values extends Record<string, any>>({
 
               return (
                 <th
-                  className={clsx(
-                    classes.header,
-                    isFirstColumnSticky && idx === 0 && classes.headerSticky,
-                    isFirstColumnSticky && idx === 1 && classes.headerSecond,
-                  )}
+                  className={clsx(classes.header, {
+                    [classes.headerSticky]: isFirstColumnSticky && idx === 0,
+                    [classes.headerSecond]: isFirstColumnSticky && idx === 1,
+                  })}
                   style={{
                     minWidth: itemConfig?.minWidth,
                     width: itemConfig?.width,
@@ -163,17 +170,17 @@ export function FlexibleTable<Values extends Record<string, any>>({
               </tr>
             )}
 
-          {content.map((item, idx) => (
+          {content.map((item, i) => (
             <FlexibleTableRow
               item={item}
               uniqueField={uniqueField}
-              isActive={activeRows?.includes(idx) ?? false}
+              isActive={activeRows?.includes(i) ?? false}
               isFirstColumnSticky={isFirstColumnSticky}
               onRowClick={onRowClick}
               onRowHover={onRowHover}
               enabledColumns={enabledColumns}
               config={config}
-              key={uniqueField ? item[uniqueField] : idx}
+              key={isNotEmpty(uniqueField) ? item[uniqueField] : i}
               rowAttributes={rowAttributes}
               tweakStyles={tweakTableRowStyles}
               expandableRowComponent={expandableRowComponent}

package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.styles.ts

@@ -18,6 +18,10 @@ export const useStyles = createThemedStyles('FlexibleTableCell', {
     paddingLeft: 24,
     paddingRight: 12,
     ...getTransition(['box-shadow']),
+
+    '[data-scrolled] &': {
+      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
+    },
   },
 
   second: {

package/src/components/FlexibleTable/helpers.ts

@@ -0,0 +1,4 @@
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+
+export const hasHorizontalScrollBar = (el: HTMLElement | null | undefined): boolean =>
+  isNotEmpty(el) && el.scrollWidth !== el.clientWidth;

package/src/components/Icon/complexIcons/augment.d.ts

@@ -1 +1 @@
-declare module '*.svg?raw';
+declare module '*.svg?raw';

package/src/components/Icon/complexIcons/avatarGreen.svg

@@ -1,58 +1,58 @@
-  <svg
-    width="100%"
-    height="100%"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
-    <mask
-      id="mask0_0_12744"
-      style="mask-type: 'alpha';"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="32"
-      height="32"
-    >
-      <circle cx="16" cy="16" r="16" fill="white" />
-    </mask>
-    <g mask="url(#mask0_0_12744)">
-      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
-      <mask
-        id="mask1_0_12744"
-        style="mask-type: 'alpha';"
-        maskUnits="userSpaceOnUse"
-        x="3"
-        y="16"
-        width="26"
-        height="26"
-      >
-        <circle cx="16" cy="29" r="13" fill="white" />
-      </mask>
-      <g mask="url(#mask1_0_12744)">
-        <ellipse
-          cx="16"
-          cy="17.5"
-          rx="6"
-          ry="7.5"
-          fill="#505F79"
-          fill-opacity="0.204983"
-        />
-      </g>
-    </g>
-    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
-    <defs>
-      <linearGradient
-        id="paint0_linear_0_12744"
-        x1="13.347"
-        y1="46.279"
-        x2="33.5318"
-        y2="30.8088"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stop-color="#ABD229" />
-        <stop offset="1" stop-color="#9CD03F" />
-      </linearGradient>
-    </defs>
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
+    <mask
+      id="mask0_0_12744"
+      style="mask-type: 'alpha';"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="32"
+      height="32"
+    >
+      <circle cx="16" cy="16" r="16" fill="white" />
+    </mask>
+    <g mask="url(#mask0_0_12744)">
+      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
+      <mask
+        id="mask1_0_12744"
+        style="mask-type: 'alpha';"
+        maskUnits="userSpaceOnUse"
+        x="3"
+        y="16"
+        width="26"
+        height="26"
+      >
+        <circle cx="16" cy="29" r="13" fill="white" />
+      </mask>
+      <g mask="url(#mask1_0_12744)">
+        <ellipse
+          cx="16"
+          cy="17.5"
+          rx="6"
+          ry="7.5"
+          fill="#505F79"
+          fill-opacity="0.204983"
+        />
+      </g>
+    </g>
+    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
+    <defs>
+      <linearGradient
+        id="paint0_linear_0_12744"
+        x1="13.347"
+        y1="46.279"
+        x2="33.5318"
+        y2="30.8088"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#ABD229" />
+        <stop offset="1" stop-color="#9CD03F" />
+      </linearGradient>
+    </defs>
   </svg>

package/src/components/Icon/complexIcons/index.ts

@@ -1 +1 @@
-export * from './icons';
+export * from './icons';