@dartcom/ui-kit 10.3.5 → 10.3.8

package/README.md

@@ -24,7 +24,6 @@ npm run storybook
 
 - У вас есть аккаунт npm и токен доступа
 
-```javascript
 // Проверьте сборку
 npm run build
 
@@ -33,9 +32,116 @@ npm pack
 
 git push origin v3.8.16
 
-Основные ссылки:
+Основные ссылки
 
 ```javascript
 https://unpkg.com/leaflet-textpath@1.3.0/leaflet.textpath.js
 ```
-Ссылка на бибилотеку, которая отвечает за отрисовку текста. Ее нужно подключать отдельно, если в проекте используются подписи по линейной геометрии
+
+Ссылка на бибилотеку, которая отвечает за отрисовку текста. Ее нужно подключать отдельно, если в проекте используются подписи по линейной геометрии
+
+## Работа с картой
+
+- Для начала работы потребуется установить следующие библиотеки:
+
+```javascript
+npm i -S react react-dom leaflet react-leaflet @dartcom/ui-kit
+```
+
+- Основную часть приложения, где будет использоваться карта, нужно обернуть в **DartcomProviders**:
+
+```javascript
+import { DartcomProviders } from '@dartcom/ui-kit';
+
+<DartcomProviders
+  configOptions={{
+    private_key: 'Ваш приватный ключ',
+
+    apiConfig: {
+      baseURL: 'Основной адрес backend',
+    },
+  }}>
+  {...Content}
+</DartcomProviders>;
+```
+
+**private_key** - ключ доступа к библиотеки, он выдается администрацией и проверяется для доступа как к самой карте, так и к определенным компонентам внтури библиотеки
+
+**baseURL** - адрес backend части вашего приложения, куда отсылаются основные запросы
+
+
+- Далее в вашем приложении нужно инициализировать карту leafet внтури основного **DartcomProviders**:
+
+```javascript
+import { MapContainer } from 'react-leaflet';
+
+<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
+  {...Content}
+</MapContainer>;
+```
+
+- Теперь нужно поместить внутрь MapContainer компонент с нашим слоем:
+
+```javascript
+import DartcomLayer from './your-path';
+
+import { MapContainer } from 'react-leaflet';
+
+<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
+  <DartcomLayer />
+
+  {...Content}
+</MapContainer>;
+```
+
+- В компоненте нужно инициализировать слой и добавить его на карту как основную подложку:
+
+```javascript
+// your-path.tsx
+
+import * as React from 'react';
+
+import { useMap } from 'react-leaflet';
+
+import {
+  getAllLayers,
+  SourceLayers,
+  TangramLayer,
+  TangramSourceNames,
+} from '@dartcom/ui-kit';
+
+const DartcomLayer: React.FC = () => {
+  const map = useMap();
+
+   React.useEffect(() => {
+    const { current: layersControl } = controlRef;
+
+    const defaultLayers = getAllLayers(TangramSourceNames.TILE);
+
+    new TangramLayer({
+      defaultLayers,
+
+      eventHandlers: {
+        [SourceLayers[name]]: {
+          click: ({ properties }) => {},
+          hover: ({ properties }) => {},
+        },
+      },
+
+      onCreate: ({ layer }) => {
+        layer.addTo(map);
+      },
+
+      onDestroy: ({ layer }) => {
+        layer.removeFrom(map);
+      },
+    });
+  }, []);
+
+  return null;
+};
+
+export default DartcomLayer;
+```
+
+- **defaultLayers** - это основной список слоев, которые можно получить из библиотеки и который будет показываться на карте. В примере мы грузим все слои из ресурса **TangramSourceNames.TILE** с помощью функции **getAllLayers**, но пожно подгружать разные слои из разных ресурсов

package/dist/components/buttons/icon/constants.d.ts

@@ -14,5 +14,8 @@ export declare const icons: {
     delete: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
         muiName: string;
     };
+    clear: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+        muiName: string;
+    };
 };
 //# sourceMappingURL=constants.d.ts.map

package/dist/components/buttons/icon/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/components/buttons/icon/constants.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;CAMjB,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/components/buttons/icon/constants.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;CAOjB,CAAC"}

package/dist/components/buttons/icon/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../src/components/buttons/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwCzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../src/components/buttons/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAQ1C,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwCzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/error-boundary/error-boundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error-boundary.d.ts","sourceRoot":"","sources":["../../../src/components/error-boundary/error-boundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAmBnD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CACjC,KAAK,CAAC,iBAAiB,CAAC,wBAAwB,CAAC,CAOlD,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"error-boundary.d.ts","sourceRoot":"","sources":["../../../src/components/error-boundary/error-boundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAYnD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CACjC,KAAK,CAAC,iBAAiB,CAAC,wBAAwB,CAAC,CAOlD,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/form/input/input.d.ts

@@ -0,0 +1,4 @@
+import { CustomInputProps } from './types';
+declare function CustomInput<T>(props: CustomInputProps<T>): import("react/jsx-runtime").JSX.Element;
+export default CustomInput;
+//# sourceMappingURL=input.d.ts.map

package/dist/components/form/input/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input/input.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,iBAAS,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAqDjD;AAED,eAAe,WAAW,CAAC"}

package/dist/components/list/list.d.ts

@@ -1,21 +1,4 @@
-import * as React from 'react';
-import { StringOrNumber } from '../../lib/types';
-import { SxProps } from '@mui/material';
-interface CustomListProps<T> {
-    items: T[];
-    columnsCount?: number;
-    title?: string;
-    getContent: (item: T, index: number) => React.JSX.Element;
-    getKey: (item: T, index: number) => StringOrNumber;
-    onClick?: (item: T, index: number) => void;
-    sx?: {
-        root?: SxProps;
-        list?: SxProps;
-        title?: SxProps;
-        item?: SxProps;
-    };
-    isShowNoData?: boolean;
-}
-declare function CustomList<T>({ items, columnsCount, getContent, title, getKey, onClick, sx, isShowNoData, }: CustomListProps<T>): import("react/jsx-runtime").JSX.Element;
+import { ListProps } from './types';
+declare function CustomList<T>({ items, columnsCount, getContent, title, getKey, onClick, onClear, sx, isShowNoData, }: ListProps<T>): import("react/jsx-runtime").JSX.Element;
 export default CustomList;
 //# sourceMappingURL=list.d.ts.map

package/dist/components/list/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/list/list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,OAAO,EAAuB,OAAO,EAAc,MAAM,eAAe,CAAC;AAIzE,UAAU,eAAe,CAAC,CAAC;IACzB,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAC1D,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,cAAc,CAAC;IACnD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE3C,EAAE,CAAC,EAAE;QACH,IAAI,CAAC,EAAE,OAAO,CAAC;QACf,IAAI,CAAC,EAAE,OAAO,CAAC;QACf,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,IAAI,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;IAEF,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,iBAAS,UAAU,CAAC,CAAC,EAAE,EACrB,KAAK,EACL,YAAgB,EAChB,UAAU,EACV,KAAK,EACL,MAAM,EACN,OAAO,EACP,EAAE,EAEF,YAAmB,GACpB,EAAE,eAAe,CAAC,CAAC,CAAC,2CA0DpB;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/list/list.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,iBAAS,UAAU,CAAC,CAAC,EAAE,EACrB,KAAK,EACL,YAAgB,EAChB,UAAU,EACV,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,EAAE,EAEF,YAAmB,GACpB,EAAE,SAAS,CAAC,CAAC,CAAC,2CA+Fd;AAED,eAAe,UAAU,CAAC"}

package/dist/components/list/list.stories.d.ts

@@ -8,4 +8,5 @@ export declare const Empty: Story;
 export declare const EmptyAndTitle: Story;
 export declare const EmptyNoShow: Story;
 export declare const WithTitle: Story;
+export declare const WithClear: Story;
 //# sourceMappingURL=list.stories.d.ts.map

package/dist/components/list/list.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.stories.d.ts","sourceRoot":"","sources":["../../../src/components/list/list.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAEzB,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAO3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAWnB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAY3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAYzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAC"}
+{"version":3,"file":"list.stories.d.ts","sourceRoot":"","sources":["../../../src/components/list/list.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAEzB,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAQ3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAWnB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAY3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAYzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAiBvB,CAAC"}

package/dist/components/list/types.d.ts

@@ -0,0 +1,19 @@
+import { StringOrNumber } from '../../lib/types';
+import { SystemStyleObject, Theme } from '@mui/system';
+export type ListProps<T> = {
+    items: T[];
+    columnsCount?: number;
+    title?: string;
+    getContent: (item: T, index: number) => React.JSX.Element;
+    getKey: (item: T, index: number) => StringOrNumber;
+    onClick?: (item: T, index: number) => void;
+    onClear?: () => void;
+    sx?: {
+        root?: SystemStyleObject<Theme>;
+        list?: SystemStyleObject<Theme>;
+        title?: SystemStyleObject<Theme>;
+        item?: SystemStyleObject<Theme>;
+    };
+    isShowNoData?: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/list/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/list/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEvD,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;IACzB,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAC1D,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,cAAc,CAAC;IAEnD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,EAAE,CAAC,EAAE;QACH,IAAI,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAChC,IAAI,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAChC,KAAK,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC;QACjC,IAAI,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC;KACjC,CAAC;IAEF,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC"}

package/dist/components/loader/card.stories.d.ts

@@ -4,6 +4,4 @@ declare const meta: Meta<typeof Loader>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const Primary: Story;
-export declare const Error: Story;
 //# sourceMappingURL=card.stories.d.ts.map

package/dist/components/loader/card.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.stories.d.ts","sourceRoot":"","sources":["../../../src/components/loader/card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,GAAG,CAAC;AAE3B,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAO7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC"}
+{"version":3,"file":"card.stories.d.ts","sourceRoot":"","sources":["../../../src/components/loader/card.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,GAAG,CAAC;AAE3B,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAS5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAQ7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC"}

package/dist/components/loader/types.d.ts

@@ -1,5 +1,3 @@
 import { CircularProgressProps } from '@mui/material';
-export type LoaderProps = {
-    color?: CircularProgressProps['color'];
-};
+export type LoaderProps = CircularProgressProps & {};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/loader/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/loader/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC;CACxC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/loader/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD,MAAM,MAAM,WAAW,GAAG,qBAAqB,GAAG,EAAE,CAAC"}

package/dist/index.cjs

@@ -1,15 +1,16 @@
 'use strict';
 
+var material = require('@mui/material');
 var React = require('react');
 var require$$2 = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
 var axios = require('axios');
 var xDatePickers = require('@mui/x-date-pickers');
 var AdapterDateFns = require('@mui/x-date-pickers/AdapterDateFns');
-var material = require('@mui/material');
 var styles$2 = require('@mui/material/styles');
 var ArrowDownwardIcon = require('@mui/icons-material/ArrowDownward');
 var IconButton$1 = require('@mui/material/IconButton');
+var ClearIcon = require('@mui/icons-material/Clear');
 var DeleteIcon = require('@mui/icons-material/Delete');
 var EditIcon = require('@mui/icons-material/Edit');
 var MovingIcon = require('@mui/icons-material/Moving');
@@ -65,6 +66,18 @@ exports.Operations = void 0;
     Operations["DELETE"] = "delete";
 })(exports.Operations || (exports.Operations = {}));
 
+const useDeviceType = () => {
+    const theme = material.useTheme();
+    const isMobile = material.useMediaQuery(theme.breakpoints.down('sm'));
+    const isTablet = material.useMediaQuery(theme.breakpoints.between('sm', 'md'));
+    const isDesktop = material.useMediaQuery(theme.breakpoints.up('md'));
+    return {
+        isMobile,
+        isTablet,
+        isDesktop,
+    };
+};
+
 const _testApiKeys = {
     valid: '18c38ab326d12f428e90be50a5141fc8949de497df7f7e0c1796d58e99d006f3',
     dateExpired: '8cbc5e15e61e649daf57c3a08422ae372c101afb4759036a3864a9fa588ef717',
@@ -16490,13 +16503,7 @@ const copyInformation = async (json) => {
     const jsonString = JSON.stringify(json, null, 2);
     const isSuccess = await navigator.clipboard
         .writeText(jsonString)
-        .then(() => {
-        showSnackbar({
-            message: 'Данные были успешно скопированы в буфер обмена',
-            variant: 'success',
-        });
-        return true;
-    })
+        .then(() => true)
         .catch(() => false);
     return isSuccess;
 };
@@ -26782,8 +26789,8 @@ const Provider = (props) => {
     return (jsxRuntime.jsx(xDatePickers.LocalizationProvider, { ...props, dateAdapter: AdapterDateFns.AdapterDateFns, adapterLocale: ru }));
 };
 
-const Loader = ({ color = 'inherit' }) => {
-    return jsxRuntime.jsx(material.CircularProgress, { color: color });
+const Loader = (props) => {
+    return jsxRuntime.jsx(material.CircularProgress, { ...props });
 };
 
 const DartcomInitializeProvider = ({ children, configOptions }) => {
@@ -29530,19 +29537,25 @@ const icons = {
     move: MovingIcon,
     save: SaveIcon,
     delete: DeleteIcon,
+    clear: ClearIcon,
 };
 
+const StyledIconButton = material.styled(material.IconButton)(() => {
+    return {
+        padding: 0,
+    };
+});
 const IconButton = ({ title, iconProps, ...props }) => {
     const buttonId = React__namespace.useId();
     const Icon = icons[iconProps.name];
     const iconColor = iconProps.color ?? 'primary';
     if (title) {
-        return (jsxRuntime.jsx(material.Tooltip, { title: title, children: jsxRuntime.jsx(material.IconButton, { id: buttonId, ...props, onClick: (event) => {
+        return (jsxRuntime.jsx(material.Tooltip, { title: title, children: jsxRuntime.jsx(StyledIconButton, { id: buttonId, ...props, onClick: (event) => {
                     event.stopPropagation();
                     props.onClick?.(event);
                 }, children: jsxRuntime.jsx(Icon, { fontSize: "medium", color: iconColor }) }) }));
     }
-    return (jsxRuntime.jsx(material.IconButton, { id: buttonId, ...props, onClick: (event) => {
+    return (jsxRuntime.jsx(StyledIconButton, { id: buttonId, ...props, onClick: (event) => {
             event.stopPropagation();
             props.onClick?.(event);
         }, children: jsxRuntime.jsx(Icon, { fontSize: "medium", color: iconColor }) }));
@@ -32263,24 +32276,45 @@ const NoData = ({ text = 'Нет данных' }) => {
         }, children: text }));
 };
 
-function CustomList({ items, columnsCount = 1, getContent, title, getKey, onClick, sx, isShowNoData = true, }) {
+function CustomList({ items, columnsCount = 1, getContent, title, getKey, onClick, onClear, sx, isShowNoData = true, }) {
     const isNoData = items.length === 0;
-    return (jsxRuntime.jsxs(material.Box, { sx: {
-            display: 'grid',
-            gridTemplateColumns: '1fr',
-            gap: '15px',
-            ...sx?.root,
-        }, children: [title ? (jsxRuntime.jsx(material.Typography, { variant: "h6", noWrap: true, sx: {
-                    textAlign: 'center',
-                    fontWeight: 700,
-                    ...sx?.title,
-                }, children: title })) : null, isNoData ? (jsxRuntime.jsx(React__namespace.Fragment, { children: isShowNoData ? jsxRuntime.jsx(NoData, {}) : null })) : (jsxRuntime.jsx(material.List, { sx: {
-                    display: 'grid',
-                    gridTemplateColumns: `repeat(${columnsCount}, 1fr)`,
-                    gap: '15px',
-                    ...sx?.list,
-                }, disablePadding: true, children: items.map((item, index) => (jsxRuntime.jsx(material.ListItem, { onClick: () => onClick?.(item, index), sx: {
-                        ...sx?.item,
+    return (jsxRuntime.jsxs(material.Box, { sx: ({ spacing, breakpoints }) => {
+            return {
+                display: 'grid',
+                gridTemplateColumns: '1fr',
+                gap: spacing(2),
+                ...sx?.root,
+                [breakpoints.down('sm')]: {
+                    gap: spacing(1),
+                },
+            };
+        }, children: [title || onClear ? (jsxRuntime.jsxs(material.Box, { sx: ({ spacing }) => {
+                    return {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: spacing(1),
+                    };
+                }, children: [title ? (jsxRuntime.jsx(material.Typography, { variant: "h6", noWrap: true, sx: {
+                            textAlign: 'center',
+                            fontWeight: 700,
+                            ...sx?.title,
+                        }, children: title })) : null, onClear ? (jsxRuntime.jsx(IconButton, { iconProps: {
+                            name: 'clear',
+                            color: 'warning',
+                        }, onClick: onClear })) : null] })) : null, isNoData ? (jsxRuntime.jsx(React__namespace.Fragment, { children: isShowNoData ? jsxRuntime.jsx(NoData, {}) : null })) : (jsxRuntime.jsx(material.List, { sx: ({ spacing, breakpoints }) => {
+                    return {
+                        display: 'grid',
+                        gridTemplateColumns: `repeat(${columnsCount}, 1fr)`,
+                        gap: spacing(2),
+                        ...sx?.list,
+                        [breakpoints.down('sm')]: {
+                            gap: spacing(1),
+                        },
+                    };
+                }, disablePadding: true, children: items.map((item, index) => (jsxRuntime.jsx(material.ListItem, { onClick: () => onClick?.(item, index), sx: () => {
+                        return {
+                            ...sx?.item,
+                        };
                     }, disablePadding: true, children: getContent(item, index) }, getKey(item, index)))) }))] }));
 }
 
@@ -39338,8 +39372,8 @@ function C(r = [], e = []) {
   return r.length !== e.length || r.some((t, o) => !Object.is(t, e[o]));
 }
 
-const ErrorFallback = ({ error, resetErrorBoundary, }) => {
-    return (jsxRuntime.jsxs(material.Box, { role: "alert", sx: { padding: '20px', background: '#fee' }, children: [jsxRuntime.jsx(material.Typography, { variant: "h2", children: "\u041E\u0448\u0438\u0431\u043A\u0430 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F" }), jsxRuntime.jsx(material.Typography, { variant: "body1", color: "error", children: error.message }), jsxRuntime.jsx(Button, { onClick: resetErrorBoundary, children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" })] }));
+const ErrorFallback = ({ resetErrorBoundary }) => {
+    return (jsxRuntime.jsxs(material.Box, { role: "alert", sx: { padding: '20px', background: '#fee' }, children: [jsxRuntime.jsx(material.Typography, { variant: "h2", children: "\u041E\u0448\u0438\u0431\u043A\u0430 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F" }), jsxRuntime.jsx(Button, { onClick: resetErrorBoundary, children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" })] }));
 };
 const CustomErrorBoundary = ({ children, FallbackComponent = ErrorFallback }) => {
     return (jsxRuntime.jsx(m, { FallbackComponent: FallbackComponent, children: children }));
@@ -47895,6 +47929,7 @@ exports.trafficSignConfig = trafficSignConfig;
 exports.trafficSignalConfig = trafficSignalConfig;
 exports.trafficSigns = trafficSigns;
 exports.trafficSignsDop = trafficSignsDop;
+exports.useDeviceType = useDeviceType;
 exports.useFormContext = useFormContext;
 exports.useGetUser = useGetUser;
 exports.useLazyGetUser = useLazyGetUser;