npm - @snack-uikit/icons - Versions diffs - 0.19.2 → 0.20.1-preview-3f90b7f1.0 - Mend

@snack-uikit/icons 0.19.2 → 0.20.1-preview-3f90b7f1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -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.20.0 (2024-01-23)
+### Features
+* **FF-4133:** add arrowLeft and arrowRight icons ([86d9c14](https://github.com/cloud-ru-tech/snack-uikit/commit/86d9c1488685409f3bda2df63793c201b38acbb4))
 ## 0.19.2 (2023-12-18)

package/README.md CHANGED Viewed

@@ -3,6 +3,50 @@
 ## Installation
 `npm i @snack-uikit/icons`
+## Как подключить иконки в проект
+1. Подключите `svg-inline-loader` в конфигурацию webpack-a:
+```typescript
+import { SVG_SPRITE_WEBPACK_REG_EXP } from '@snack-uikit/icons';
+export default {
+  module: {
+    rules: [
+      {
+        test: SVG_SPRITE_WEBPACK_REG_EXP, // /\.symbol.svg$/,
+        use: 'svg-inline-loader'
+      },
+    ],
+  },
+  ...
+};
+```
+2. Подключите спрайт с иконками в проект
+```typescript jsx
+import { Sprite, SpriteSVG } from '@snack-uikit/icons';
+function App () {
+  return (
+    <>
+       <Sprite content={SpriteSVG} />
+    </>
+  );
+}
+```
+3. Используйте иконки как обычные реакт-компоненты:
+```typescript jsx
+import { ChevronLeftSVG }  from '@snack-uikit/icons';
+function MyComponent ()  {
+  return <div><ChevronLeftSVG /></div>
+}
+```
 ## Как добавить новую иконку
 1. Добавьте новый svg-файл в соответсвующую коллекцию иконок в папке svgs (это может быть новый размер иконки). Далее все нужные файлы сгенерятся автоматически во время релиза пакета.

package/dist/Sprite.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare function SpriteInner({ content }: {
+    content: string;
+}): null;
+export declare const Sprite: import("react").MemoExoticComponent<typeof SpriteInner>;
+export {};

package/dist/Sprite.js ADDED Viewed

@@ -0,0 +1,18 @@
+import { useLayoutEffect, useState, memo } from 'react';
+// via external object - <object data={Sprite} aria-label={'sprite'}/>
+// but need to provide a link inside icons
+function SpriteInner({ content }) {
+    const [div] = useState(() => document.createElement('div'));
+    useLayoutEffect(() => {
+        div.style.display = 'none';
+        document.body.prepend(div);
+        return () => {
+            document.body.removeChild(div);
+        };
+    }, []);
+    useLayoutEffect(() => {
+        div.innerHTML = content;
+    }, [content]);
+    return null;
+}
+export const Sprite = memo(SpriteInner);

package/dist/components/index.d.ts ADDED Viewed

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

package/dist/components/index.js ADDED Viewed

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

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

@@ -14,7 +14,7 @@ const SvgAlarmFilledS = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-alarm-filled-s';
+    const testId = '-alarm-filled-s';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,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": testId }, props, { children: _jsx("path", { d: 'M11.36 3.281a8.397 8.397 0 0 0-3.22.879c-2.805 1.379-4.618 4.072-4.867 7.23-.138 1.749.34 3.688 1.28 5.203a9.064 9.064 0 0 0 2.854 2.854c1.515.94 3.454 1.418 5.203 1.28 2.157-.17 4.066-1.043 5.57-2.547 1.504-1.504 2.377-3.413 2.547-5.57.214-2.713-.977-5.533-3.073-7.281-1.792-1.493-3.976-2.204-6.294-2.048m1.345 3.53a.835.835 0 0 1 .378.463c.064.214-.321 5.61-.414 5.787a.814.814 0 0 1-.669.419.814.814 0 0 1-.669-.419c-.093-.177-.478-5.573-.414-5.787a.749.749 0 0 1 .543-.519c.221-.057 1.106-.018 1.245.056m-.262 8.539c.527.267.704.889.406 1.422a1.075 1.075 0 0 1-.692.489 1.008 1.008 0 0 1-1.013-.501c-.108-.192-.124-.258-.123-.52.001-.228.021-.338.086-.46a.995.995 0 0 1 1.336-.43' }) })));
+    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) }) })));
 };
 export default SvgAlarmFilledS;

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

@@ -14,7 +14,7 @@ const SvgAlarmFilledXs = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-alarm-filled-xs';
+    const testId = '-alarm-filled-xs';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,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: 16, height: 16, fill: 'currentColor', viewBox: '0 0 16 16', "data-test-id": testId }, props, { children: _jsx("path", { d: 'M7.48 1.269c-1.389.143-2.48.556-3.533 1.339-.373.277-1.058.956-1.324 1.312-1.585 2.124-1.815 4.895-.599 7.213.336.641.653 1.065 1.215 1.628.563.562.987.879 1.628 1.215a6.745 6.745 0 0 0 6.266 0c.641-.336 1.065-.653 1.628-1.215.698-.698 1.136-1.35 1.488-2.214a6.754 6.754 0 0 0-.273-5.68c-.333-.635-.651-1.063-1.202-1.616-1.068-1.072-2.307-1.699-3.814-1.931-.268-.041-1.247-.074-1.48-.051M8.508 3.8a.726.726 0 0 1 .479.685c.001.4-.242 3.612-.283 3.753-.084.284-.395.509-.704.509-.309 0-.62-.225-.704-.509-.042-.142-.284-3.355-.283-3.759a.724.724 0 0 1 .47-.677c.15-.055.87-.056 1.025-.002m-.161 6.266a.998.998 0 0 1 .588.597c.045.122.054.196.047.391-.007.208-.021.265-.096.419-.102.207-.27.369-.486.469-.125.058-.184.069-.4.069-.216 0-.275-.011-.4-.069a1.005 1.005 0 0 1-.486-.47c-.083-.168-.087-.193-.087-.472 0-.268.006-.305.073-.432.142-.27.358-.45.634-.527.172-.048.435-.037.613.025' }) })));
+    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) }) })));
 };
 export default SvgAlarmFilledXs;

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

@@ -14,7 +14,7 @@ const SvgArrowDownS = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-arrow-down-s';
+    const testId = '-arrow-down-s';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,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": testId }, props, { children: _jsx("path", { fill: 'inherit', fillRule: 'evenodd', d: 'M11.82 5.276a.729.729 0 0 0-.538.515c-.028.099-.042 1.87-.042 5.268v5.12l-1.93-1.927c-1.365-1.363-1.965-1.936-2.05-1.958-.182-.048-.474-.03-.604.038-.222.116-.416.413-.416.637.001.33-.039.286 2.693 3.024 1.434 1.437 2.653 2.637 2.708 2.666a.79.79 0 0 0 .563.061c.159-.042.424-.293 2.789-2.653 1.437-1.434 2.637-2.653 2.666-2.708a.77.77 0 0 0-.31-1.025c-.134-.069-.425-.089-.609-.04-.085.022-.685.595-2.05 1.958l-1.93 1.927v-5.12c0-3.398-.014-5.169-.042-5.268a.8.8 0 0 0-.353-.448.951.951 0 0 0-.545-.067' }) })));
+    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) }) })));
 };
 export default SvgArrowDownS;

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

@@ -14,7 +14,7 @@ const SvgArrowDownXs = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-arrow-down-xs';
+    const testId = '-arrow-down-xs';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,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: 16, height: 16, fill: 'currentColor', viewBox: '0 0 16 16', "data-test-id": testId }, props, { children: _jsx("path", { fill: 'inherit', fillRule: 'evenodd', d: 'M7.691 2.318a.825.825 0 0 0-.374.386l-.063.136v4.173l-.001 4.173-1.406-1.405C4.78 8.716 4.411 8.363 4.32 8.322c-.161-.072-.475-.075-.629-.004A.78.78 0 0 0 3.254 9c0 .329-.079.239 2.221 2.539C7.774 13.838 7.662 13.741 8 13.741c.338 0 .226.097 2.524-2.202 1.492-1.493 2.101-2.12 2.144-2.206a.857.857 0 0 0 .073-.297.525.525 0 0 0-.054-.322.824.824 0 0 0-.378-.396c-.154-.071-.468-.068-.629.004-.091.041-.46.394-1.527 1.459l-1.406 1.405-.001-4.173V2.84l-.063-.136a.825.825 0 0 0-.374-.386.962.962 0 0 0-.618 0' }) })));
+    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) }) })));
 };
 export default SvgArrowDownXs;

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
+    className?: string;
+    size?: string | number;
+    style?: React.CSSProperties;
+}
+declare const SvgArrowLeftS: ({ size, ...props }: ISvgIconProps) => React.ReactElement | null;
+export default SvgArrowLeftS;

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

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgArrowLeftS = (_a) => {
+    var { size = 24 } = _a, props = __rest(_a, ["size"]);
+    props.width = undefined;
+    props.height = undefined;
+    const testId = '-arrow-left-s';
+    const isCustomSize = typeof size === 'number';
+    if (isCustomSize) {
+        if (!props.style)
+            props.style = {};
+        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) }) })));
+};
+export default SvgArrowLeftS;

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
+    className?: string;
+    size?: string | number;
+    style?: React.CSSProperties;
+}
+declare const SvgArrowLeftXs: ({ size, ...props }: ISvgIconProps) => React.ReactElement | null;
+export default SvgArrowLeftXs;

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

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgArrowLeftXs = (_a) => {
+    var { size = 24 } = _a, props = __rest(_a, ["size"]);
+    props.width = undefined;
+    props.height = undefined;
+    const testId = '-arrow-left-xs';
+    const isCustomSize = typeof size === 'number';
+    if (isCustomSize) {
+        if (!props.style)
+            props.style = {};
+        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) }) })));
+};
+export default SvgArrowLeftXs;

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

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
+    className?: string;
+    size?: string | number;
+    style?: React.CSSProperties;
+}
+declare const ArrowLeftSVG: ({ size, ...props }: ISvgIconProps) => import("react/jsx-runtime").JSX.Element;
+export default ArrowLeftSVG;

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

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { default as SSVG } from './ArrowLeftS';
+import { default as XsSVG } from './ArrowLeftXs';
+const ArrowLeftSVG = (_a) => {
+    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));
+};
+export default ArrowLeftSVG;

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

@@ -14,7 +14,7 @@ const SvgArrowLinksS = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-arrow-links-s';
+    const testId = '-arrow-links-s';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,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": testId }, props, { children: _jsx("path", { fill: 'inherit', fillRule: 'evenodd', d: 'M8.805 8.28c-.391.092-.633.519-.524.924.059.218.288.453.5.511.107.03.856.045 2.279.045h2.119l-2.426 2.43c-2.184 2.186-2.432 2.448-2.473 2.605a.75.75 0 0 0 .925.925c.157-.041.419-.289 2.605-2.473l2.43-2.426v2.119c0 1.423.015 2.172.045 2.279.059.213.293.441.513.5.4.108.812-.12.92-.51.027-.097.042-1.237.042-3.24 0-2.7-.008-3.11-.062-3.24a.734.734 0 0 0-.398-.413c-.151-.07-.327-.074-3.26-.071-1.705.002-3.161.018-3.235.035' }) })));
+    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) }) })));
 };
 export default SvgArrowLinksS;

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

@@ -14,7 +14,7 @@ const SvgArrowLinksXs = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-arrow-links-xs';
+    const testId = '-arrow-links-xs';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,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: 16, height: 16, fill: 'currentColor', viewBox: '0 0 16 16', "data-test-id": testId }, props, { children: _jsx("path", { fill: 'inherit', fillRule: 'evenodd', d: 'M7.813 4.265 4.76 4.28l-.107.058a.751.751 0 0 0 .051 1.347l.136.062 2.173.007 2.172.008L6.78 8.167C4.145 10.804 4.257 10.678 4.258 11c0 .413.33.743.742.743.323 0 .196.112 2.833-2.523l2.405-2.405.008 2.172.007 2.173.062.136c.274.606 1.143.587 1.381-.031.049-.127.051-.247.051-3.278 0-2.534-.007-3.166-.035-3.246-.048-.136-.249-.352-.389-.42a.81.81 0 0 0-.286-.064c-.094-.004-1.544-.001-3.224.008' }) })));
+    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) }) })));
 };
 export default SvgArrowLinksXs;

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
+    className?: string;
+    size?: string | number;
+    style?: React.CSSProperties;
+}
+declare const SvgArrowRightS: ({ size, ...props }: ISvgIconProps) => React.ReactElement | null;
+export default SvgArrowRightS;

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

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgArrowRightS = (_a) => {
+    var { size = 24 } = _a, props = __rest(_a, ["size"]);
+    props.width = undefined;
+    props.height = undefined;
+    const testId = '-arrow-right-s';
+    const isCustomSize = typeof size === 'number';
+    if (isCustomSize) {
+        if (!props.style)
+            props.style = {};
+        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) }) })));
+};
+export default SvgArrowRightS;

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
+    className?: string;
+    size?: string | number;
+    style?: React.CSSProperties;
+}
+declare const SvgArrowRightXs: ({ size, ...props }: ISvgIconProps) => React.ReactElement | null;
+export default SvgArrowRightXs;

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

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgArrowRightXs = (_a) => {
+    var { size = 24 } = _a, props = __rest(_a, ["size"]);
+    props.width = undefined;
+    props.height = undefined;
+    const testId = '-arrow-right-xs';
+    const isCustomSize = typeof size === 'number';
+    if (isCustomSize) {
+        if (!props.style)
+            props.style = {};
+        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) }) })));
+};
+export default SvgArrowRightXs;

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

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
+    className?: string;
+    size?: string | number;
+    style?: React.CSSProperties;
+}
+declare const ArrowRightSVG: ({ size, ...props }: ISvgIconProps) => import("react/jsx-runtime").JSX.Element;
+export default ArrowRightSVG;

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

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { default as SSVG } from './ArrowRightS';
+import { default as XsSVG } from './ArrowRightXs';
+const ArrowRightSVG = (_a) => {
+    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));
+};
+export default ArrowRightSVG;

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

@@ -14,7 +14,7 @@ const SvgArrowUpS = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-arrow-up-s';
+    const testId = '-arrow-up-s';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,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": testId }, props, { children: _jsx("path", { fill: 'inherit', fillRule: 'evenodd', d: 'M11.9 5.259a1.795 1.795 0 0 1-.16.04c-.184.039-5.356 5.216-5.445 5.449-.213.557.321 1.127.91.972.157-.041.379-.25 2.105-1.973l1.93-1.926v5.12c0 3.611.013 5.166.045 5.278.059.213.293.441.513.5.4.108.812-.12.92-.51.028-.099.042-1.87.042-5.268v-5.12l1.93 1.926c1.726 1.723 1.948 1.932 2.105 1.973a.75.75 0 0 0 .925-.925c-.041-.158-.305-.434-2.653-2.788-1.434-1.437-2.652-2.636-2.707-2.665-.106-.055-.392-.107-.46-.083' }) })));
+    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) }) })));
 };
 export default SvgArrowUpS;

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

@@ -14,7 +14,7 @@ const SvgArrowUpXs = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-arrow-up-xs';
+    const testId = '-arrow-up-xs';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,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: 16, height: 16, fill: 'currentColor', viewBox: '0 0 16 16', "data-test-id": testId }, props, { children: _jsx("path", { fill: 'inherit', fillRule: 'evenodd', d: 'M7.68 2.322c-.093.041-.594.528-2.205 2.139C3.681 6.254 3.38 6.567 3.322 6.693a.736.736 0 0 0 .159.84.691.691 0 0 0 .519.208c.329 0 .292.031 1.847-1.522l1.406-1.405.001 4.173v4.173l.063.136a.727.727 0 0 0 .683.445c.292 0 .53-.146.673-.415l.06-.113.007-4.199.007-4.199 1.407 1.405C11.708 7.772 11.671 7.741 12 7.741c.406 0 .711-.29.741-.705.025-.351.127-.232-2.215-2.575C8.914 2.85 8.413 2.363 8.32 2.322A.732.732 0 0 0 8 2.268a.732.732 0 0 0-.32.054' }) })));
+    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) }) })));
 };
 export default SvgArrowUpXs;

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

@@ -14,7 +14,7 @@ const SvgCalendarS = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-calendar-s';
+    const testId = '-calendar-s';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,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": testId }, props, { children: _jsx("path", { fill: 'inherit', fillRule: 'evenodd', d: 'M6.82 2.276a.729.729 0 0 0-.538.515c-.023.082-.042.438-.042.792v.643l-.451.045c-.746.073-1.221.291-1.724.793a2.742 2.742 0 0 0-.696 1.116l-.109.32v11l.109.32c.151.445.362.783.695 1.116.333.333.671.544 1.116.695l.32.109h13l.32-.109a2.736 2.736 0 0 0 1.116-.695c.333-.333.544-.671.695-1.116l.109-.32v-11l-.109-.32a2.742 2.742 0 0 0-.696-1.116c-.503-.502-.978-.72-1.724-.793l-.451-.045v-.643c0-.704-.031-.879-.186-1.063-.149-.177-.321-.253-.574-.253-.253 0-.425.076-.574.253-.155.185-.186.359-.186 1.07v.65H7.76v-.65c0-.711-.031-.885-.186-1.07a.777.777 0 0 0-.754-.244M6.24 5.91c.001.328.158.625.396.748.538.278 1.123-.111 1.124-.748v-.15h8.48v.15c.001.572.447.948.962.809.332-.089.557-.417.558-.813v-.155l.29.015a1.24 1.24 0 0 1 1.077.706c.086.174.094.247.105.978l.013.79H4.76v-.735c0-.806.027-.948.236-1.233.243-.33.584-.505.994-.509l.25-.003zm12.991 7.64-.011 3.79-.093.189c-.132.268-.416.534-.674.63-.213.08-.297.081-6.453.081-6.156 0-6.24-.001-6.453-.081-.258-.096-.542-.362-.674-.63l-.093-.189-.011-3.79-.01-3.79h14.482z' }) })));
+    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) }) })));
 };
 export default SvgCalendarS;

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

@@ -14,7 +14,7 @@ const SvgCalendarXs = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-calendar-xs';
+    const testId = '-calendar-xs';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,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: 16, height: 16, fill: 'currentColor', viewBox: '0 0 16 16', "data-test-id": testId }, props, { children: _jsx("path", { fill: 'inherit', fillRule: 'evenodd', d: 'M4.68.33a.738.738 0 0 0-.365.377c-.059.126-.062.168-.07.846l-.009.714h-.761c-.865 0-.95.012-1.3.194a1.82 1.82 0 0 0-.849 1.019l-.059.187v8.666l.059.187c.153.484.56.924 1.026 1.109.331.132.194.129 5.648.129s5.317.003 5.648-.129a1.866 1.866 0 0 0 1.026-1.096l.059-.173.007-4.273c.008-4.683.015-4.471-.149-4.818a1.8 1.8 0 0 0-.807-.829c-.312-.159-.413-.173-1.259-.173h-.761l-.009-.714c-.008-.678-.011-.72-.07-.846A.71.71 0 0 0 11 .267a.71.71 0 0 0-.685.44c-.059.126-.062.168-.07.846l-.009.714H5.764l-.009-.714c-.008-.678-.011-.72-.07-.846A.71.71 0 0 0 5 .267a.666.666 0 0 0-.32.063m-.431 3.644c.019.254.081.407.218.545a.74.74 0 0 0 1.066 0c.137-.138.199-.291.218-.545l.017-.214h4.464l.017.214c.019.254.081.407.218.545a.74.74 0 0 0 1.066 0c.137-.138.199-.291.218-.545l.017-.214h.661c.661 0 .661 0 .736.064l.075.065.007 1.189.008 1.189-5.248-.007-5.247-.007V3.889l.075-.065c.075-.064.075-.064.736-.064h.661zm8.998 5.957c-.007 2.089-.009 2.172-.058 2.226a.368.368 0 0 1-.146.083c-.132.036-9.954.036-10.086 0a.368.368 0 0 1-.146-.083c-.049-.054-.051-.137-.058-2.226L2.746 7.76h10.508z' }) })));
+    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) }) })));
 };
 export default SvgCalendarXs;

package/dist/components/interface-icons/check/CheckS.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SvgCheckS = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-check-s';
+    const testId = '-check-s';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,6 @@ const SvgCheckS = (_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": testId }, props, { children: _jsx("path", { fill: 'inherit', fillRule: 'evenodd', d: 'M15.819 8.276a.944.944 0 0 0-.186.067c-.035.02-1.274 1.233-2.754 2.694l-2.689 2.657-.222-.237c-.697-.744-1.565-1.594-1.677-1.642-.374-.16-.794.014-.975.405-.197.424-.132.523 1.268 1.962 1.113 1.143 1.2 1.223 1.392 1.277a.71.71 0 0 0 .596-.07c.161-.106 6.028-5.913 6.085-6.024.189-.366.052-.846-.292-1.022a.953.953 0 0 0-.546-.067' }) })));
+    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) }) })));
 };
 export default SvgCheckS;

package/dist/components/interface-icons/check/CheckXs.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SvgCheckXs = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-check-xs';
+    const testId = '-check-xs';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,6 @@ const SvgCheckXs = (_a) => {
         props.style.width = size + 'px';
         props.style.height = size + 'px';
     }
-    return (_jsx("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: 16, height: 16, fill: 'currentColor', viewBox: '0 0 16 16', "data-test-id": testId }, props, { children: _jsx("path", { fill: 'inherit', fillRule: 'evenodd', d: 'M11.113 5.149a.805.805 0 0 0-.24.087c-.062.037-.959.914-1.993 1.949L7.001 9.066l-.921-.915c-.6-.597-.957-.933-1.027-.966-.155-.072-.47-.068-.616.008-.351.184-.505.532-.398.902.045.157.058.171 1.263 1.381.67.672 1.26 1.249 1.311 1.282a.765.765 0 0 0 .694.051c.062-.025.833-.777 2.34-2.283 2.051-2.05 2.252-2.258 2.3-2.387a.725.725 0 0 0-.164-.773.723.723 0 0 0-.67-.217' }) })));
+    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) }) })));
 };
 export default SvgCheckXs;

package/dist/components/interface-icons/checkFilled/CheckFilledS.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SvgCheckFilledS = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-check-filled-s';
+    const testId = '-check-filled-s';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,6 @@ const SvgCheckFilledS = (_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": testId }, props, { children: _jsx("path", { d: 'M11.36 3.281a8.397 8.397 0 0 0-3.22.879c-2.805 1.379-4.618 4.072-4.867 7.23-.138 1.749.34 3.688 1.28 5.203a9.064 9.064 0 0 0 2.854 2.854c1.515.94 3.454 1.418 5.203 1.28 2.157-.17 4.066-1.043 5.57-2.547 1.504-1.504 2.377-3.413 2.547-5.57.214-2.713-.977-5.533-3.073-7.281-1.792-1.493-3.976-2.204-6.294-2.048m5.07 5.627c.221.178.309.352.308.612a.562.562 0 0 1-.125.4c-.198.286-5.948 5.929-6.123 6.009a.725.725 0 0 1-.627-.009c-.182-.089-2.395-2.356-2.511-2.573-.101-.187-.093-.52.018-.715.177-.315.626-.452.961-.294.077.037.517.457.988.944.466.483.862.878.879.878.016 0 1.225-1.18 2.686-2.623 1.698-1.677 2.714-2.652 2.816-2.702a.702.702 0 0 1 .73.073' }) })));
+    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) }) })));
 };
 export default SvgCheckFilledS;

package/dist/components/interface-icons/checkFilled/CheckFilledXs.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SvgCheckFilledXs = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-check-filled-xs';
+    const testId = '-check-filled-xs';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,6 @@ const SvgCheckFilledXs = (_a) => {
         props.style.width = size + 'px';
         props.style.height = size + 'px';
     }
-    return (_jsx("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: 16, height: 16, fill: 'currentColor', viewBox: '0 0 16 16', "data-test-id": testId }, props, { children: _jsx("path", { d: 'M7.48 1.269c-1.389.143-2.48.556-3.533 1.339-.373.277-1.058.956-1.324 1.312-1.585 2.124-1.815 4.895-.599 7.213.336.641.653 1.065 1.215 1.628.563.562.987.879 1.628 1.215a6.745 6.745 0 0 0 6.266 0c.641-.336 1.065-.653 1.628-1.215.698-.698 1.136-1.35 1.488-2.214a6.754 6.754 0 0 0-.273-5.68c-.333-.635-.651-1.063-1.202-1.616-1.068-1.072-2.307-1.699-3.814-1.931-.268-.041-1.247-.074-1.48-.051m4.09 3.937c.33.155.495.529.391.89l-.045.157-2.245 2.248c-1.515 1.517-2.279 2.264-2.351 2.298a.712.712 0 0 1-.523.04l-.17-.047-1.236-1.229c-.904-.9-1.254-1.265-1.305-1.363-.057-.109-.07-.17-.07-.333-.001-.172.01-.221.077-.343a.742.742 0 0 1 .883-.365c.154.045.175.063 1.091.976l.934.931L8.88 7.185c1.034-1.035 1.93-1.911 1.991-1.948a.754.754 0 0 1 .699-.031' }) })));
+    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) }) })));
 };
 export default SvgCheckFilledXs;

package/dist/components/interface-icons/chevronDown/ChevronDownS.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SvgChevronDownS = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-chevron-down-s';
+    const testId = '-chevron-down-s';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,6 @@ const SvgChevronDownS = (_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": testId }, props, { children: _jsx("path", { fill: 'inherit', fillRule: 'evenodd', d: 'M7.9 10.259a1.438 1.438 0 0 1-.147.037c-.236.052-.51.407-.512.664-.002.334-.018.316 2.192 2.533 1.159 1.162 2.153 2.137 2.208 2.166a.79.79 0 0 0 .563.061c.158-.042.386-.256 2.289-2.153 1.162-1.159 2.137-2.153 2.166-2.208a.77.77 0 0 0-.31-1.025c-.134-.069-.425-.089-.609-.04-.085.022-.653.564-1.93 1.838L12 13.939l-1.79-1.785c-.985-.982-1.826-1.803-1.87-1.825-.092-.045-.38-.091-.44-.07' }) })));
+    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) }) })));
 };
 export default SvgChevronDownS;