@snack-uikit/icons 0.20.2-preview-3cdd8d31.0 → 0.21.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.21.0 (2024-05-08)
+
+
+### Features
+
+* **PDS-191:** add ref to icons ([8b3337a](https://github.com/cloud-ru-tech/snack-uikit/commit/8b3337a67708e7344e9dc5206cb0596bdb905256))
+
+
+
+
+
 ## 0.20.1 (2024-02-05)
 
 

package/dist/components/interface-icons/alarmFilled/AlarmFilledS.d.ts

@@ -5,5 +5,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const SvgAlarmFilledS: ({ size, ...props }: ISvgIconProps) => React.ReactElement | null;
+declare const SvgAlarmFilledS: React.ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default SvgAlarmFilledS;

package/dist/components/interface-icons/alarmFilled/AlarmFilledS.js

@@ -10,7 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-const SvgAlarmFilledS = (_a) => {
+// DO NOT EDIT IT MANUALLY
+import * as React from 'react';
+const SvgAlarmFilledS = React.forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
@@ -22,6 +24,6 @@ const SvgAlarmFilledS = (_a) => {
         props.style.width = size + 'px';
         props.style.height = size + 'px';
     }
-    return (_jsx("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
-};
+    return (_jsx("svg", Object.assign({ ref: ref, xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
+});
 export default SvgAlarmFilledS;

package/dist/components/interface-icons/alarmFilled/AlarmFilledXs.d.ts

@@ -5,5 +5,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const SvgAlarmFilledXs: ({ size, ...props }: ISvgIconProps) => React.ReactElement | null;
+declare const SvgAlarmFilledXs: React.ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default SvgAlarmFilledXs;

package/dist/components/interface-icons/alarmFilled/AlarmFilledXs.js

@@ -10,7 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-const SvgAlarmFilledXs = (_a) => {
+// DO NOT EDIT IT MANUALLY
+import * as React from 'react';
+const SvgAlarmFilledXs = React.forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
@@ -22,6 +24,6 @@ const SvgAlarmFilledXs = (_a) => {
         props.style.width = size + 'px';
         props.style.height = size + 'px';
     }
-    return (_jsx("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
-};
+    return (_jsx("svg", Object.assign({ ref: ref, xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
+});
 export default SvgAlarmFilledXs;

package/dist/components/interface-icons/alarmFilled/index.d.ts

@@ -4,5 +4,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const AlarmFilledSVG: ({ size, ...props }: ISvgIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const AlarmFilledSVG: import("react").ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 export default AlarmFilledSVG;

package/dist/components/interface-icons/alarmFilled/index.js

@@ -12,8 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { default as SSVG } from './AlarmFilledS';
 import { default as XsSVG } from './AlarmFilledXs';
-const AlarmFilledSVG = (_a) => {
+import { forwardRef } from 'react';
+const AlarmFilledSVG = forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
-    return Number(size) >= 20 ? _jsx(SSVG, Object.assign({ size: size }, props)) : _jsx(XsSVG, Object.assign({ size: size }, props));
-};
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return Number(size) >= 20 ? _jsx(SSVG, Object.assign({ ref: ref, size: size }, props)) : _jsx(XsSVG, Object.assign({ ref: ref, size: size }, props));
+});
 export default AlarmFilledSVG;

package/dist/components/interface-icons/arrowDown/ArrowDownS.d.ts

@@ -5,5 +5,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const SvgArrowDownS: ({ size, ...props }: ISvgIconProps) => React.ReactElement | null;
+declare const SvgArrowDownS: React.ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default SvgArrowDownS;

package/dist/components/interface-icons/arrowDown/ArrowDownS.js

@@ -10,7 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-const SvgArrowDownS = (_a) => {
+// DO NOT EDIT IT MANUALLY
+import * as React from 'react';
+const SvgArrowDownS = React.forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
@@ -22,6 +24,6 @@ const SvgArrowDownS = (_a) => {
         props.style.width = size + 'px';
         props.style.height = size + 'px';
     }
-    return (_jsx("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
-};
+    return (_jsx("svg", Object.assign({ ref: ref, xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
+});
 export default SvgArrowDownS;

package/dist/components/interface-icons/arrowDown/ArrowDownXs.d.ts

@@ -5,5 +5,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const SvgArrowDownXs: ({ size, ...props }: ISvgIconProps) => React.ReactElement | null;
+declare const SvgArrowDownXs: React.ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default SvgArrowDownXs;

package/dist/components/interface-icons/arrowDown/ArrowDownXs.js

@@ -10,7 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-const SvgArrowDownXs = (_a) => {
+// DO NOT EDIT IT MANUALLY
+import * as React from 'react';
+const SvgArrowDownXs = React.forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
@@ -22,6 +24,6 @@ const SvgArrowDownXs = (_a) => {
         props.style.width = size + 'px';
         props.style.height = size + 'px';
     }
-    return (_jsx("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
-};
+    return (_jsx("svg", Object.assign({ ref: ref, xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
+});
 export default SvgArrowDownXs;

package/dist/components/interface-icons/arrowDown/index.d.ts

@@ -4,5 +4,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const ArrowDownSVG: ({ size, ...props }: ISvgIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const ArrowDownSVG: import("react").ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 export default ArrowDownSVG;

package/dist/components/interface-icons/arrowDown/index.js

@@ -12,8 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { default as SSVG } from './ArrowDownS';
 import { default as XsSVG } from './ArrowDownXs';
-const ArrowDownSVG = (_a) => {
+import { forwardRef } from 'react';
+const ArrowDownSVG = forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
-    return Number(size) >= 20 ? _jsx(SSVG, Object.assign({ size: size }, props)) : _jsx(XsSVG, Object.assign({ size: size }, props));
-};
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return Number(size) >= 20 ? _jsx(SSVG, Object.assign({ ref: ref, size: size }, props)) : _jsx(XsSVG, Object.assign({ ref: ref, size: size }, props));
+});
 export default ArrowDownSVG;

package/dist/components/interface-icons/arrowLeft/ArrowLeftS.d.ts

@@ -5,5 +5,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const SvgArrowLeftS: ({ size, ...props }: ISvgIconProps) => React.ReactElement | null;
+declare const SvgArrowLeftS: React.ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default SvgArrowLeftS;

package/dist/components/interface-icons/arrowLeft/ArrowLeftS.js

@@ -10,7 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-const SvgArrowLeftS = (_a) => {
+// DO NOT EDIT IT MANUALLY
+import * as React from 'react';
+const SvgArrowLeftS = React.forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
@@ -22,6 +24,6 @@ const SvgArrowLeftS = (_a) => {
         props.style.width = size + 'px';
         props.style.height = size + 'px';
     }
-    return (_jsx("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
-};
+    return (_jsx("svg", Object.assign({ ref: ref, xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
+});
 export default SvgArrowLeftS;

package/dist/components/interface-icons/arrowLeft/ArrowLeftXs.d.ts

@@ -5,5 +5,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const SvgArrowLeftXs: ({ size, ...props }: ISvgIconProps) => React.ReactElement | null;
+declare const SvgArrowLeftXs: React.ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default SvgArrowLeftXs;

package/dist/components/interface-icons/arrowLeft/ArrowLeftXs.js

@@ -10,7 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-const SvgArrowLeftXs = (_a) => {
+// DO NOT EDIT IT MANUALLY
+import * as React from 'react';
+const SvgArrowLeftXs = React.forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
@@ -22,6 +24,6 @@ const SvgArrowLeftXs = (_a) => {
         props.style.width = size + 'px';
         props.style.height = size + 'px';
     }
-    return (_jsx("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
-};
+    return (_jsx("svg", Object.assign({ ref: ref, xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
+});
 export default SvgArrowLeftXs;

package/dist/components/interface-icons/arrowLeft/index.d.ts

@@ -4,5 +4,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const ArrowLeftSVG: ({ size, ...props }: ISvgIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const ArrowLeftSVG: import("react").ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 export default ArrowLeftSVG;

package/dist/components/interface-icons/arrowLeft/index.js

@@ -12,8 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { default as SSVG } from './ArrowLeftS';
 import { default as XsSVG } from './ArrowLeftXs';
-const ArrowLeftSVG = (_a) => {
+import { forwardRef } from 'react';
+const ArrowLeftSVG = forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
-    return Number(size) >= 20 ? _jsx(SSVG, Object.assign({ size: size }, props)) : _jsx(XsSVG, Object.assign({ size: size }, props));
-};
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return Number(size) >= 20 ? _jsx(SSVG, Object.assign({ ref: ref, size: size }, props)) : _jsx(XsSVG, Object.assign({ ref: ref, size: size }, props));
+});
 export default ArrowLeftSVG;

package/dist/components/interface-icons/arrowLinks/ArrowLinksS.d.ts

@@ -5,5 +5,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const SvgArrowLinksS: ({ size, ...props }: ISvgIconProps) => React.ReactElement | null;
+declare const SvgArrowLinksS: React.ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default SvgArrowLinksS;

package/dist/components/interface-icons/arrowLinks/ArrowLinksS.js

@@ -10,7 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-const SvgArrowLinksS = (_a) => {
+// DO NOT EDIT IT MANUALLY
+import * as React from 'react';
+const SvgArrowLinksS = React.forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
@@ -22,6 +24,6 @@ const SvgArrowLinksS = (_a) => {
         props.style.width = size + 'px';
         props.style.height = size + 'px';
     }
-    return (_jsx("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
-};
+    return (_jsx("svg", Object.assign({ ref: ref, xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
+});
 export default SvgArrowLinksS;

package/dist/components/interface-icons/arrowLinks/ArrowLinksXs.d.ts

@@ -5,5 +5,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const SvgArrowLinksXs: ({ size, ...props }: ISvgIconProps) => React.ReactElement | null;
+declare const SvgArrowLinksXs: React.ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default SvgArrowLinksXs;

package/dist/components/interface-icons/arrowLinks/ArrowLinksXs.js

@@ -10,7 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-const SvgArrowLinksXs = (_a) => {
+// DO NOT EDIT IT MANUALLY
+import * as React from 'react';
+const SvgArrowLinksXs = React.forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
@@ -22,6 +24,6 @@ const SvgArrowLinksXs = (_a) => {
         props.style.width = size + 'px';
         props.style.height = size + 'px';
     }
-    return (_jsx("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
-};
+    return (_jsx("svg", Object.assign({ ref: ref, xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
+});
 export default SvgArrowLinksXs;

package/dist/components/interface-icons/arrowLinks/index.d.ts

@@ -4,5 +4,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const ArrowLinksSVG: ({ size, ...props }: ISvgIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const ArrowLinksSVG: import("react").ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 export default ArrowLinksSVG;

package/dist/components/interface-icons/arrowLinks/index.js

@@ -12,8 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { default as SSVG } from './ArrowLinksS';
 import { default as XsSVG } from './ArrowLinksXs';
-const ArrowLinksSVG = (_a) => {
+import { forwardRef } from 'react';
+const ArrowLinksSVG = forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
-    return Number(size) >= 20 ? _jsx(SSVG, Object.assign({ size: size }, props)) : _jsx(XsSVG, Object.assign({ size: size }, props));
-};
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return Number(size) >= 20 ? _jsx(SSVG, Object.assign({ ref: ref, size: size }, props)) : _jsx(XsSVG, Object.assign({ ref: ref, size: size }, props));
+});
 export default ArrowLinksSVG;

package/dist/components/interface-icons/arrowRight/ArrowRightS.d.ts

@@ -5,5 +5,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const SvgArrowRightS: ({ size, ...props }: ISvgIconProps) => React.ReactElement | null;
+declare const SvgArrowRightS: React.ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default SvgArrowRightS;

package/dist/components/interface-icons/arrowRight/ArrowRightS.js

@@ -10,7 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-const SvgArrowRightS = (_a) => {
+// DO NOT EDIT IT MANUALLY
+import * as React from 'react';
+const SvgArrowRightS = React.forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
@@ -22,6 +24,6 @@ const SvgArrowRightS = (_a) => {
         props.style.width = size + 'px';
         props.style.height = size + 'px';
     }
-    return (_jsx("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
-};
+    return (_jsx("svg", Object.assign({ ref: ref, xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
+});
 export default SvgArrowRightS;

package/dist/components/interface-icons/arrowRight/ArrowRightXs.d.ts

@@ -5,5 +5,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const SvgArrowRightXs: ({ size, ...props }: ISvgIconProps) => React.ReactElement | null;
+declare const SvgArrowRightXs: React.ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default SvgArrowRightXs;

package/dist/components/interface-icons/arrowRight/ArrowRightXs.js

@@ -10,7 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-const SvgArrowRightXs = (_a) => {
+// DO NOT EDIT IT MANUALLY
+import * as React from 'react';
+const SvgArrowRightXs = React.forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
@@ -22,6 +24,6 @@ const SvgArrowRightXs = (_a) => {
         props.style.width = size + 'px';
         props.style.height = size + 'px';
     }
-    return (_jsx("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
-};
+    return (_jsx("svg", Object.assign({ ref: ref, xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
+});
 export default SvgArrowRightXs;

package/dist/components/interface-icons/arrowRight/index.d.ts

@@ -4,5 +4,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const ArrowRightSVG: ({ size, ...props }: ISvgIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const ArrowRightSVG: import("react").ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 export default ArrowRightSVG;

package/dist/components/interface-icons/arrowRight/index.js

@@ -12,8 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { default as SSVG } from './ArrowRightS';
 import { default as XsSVG } from './ArrowRightXs';
-const ArrowRightSVG = (_a) => {
+import { forwardRef } from 'react';
+const ArrowRightSVG = forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
-    return Number(size) >= 20 ? _jsx(SSVG, Object.assign({ size: size }, props)) : _jsx(XsSVG, Object.assign({ size: size }, props));
-};
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return Number(size) >= 20 ? _jsx(SSVG, Object.assign({ ref: ref, size: size }, props)) : _jsx(XsSVG, Object.assign({ ref: ref, size: size }, props));
+});
 export default ArrowRightSVG;

package/dist/components/interface-icons/arrowUp/ArrowUpS.d.ts

@@ -5,5 +5,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const SvgArrowUpS: ({ size, ...props }: ISvgIconProps) => React.ReactElement | null;
+declare const SvgArrowUpS: React.ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default SvgArrowUpS;

package/dist/components/interface-icons/arrowUp/ArrowUpS.js

@@ -10,7 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-const SvgArrowUpS = (_a) => {
+// DO NOT EDIT IT MANUALLY
+import * as React from 'react';
+const SvgArrowUpS = React.forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
@@ -22,6 +24,6 @@ const SvgArrowUpS = (_a) => {
         props.style.width = size + 'px';
         props.style.height = size + 'px';
     }
-    return (_jsx("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
-};
+    return (_jsx("svg", Object.assign({ ref: ref, xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
+});
 export default SvgArrowUpS;

package/dist/components/interface-icons/arrowUp/ArrowUpXs.d.ts

@@ -5,5 +5,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const SvgArrowUpXs: ({ size, ...props }: ISvgIconProps) => React.ReactElement | null;
+declare const SvgArrowUpXs: React.ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default SvgArrowUpXs;

package/dist/components/interface-icons/arrowUp/ArrowUpXs.js

@@ -10,7 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-const SvgArrowUpXs = (_a) => {
+// DO NOT EDIT IT MANUALLY
+import * as React from 'react';
+const SvgArrowUpXs = React.forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
@@ -22,6 +24,6 @@ const SvgArrowUpXs = (_a) => {
         props.style.width = size + 'px';
         props.style.height = size + 'px';
     }
-    return (_jsx("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
-};
+    return (_jsx("svg", Object.assign({ ref: ref, xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
+});
 export default SvgArrowUpXs;

package/dist/components/interface-icons/arrowUp/index.d.ts

@@ -4,5 +4,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const ArrowUpSVG: ({ size, ...props }: ISvgIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const ArrowUpSVG: import("react").ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 export default ArrowUpSVG;

package/dist/components/interface-icons/arrowUp/index.js

@@ -12,8 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { default as SSVG } from './ArrowUpS';
 import { default as XsSVG } from './ArrowUpXs';
-const ArrowUpSVG = (_a) => {
+import { forwardRef } from 'react';
+const ArrowUpSVG = forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
-    return Number(size) >= 20 ? _jsx(SSVG, Object.assign({ size: size }, props)) : _jsx(XsSVG, Object.assign({ size: size }, props));
-};
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return Number(size) >= 20 ? _jsx(SSVG, Object.assign({ ref: ref, size: size }, props)) : _jsx(XsSVG, Object.assign({ ref: ref, size: size }, props));
+});
 export default ArrowUpSVG;

package/dist/components/interface-icons/calendar/CalendarS.d.ts

@@ -5,5 +5,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const SvgCalendarS: ({ size, ...props }: ISvgIconProps) => React.ReactElement | null;
+declare const SvgCalendarS: React.ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default SvgCalendarS;

package/dist/components/interface-icons/calendar/CalendarS.js

@@ -10,7 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-const SvgCalendarS = (_a) => {
+// DO NOT EDIT IT MANUALLY
+import * as React from 'react';
+const SvgCalendarS = React.forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
@@ -22,6 +24,6 @@ const SvgCalendarS = (_a) => {
         props.style.width = size + 'px';
         props.style.height = size + 'px';
     }
-    return (_jsx("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
-};
+    return (_jsx("svg", Object.assign({ ref: ref, xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
+});
 export default SvgCalendarS;

package/dist/components/interface-icons/calendar/CalendarXs.d.ts

@@ -5,5 +5,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const SvgCalendarXs: ({ size, ...props }: ISvgIconProps) => React.ReactElement | null;
+declare const SvgCalendarXs: React.ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default SvgCalendarXs;

package/dist/components/interface-icons/calendar/CalendarXs.js

@@ -10,7 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-const SvgCalendarXs = (_a) => {
+// DO NOT EDIT IT MANUALLY
+import * as React from 'react';
+const SvgCalendarXs = React.forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
@@ -22,6 +24,6 @@ const SvgCalendarXs = (_a) => {
         props.style.width = size + 'px';
         props.style.height = size + 'px';
     }
-    return (_jsx("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
-};
+    return (_jsx("svg", Object.assign({ ref: ref, xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 24 24', "data-test-id": 'icon' + testId }, props, { children: _jsx("use", { href: '#snack-uikit-' + testId.substring(1) }) })));
+});
 export default SvgCalendarXs;

package/dist/components/interface-icons/calendar/index.d.ts

@@ -4,5 +4,5 @@ export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
     size?: string | number;
     style?: React.CSSProperties;
 }
-declare const CalendarSVG: ({ size, ...props }: ISvgIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const CalendarSVG: import("react").ForwardRefExoticComponent<Omit<ISvgIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 export default CalendarSVG;

package/dist/components/interface-icons/calendar/index.js

@@ -12,8 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { default as SSVG } from './CalendarS';
 import { default as XsSVG } from './CalendarXs';
-const CalendarSVG = (_a) => {
+import { forwardRef } from 'react';
+const CalendarSVG = forwardRef((_a, ref) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
-    return Number(size) >= 20 ? _jsx(SSVG, Object.assign({ size: size }, props)) : _jsx(XsSVG, Object.assign({ size: size }, props));
-};
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return Number(size) >= 20 ? _jsx(SSVG, Object.assign({ ref: ref, size: size }, props)) : _jsx(XsSVG, Object.assign({ ref: ref, size: size }, props));
+});
 export default CalendarSVG;