npm - @snack-uikit/icons - Versions diffs - 0.20.0 → 0.20.1 - Mend

@snack-uikit/icons 0.20.0 → 0.20.1

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 (99) 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.1 (2024-02-05)
+### Bug Fixes
+* **FF-3802:** use svg sprite for icons ([09dbca4](https://github.com/cloud-ru-tech/snack-uikit/commit/09dbca42999ca8870171e2bbda39c019f030b2cb))
 # 0.20.0 (2024-01-23)

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: /\.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,16 @@
+import { useLayoutEffect, useState, memo } from 'react';
+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.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SvgArrowLeftS = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-arrow-left-s';
+    const testId = '-arrow-left-s';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,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": testId }, props, { children: _jsx("path", { fill: 'inherit', fillRule: 'evenodd', d: 'M10.82 6.276c-.066.017-.156.05-.2.074-.044.025-1.253 1.221-2.687 2.657-2.36 2.365-2.611 2.63-2.653 2.789a.79.79 0 0 0 .061.563c.029.055 1.229 1.274 2.666 2.708 2.354 2.348 2.63 2.612 2.788 2.653a.75.75 0 0 0 .925-.925c-.041-.157-.25-.379-1.973-2.105l-1.926-1.93h5.12c3.611 0 5.166-.013 5.278-.045a.84.84 0 0 0 .306-.191.739.739 0 0 0-.348-1.246c-.09-.021-2.339-.036-5.256-.037l-5.1-.001 1.926-1.93C11.725 7.328 11.76 7.289 11.76 7c0-.237-.189-.551-.395-.657a.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 SvgArrowLeftS;

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

@@ -14,7 +14,7 @@ const SvgArrowLeftXs = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-arrow-left-xs';
+    const testId = '-arrow-left-xs';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,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: 16, height: 16, fill: 'currentColor', viewBox: '0 0 16 16', "data-test-id": testId }, props, { children: _jsx("path", { fill: 'inherit', fillRule: 'evenodd', d: 'M6.765 3.29a1.146 1.146 0 0 0-.2.107c-.054.037-1.019.99-2.144 2.116C2.166 7.769 2.259 7.663 2.259 8c0 .338-.097.226 2.202 2.525 1.793 1.793 2.106 2.095 2.232 2.153.285.132.611.07.84-.159A.691.691 0 0 0 7.741 12c0-.329.031-.292-1.522-1.847L4.814 8.747l4.173-.001h4.173l.136-.063A.727.727 0 0 0 13.741 8a.736.736 0 0 0-.415-.673l-.113-.06-4.199-.007-4.199-.007L6.22 5.846C7.772 4.292 7.741 4.329 7.741 4a.729.729 0 0 0-.415-.67.862.862 0 0 0-.561-.04' }) })));
+    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/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.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SvgArrowRightS = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-arrow-right-s';
+    const testId = '-arrow-right-s';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,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": testId }, props, { children: _jsx("path", { fill: 'inherit', fillRule: 'evenodd', d: 'M12.805 6.279c-.392.095-.632.518-.525.926.041.157.25.379 1.973 2.105l1.926 1.93-5.1.001c-2.917.001-5.166.016-5.256.037a.739.739 0 0 0-.348 1.246.84.84 0 0 0 .306.191c.112.032 1.667.045 5.278.045h5.12l-1.926 1.93c-1.723 1.726-1.932 1.948-1.973 2.105a.75.75 0 0 0 .925.925c.158-.041.434-.305 2.788-2.653 1.437-1.434 2.637-2.653 2.666-2.708a.79.79 0 0 0 .061-.563c-.042-.159-.293-.424-2.653-2.789-1.434-1.437-2.652-2.636-2.707-2.665a.935.935 0 0 0-.555-.063' }) })));
+    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.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SvgArrowRightXs = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-arrow-right-xs';
+    const testId = '-arrow-right-xs';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,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: 16, height: 16, fill: 'currentColor', viewBox: '0 0 16 16', "data-test-id": testId }, props, { children: _jsx("path", { fill: 'inherit', fillRule: 'evenodd', d: 'M8.765 3.29a.814.814 0 0 0-.473.457.92.92 0 0 0-.032.254c-.002.327-.033.29 1.52 1.845l1.405 1.407-4.199.007-4.199.007-.113.06A.736.736 0 0 0 2.259 8c0 .305.159.55.445.683l.136.063h4.173l4.173.001-1.405 1.406C8.228 11.708 8.259 11.671 8.259 12a.74.74 0 0 0 1.048.678c.126-.058.439-.36 2.232-2.153C13.838 8.226 13.741 8.338 13.741 8c0-.338.097-.226-2.202-2.524-1.493-1.492-2.12-2.101-2.206-2.144-.15-.075-.424-.095-.568-.042' }) })));
+    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/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;

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

@@ -14,7 +14,7 @@ const SvgChevronDownXs = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-chevron-down-xs';
+    const testId = '-chevron-down-xs';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,6 @@ const SvgChevronDownXs = (_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 6.33a.735.735 0 0 0-.423.67c0 .316-.038.27 1.724 2.034 1.454 1.455 1.619 1.612 1.747 1.66.077.029.2.053.272.053a.935.935 0 0 0 .272-.053c.128-.048.293-.205 1.747-1.66C11.781 7.27 11.743 7.316 11.743 7a.735.735 0 0 0-.423-.67.84.84 0 0 0-.627-.008c-.091.041-.43.363-1.406 1.339L8 8.946 6.713 7.661c-.976-.976-1.315-1.298-1.406-1.339a.84.84 0 0 0-.627.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 SvgChevronDownXs;

package/dist/components/interface-icons/chevronLeft/ChevronLeftS.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SvgChevronLeftS = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-chevron-left-s';
+    const testId = '-chevron-left-s';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,6 @@ const SvgChevronLeftS = (_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: 'M12.82 7.276c-.066.017-.156.05-.2.074-.044.025-1.028.995-2.187 2.157-1.897 1.903-2.111 2.131-2.153 2.289a.79.79 0 0 0 .061.563c.029.055 1.004 1.049 2.166 2.208 1.894 1.888 2.131 2.112 2.288 2.153a.75.75 0 0 0 .925-.925c-.041-.156-.24-.369-1.853-1.985L10.061 12l1.806-1.81c1.536-1.539 1.813-1.834 1.849-1.97.054-.198.054-.242.002-.429a.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 SvgChevronLeftS;

package/dist/components/interface-icons/chevronLeft/ChevronLeftXs.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SvgChevronLeftXs = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-chevron-left-xs';
+    const testId = '-chevron-left-xs';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,6 @@ const SvgChevronLeftXs = (_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: 'M8.693 4.322c-.092.041-.495.429-1.727 1.659C5.511 7.435 5.354 7.6 5.306 7.728a.761.761 0 0 0 0 .544c.048.128.205.293 1.66 1.747C8.73 11.781 8.684 11.743 9 11.743A.74.74 0 0 0 9.742 11c.001-.311.011-.299-1.403-1.713L7.054 8l1.285-1.287C9.752 5.299 9.743 5.311 9.743 5a.735.735 0 0 0-.423-.67.84.84 0 0 0-.627-.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 SvgChevronLeftXs;

package/dist/components/interface-icons/chevronRight/ChevronRightS.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SvgChevronRightS = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-chevron-right-s';
+    const testId = '-chevron-right-s';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,6 @@ const SvgChevronRightS = (_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: 'M10.9 7.259a1.438 1.438 0 0 1-.147.037c-.236.052-.51.407-.512.664-.002.331.001.335 1.892 2.23L13.939 12l-1.805 1.81c-1.943 1.948-1.93 1.932-1.876 2.29a.755.755 0 0 0 .947.62c.157-.041.394-.265 2.288-2.153 1.162-1.159 2.137-2.153 2.166-2.208a.79.79 0 0 0 .061-.563c-.042-.158-.256-.386-2.153-2.289-1.159-1.162-2.152-2.136-2.207-2.165-.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 SvgChevronRightS;

package/dist/components/interface-icons/chevronRight/ChevronRightXs.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SvgChevronRightXs = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-chevron-right-xs';
+    const testId = '-chevron-right-xs';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,6 @@ const SvgChevronRightXs = (_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: 'M6.68 4.33a.735.735 0 0 0-.423.67c0 .311-.009.299 1.404 1.713L8.946 8 7.661 9.287C6.247 10.701 6.257 10.689 6.258 11c0 .413.33.743.742.743.316 0 .27.038 2.034-1.724 1.455-1.454 1.612-1.619 1.66-1.747A.935.935 0 0 0 10.747 8a.935.935 0 0 0-.053-.272c-.048-.128-.205-.293-1.66-1.747-1.232-1.23-1.635-1.618-1.727-1.659a.84.84 0 0 0-.627.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 SvgChevronRightXs;

package/dist/components/interface-icons/chevronUp/ChevronUpS.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SvgChevronUpS = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-chevron-up-s';
+    const testId = '-chevron-up-s';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,6 @@ const SvgChevronUpS = (_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 8.259a1.795 1.795 0 0 1-.16.04c-.183.04-4.356 4.216-4.445 4.449-.213.557.321 1.127.91.972.156-.041.369-.24 1.985-1.853L12 10.061l1.81 1.806c1.616 1.613 1.829 1.812 1.985 1.853a.75.75 0 0 0 .925-.925c-.041-.157-.265-.394-2.153-2.288-1.159-1.162-2.152-2.136-2.207-2.165-.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 SvgChevronUpS;

package/dist/components/interface-icons/chevronUp/ChevronUpXs.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SvgChevronUpXs = (_a) => {
     var { size = 24 } = _a, props = __rest(_a, ["size"]);
     props.width = undefined;
     props.height = undefined;
-    const testId = 'icon-chevron-up-xs';
+    const testId = '-chevron-up-xs';
     const isCustomSize = typeof size === 'number';
     if (isCustomSize) {
         if (!props.style)
@@ -22,6 +22,6 @@ const SvgChevronUpXs = (_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.733 5.299c-.103.035-.348.268-1.739 1.656C4.215 8.73 4.258 8.679 4.258 9A.738.738 0 0 0 5 9.742c.311.001.299.011 1.713-1.403L8 7.054l1.287 1.285C10.701 9.753 10.689 9.743 11 9.742c.413 0 .743-.33.742-.742 0-.321.043-.27-1.736-2.045-1.468-1.464-1.632-1.619-1.751-1.658a.854.854 0 0 0-.522.002' }) })));
+    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 SvgChevronUpXs;