@snack-uikit/link 0.13.4 → 0.13.5-preview-d96c83e8.0

package/dist/cjs/components/Link.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__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;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Link = Link;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("./constants");
+const styles_module_scss_1 = __importDefault({});
+/** Компонент ссылка */
+function Link(_a) {
+  var {
+      text = '',
+      className,
+      href = '#',
+      target = '_blank',
+      download,
+      onClick,
+      textMode = constants_1.TEXT_MODE.Default,
+      size = constants_1.SIZE.S,
+      appearance = constants_1.APPEARANCE.Primary,
+      insideText = false,
+      truncateVariant
+    } = _a,
+    rest = __rest(_a, ["text", "className", "href", "target", "download", "onClick", "textMode", "size", "appearance", "insideText", "truncateVariant"]);
+  return (0, jsx_runtime_1.jsx)("a", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.link, className),
+    href: href,
+    target: target,
+    download: download,
+    onClick: onClick
+  }, (0, utils_1.extractSupportProps)(rest), {
+    "data-size": size,
+    "data-text-mode": textMode,
+    "data-appearance": appearance,
+    "data-inside-text": insideText || undefined,
+    rel: target === '_blank' ? 'noopener noreferrer' : undefined,
+    children: insideText ? text : (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+      text: text,
+      maxLines: 1,
+      variant: truncateVariant
+    })
+  }));
+}

package/dist/cjs/components/constants.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TEXT_MODE = exports.TARGET = exports.SIZE = exports.APPEARANCE = void 0;
+exports.APPEARANCE = {
+  InvertNeutral: 'invert-neutral',
+  Neutral: 'neutral',
+  Primary: 'primary',
+  Red: 'red',
+  Orange: 'orange',
+  Yellow: 'yellow',
+  Green: 'green',
+  Blue: 'blue',
+  Violet: 'violet',
+  Pink: 'pink'
+};
+exports.SIZE = {
+  S: 's',
+  M: 'm',
+  L: 'l'
+};
+exports.TARGET = {
+  Self: '_self',
+  Blank: '_blank',
+  Parent: '_parent',
+  Top: '_top'
+};
+exports.TEXT_MODE = {
+  Default: 'default',
+  Accent: 'accent',
+  OnAccent: 'on-accent'
+};

package/dist/cjs/components/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Link"), exports);

package/dist/cjs/components/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./components"), exports);

package/dist/esm/components/Link.d.ts

@@ -0,0 +1,40 @@
+import { AnchorHTMLAttributes, MouseEventHandler } from 'react';
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Appearance, Size, TextMode } from './types';
+export type LinkProps = WithSupportProps<{
+    /** Текст ссылки */
+    text?: string;
+    /** CSS-класс */
+    className?: string;
+    /** Ссылка */
+    href?: string;
+    /** HTML-атрибут target */
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /** HTML-атрибут download */
+    download?: string;
+    /** Колбек обработки клика */
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    /** Размер
+     * @default 's'
+     */
+    size?: Size;
+    /** Стилизует ссылку для размещения на цветном фоне
+     * @default 'primary'
+     */
+    appearance?: Appearance;
+    /** Тип поверхности, на которой размещена ссылка
+     * @default 'default'
+     */
+    textMode?: TextMode;
+    /** Находится ли ссылка внутри текста (и можно ли её переносить) */
+    insideText?: boolean;
+    /**
+     * Вариант обрезания строки:
+     * <br> - `end` - с конца;
+     * <br> - `middle` - по середине
+     * */
+    truncateVariant?: TruncateStringProps['variant'];
+}>;
+/** Компонент ссылка */
+export declare function Link({ text, className, href, target, download, onClick, textMode, size, appearance, insideText, truncateVariant, ...rest }: LinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/constants.d.ts

@@ -0,0 +1,28 @@
+export declare const APPEARANCE: {
+    readonly InvertNeutral: "invert-neutral";
+    readonly Neutral: "neutral";
+    readonly Primary: "primary";
+    readonly Red: "red";
+    readonly Orange: "orange";
+    readonly Yellow: "yellow";
+    readonly Green: "green";
+    readonly Blue: "blue";
+    readonly Violet: "violet";
+    readonly Pink: "pink";
+};
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+export declare const TARGET: {
+    readonly Self: "_self";
+    readonly Blank: "_blank";
+    readonly Parent: "_parent";
+    readonly Top: "_top";
+};
+export declare const TEXT_MODE: {
+    readonly Default: "default";
+    readonly Accent: "accent";
+    readonly OnAccent: "on-accent";
+};

package/dist/esm/components/index.js

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

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

@@ -0,0 +1,5 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { APPEARANCE, SIZE, TEXT_MODE } from './constants';
+export type Appearance = ValueOf<typeof APPEARANCE>;
+export type Size = ValueOf<typeof SIZE>;
+export type TextMode = ValueOf<typeof TEXT_MODE>;

package/dist/esm/index.js

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

package/package.json

@@ -4,15 +4,16 @@
     "access": "public"
   },
   "title": "Link",
-  "version": "0.13.4",
+  "version": "0.13.5-preview-d96c83e8.0",
   "sideEffects": [
     "*.css",
     "*.woff",
     "*.woff2"
   ],
   "description": "Ссылка, используемая внутри текста",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
   "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/link",
   "repository": {
     "type": "git",
@@ -24,7 +25,8 @@
     "Anna Kozlova <apkozlova@cloud.ru>"
   ],
   "files": [
-    "dist",
+    "dist/cjs",
+    "dist/esm",
     "src",
     "./CHANGELOG.md",
     "./LICENSE"
@@ -32,9 +34,9 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/truncate-string": "0.4.24",
-    "@snack-uikit/utils": "3.4.0",
+    "@snack-uikit/truncate-string": "0.4.25-preview-d96c83e8.0",
+    "@snack-uikit/utils": "3.4.1-preview-d96c83e8.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "6f68e2729e48e5b34674af649dc9dfb3bda3951f"
+  "gitHead": "7ad2685e79ccef7528ade40fe4e2a5d4e609a22f"
 }

package/dist/components/styles.module.css

@@ -1,536 +0,0 @@
-.link{
-  cursor:pointer;
-  display:inline-flex;
-  align-items:center;
-  width:-moz-fit-content;
-  width:fit-content;
-  max-width:100%;
-  text-decoration:none;
-  -webkit-text-decoration-skip-ink:none;
-          text-decoration-skip-ink:none;
-}
-.link[data-inside-text]{
-  display:inline;
-}
-.link[data-appearance=invert-neutral][data-text-mode=default]{
-  color:var(--sys-invert-neutral-text-support, #bec2cf);
-}
-.link[data-appearance=invert-neutral][data-text-mode=default]:hover{
-  color:var(--sys-invert-neutral-text-main, #e6e8ef);
-}
-.link[data-appearance=invert-neutral][data-text-mode=default]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-invert-neutral-text-main, #e6e8ef);
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.link[data-appearance=invert-neutral][data-text-mode=accent]{
-  color:var(--sys-invert-neutral-accent-default, #cfd2dc);
-}
-.link[data-appearance=invert-neutral][data-text-mode=accent]:hover{
-  color:var(--sys-invert-neutral-text-main, #e6e8ef);
-}
-.link[data-appearance=invert-neutral][data-text-mode=accent]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-invert-neutral-text-main, #e6e8ef);
-  outline-color:var(--sys-available-on-complementary, #ffffff);
-}
-.link[data-appearance=invert-neutral][data-text-mode=on-accent]{
-  color:var(--sys-invert-neutral-on-accent, #393a46);
-}
-.link[data-appearance=invert-neutral][data-text-mode=on-accent]:hover{
-  color:var(--sys-invert-neutral-on-accent, #393a46);
-  opacity:var(--opacity-a080, 0.8);
-}
-.link[data-appearance=invert-neutral][data-text-mode=on-accent]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-invert-neutral-on-accent, #393a46);
-  opacity:var(--opacity-a080, 0.8);
-  outline-color:var(--sys-available-on-complementary, #ffffff);
-}
-.link[data-appearance=neutral][data-text-mode=default]{
-  color:var(--sys-neutral-text-support, #6d707f);
-}
-.link[data-appearance=neutral][data-text-mode=default]:hover{
-  color:var(--sys-neutral-text-main, #41424e);
-}
-.link[data-appearance=neutral][data-text-mode=default]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-neutral-text-main, #41424e);
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.link[data-appearance=neutral][data-text-mode=accent]{
-  color:var(--sys-neutral-accent-default, #787b8a);
-}
-.link[data-appearance=neutral][data-text-mode=accent]:hover{
-  color:var(--sys-neutral-text-main, #41424e);
-}
-.link[data-appearance=neutral][data-text-mode=accent]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-neutral-text-main, #41424e);
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.link[data-appearance=neutral][data-text-mode=on-accent]{
-  color:var(--sys-neutral-on-accent, #ffffff);
-}
-.link[data-appearance=neutral][data-text-mode=on-accent]:hover{
-  color:var(--sys-neutral-on-accent, #ffffff);
-  opacity:var(--opacity-a080, 0.8);
-}
-.link[data-appearance=neutral][data-text-mode=on-accent]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-neutral-on-accent, #ffffff);
-  opacity:var(--opacity-a080, 0.8);
-  outline-color:var(--sys-available-on-complementary, #ffffff);
-}
-.link[data-appearance=primary][data-text-mode=default]{
-  color:var(--sys-primary-text-support, #5b4796);
-}
-.link[data-appearance=primary][data-text-mode=default]:hover{
-  color:var(--sys-primary-text-main, #382a62);
-}
-.link[data-appearance=primary][data-text-mode=default]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-primary-text-main, #382a62);
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.link[data-appearance=primary][data-text-mode=accent]{
-  color:var(--sys-primary-accent-default, #794ed3);
-}
-.link[data-appearance=primary][data-text-mode=accent]:hover{
-  color:var(--sys-primary-text-main, #382a62);
-}
-.link[data-appearance=primary][data-text-mode=accent]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-primary-text-main, #382a62);
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.link[data-appearance=primary][data-text-mode=on-accent]{
-  color:var(--sys-primary-on-accent, #fdfbff);
-}
-.link[data-appearance=primary][data-text-mode=on-accent]:hover{
-  color:var(--sys-primary-on-accent, #fdfbff);
-  opacity:var(--opacity-a080, 0.8);
-}
-.link[data-appearance=primary][data-text-mode=on-accent]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-primary-on-accent, #fdfbff);
-  opacity:var(--opacity-a080, 0.8);
-  outline-color:var(--sys-available-on-complementary, #ffffff);
-}
-.link[data-appearance=red][data-text-mode=default]{
-  color:var(--sys-red-text-support, #ae514c);
-}
-.link[data-appearance=red][data-text-mode=default]:hover{
-  color:var(--sys-red-text-main, #7a2d2d);
-}
-.link[data-appearance=red][data-text-mode=default]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-red-text-main, #7a2d2d);
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.link[data-appearance=red][data-text-mode=accent]{
-  color:var(--sys-red-accent-default, #cb3f3e);
-}
-.link[data-appearance=red][data-text-mode=accent]:hover{
-  color:var(--sys-red-text-main, #7a2d2d);
-}
-.link[data-appearance=red][data-text-mode=accent]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-red-text-main, #7a2d2d);
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.link[data-appearance=red][data-text-mode=on-accent]{
-  color:var(--sys-red-on-accent, #fffbf9);
-}
-.link[data-appearance=red][data-text-mode=on-accent]:hover{
-  color:var(--sys-red-on-accent, #fffbf9);
-  opacity:var(--opacity-a080, 0.8);
-}
-.link[data-appearance=red][data-text-mode=on-accent]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-red-on-accent, #fffbf9);
-  opacity:var(--opacity-a080, 0.8);
-  outline-color:var(--sys-available-on-complementary, #ffffff);
-}
-.link[data-appearance=orange][data-text-mode=default]{
-  color:var(--sys-orange-text-support, #bb733e);
-}
-.link[data-appearance=orange][data-text-mode=default]:hover{
-  color:var(--sys-orange-text-main, #884c23);
-}
-.link[data-appearance=orange][data-text-mode=default]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-orange-text-main, #884c23);
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.link[data-appearance=orange][data-text-mode=accent]{
-  color:var(--sys-orange-accent-default, #fb8e42);
-}
-.link[data-appearance=orange][data-text-mode=accent]:hover{
-  color:var(--sys-orange-text-main, #884c23);
-}
-.link[data-appearance=orange][data-text-mode=accent]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-orange-text-main, #884c23);
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.link[data-appearance=orange][data-text-mode=on-accent]{
-  color:var(--sys-orange-on-accent, #fffcf4);
-}
-.link[data-appearance=orange][data-text-mode=on-accent]:hover{
-  color:var(--sys-orange-on-accent, #fffcf4);
-  opacity:var(--opacity-a080, 0.8);
-}
-.link[data-appearance=orange][data-text-mode=on-accent]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-orange-on-accent, #fffcf4);
-  opacity:var(--opacity-a080, 0.8);
-  outline-color:var(--sys-available-on-complementary, #ffffff);
-}
-.link[data-appearance=blue][data-text-mode=default]{
-  color:var(--sys-blue-text-support, #4877b0);
-}
-.link[data-appearance=blue][data-text-mode=default]:hover{
-  color:var(--sys-blue-text-main, #2b537e);
-}
-.link[data-appearance=blue][data-text-mode=default]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-blue-text-main, #2b537e);
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.link[data-appearance=blue][data-text-mode=accent]{
-  color:var(--sys-blue-accent-default, #5388d1);
-}
-.link[data-appearance=blue][data-text-mode=accent]:hover{
-  color:var(--sys-blue-text-main, #2b537e);
-}
-.link[data-appearance=blue][data-text-mode=accent]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-blue-text-main, #2b537e);
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.link[data-appearance=blue][data-text-mode=on-accent]{
-  color:var(--sys-blue-on-accent, #fdfeff);
-}
-.link[data-appearance=blue][data-text-mode=on-accent]:hover{
-  color:var(--sys-blue-on-accent, #fdfeff);
-  opacity:var(--opacity-a080, 0.8);
-}
-.link[data-appearance=blue][data-text-mode=on-accent]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-blue-on-accent, #fdfeff);
-  opacity:var(--opacity-a080, 0.8);
-  outline-color:var(--sys-available-on-complementary, #ffffff);
-}
-.link[data-appearance=violet][data-text-mode=default]{
-  color:var(--sys-violet-text-support, #8c639b);
-}
-.link[data-appearance=violet][data-text-mode=default]:hover{
-  color:var(--sys-violet-text-main, #59446a);
-}
-.link[data-appearance=violet][data-text-mode=default]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-violet-text-main, #59446a);
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.link[data-appearance=violet][data-text-mode=accent]{
-  color:var(--sys-violet-accent-default, #aa6cc1);
-}
-.link[data-appearance=violet][data-text-mode=accent]:hover{
-  color:var(--sys-violet-text-main, #59446a);
-}
-.link[data-appearance=violet][data-text-mode=accent]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-violet-text-main, #59446a);
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.link[data-appearance=violet][data-text-mode=on-accent]{
-  color:var(--sys-violet-on-accent, #fdfdfd);
-}
-.link[data-appearance=violet][data-text-mode=on-accent]:hover{
-  color:var(--sys-violet-on-accent, #fdfdfd);
-  opacity:var(--opacity-a080, 0.8);
-}
-.link[data-appearance=violet][data-text-mode=on-accent]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-violet-on-accent, #fdfdfd);
-  opacity:var(--opacity-a080, 0.8);
-  outline-color:var(--sys-available-on-complementary, #ffffff);
-}
-.link[data-appearance=pink][data-text-mode=default]{
-  color:var(--sys-pink-text-support, #ae5e80);
-}
-.link[data-appearance=pink][data-text-mode=default]:hover{
-  color:var(--sys-pink-text-main, #754158);
-}
-.link[data-appearance=pink][data-text-mode=default]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-pink-text-main, #754158);
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.link[data-appearance=pink][data-text-mode=accent]{
-  color:var(--sys-pink-accent-default, #d1668e);
-}
-.link[data-appearance=pink][data-text-mode=accent]:hover{
-  color:var(--sys-pink-text-main, #754158);
-}
-.link[data-appearance=pink][data-text-mode=accent]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-pink-text-main, #754158);
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.link[data-appearance=pink][data-text-mode=on-accent]{
-  color:var(--sys-pink-on-accent, #fdfcfc);
-}
-.link[data-appearance=pink][data-text-mode=on-accent]:hover{
-  color:var(--sys-pink-on-accent, #fdfcfc);
-  opacity:var(--opacity-a080, 0.8);
-}
-.link[data-appearance=pink][data-text-mode=on-accent]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-pink-on-accent, #fdfcfc);
-  opacity:var(--opacity-a080, 0.8);
-  outline-color:var(--sys-available-on-complementary, #ffffff);
-}
-.link[data-appearance=yellow][data-text-mode=default]{
-  color:var(--sys-yellow-text-support, #b78c32);
-}
-.link[data-appearance=yellow][data-text-mode=default]:hover{
-  color:var(--sys-yellow-text-main, #815f19);
-}
-.link[data-appearance=yellow][data-text-mode=default]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-yellow-text-main, #815f19);
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.link[data-appearance=yellow][data-text-mode=accent]{
-  color:var(--sys-yellow-accent-default, #e2b134);
-}
-.link[data-appearance=yellow][data-text-mode=accent]:hover{
-  color:var(--sys-yellow-text-main, #815f19);
-}
-.link[data-appearance=yellow][data-text-mode=accent]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-yellow-text-main, #815f19);
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.link[data-appearance=yellow][data-text-mode=on-accent]{
-  color:var(--sys-yellow-on-accent, #583f1f);
-}
-.link[data-appearance=yellow][data-text-mode=on-accent]:hover{
-  color:var(--sys-yellow-on-accent, #583f1f);
-  opacity:var(--opacity-a080, 0.8);
-}
-.link[data-appearance=yellow][data-text-mode=on-accent]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-yellow-on-accent, #583f1f);
-  opacity:var(--opacity-a080, 0.8);
-  outline-color:var(--sys-available-on-complementary, #ffffff);
-}
-.link[data-appearance=green][data-text-mode=default]{
-  color:var(--sys-green-text-support, #55915a);
-}
-.link[data-appearance=green][data-text-mode=default]:hover{
-  color:var(--sys-green-text-main, #3d6035);
-}
-.link[data-appearance=green][data-text-mode=default]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-green-text-main, #3d6035);
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.link[data-appearance=green][data-text-mode=accent]{
-  color:var(--sys-green-accent-default, #57b762);
-}
-.link[data-appearance=green][data-text-mode=accent]:hover{
-  color:var(--sys-green-text-main, #3d6035);
-}
-.link[data-appearance=green][data-text-mode=accent]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-green-text-main, #3d6035);
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.link[data-appearance=green][data-text-mode=on-accent]{
-  color:var(--sys-green-on-accent, #fcfefa);
-}
-.link[data-appearance=green][data-text-mode=on-accent]:hover{
-  color:var(--sys-green-on-accent, #fcfefa);
-  opacity:var(--opacity-a080, 0.8);
-}
-.link[data-appearance=green][data-text-mode=on-accent]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-green-on-accent, #fcfefa);
-  opacity:var(--opacity-a080, 0.8);
-  outline-color:var(--sys-available-on-complementary, #ffffff);
-}
-.link[data-size=s]{
-  height:var(--size-link-s, 16px);
-  gap:var(--space-link-gap-single, 0px);
-}
-.link[data-size=s][data-text-mode=default]{
-  font-family:var(--sans-body-s-font-family, SB Sans Interface);
-  font-weight:var(--sans-body-s-font-weight, Regular);
-  line-height:var(--sans-body-s-line-height, 16px);
-  font-size:var(--sans-body-s-font-size, 12px);
-  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
-  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
-}
-.link[data-size=s][data-text-mode=accent]{
-  font-family:var(--link-body-s-font-family, SB Sans Interface);
-  font-weight:var(--link-body-s-font-weight, Regular);
-  line-height:var(--link-body-s-line-height, 16px);
-  font-size:var(--link-body-s-font-size, 12px);
-  letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
-  paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
-  -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
-          text-decoration:var(--link-body-s-text-decoration, underline);
-}
-.link[data-size=s][data-text-mode=on-accent]{
-  font-family:var(--link-body-s-font-family, SB Sans Interface);
-  font-weight:var(--link-body-s-font-weight, Regular);
-  line-height:var(--link-body-s-line-height, 16px);
-  font-size:var(--link-body-s-font-size, 12px);
-  letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
-  paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
-  -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
-          text-decoration:var(--link-body-s-text-decoration, underline);
-}
-.link[data-size=s] svg{
-  width:var(--size-icon-container-xs, 16px) !important;
-  height:var(--size-icon-container-xs, 16px) !important;
-}
-.link[data-size=m]{
-  height:var(--size-link-m, 20px);
-  gap:var(--space-link-gap-single, 0px);
-}
-.link[data-size=m][data-text-mode=default]{
-  font-family:var(--sans-body-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-body-m-font-weight, Regular);
-  line-height:var(--sans-body-m-line-height, 20px);
-  font-size:var(--sans-body-m-font-size, 14px);
-  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
-  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
-}
-.link[data-size=m][data-text-mode=accent]{
-  font-family:var(--link-body-m-font-family, SB Sans Interface);
-  font-weight:var(--link-body-m-font-weight, Regular);
-  line-height:var(--link-body-m-line-height, 20px);
-  font-size:var(--link-body-m-font-size, 14px);
-  letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
-  paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
-  -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
-          text-decoration:var(--link-body-m-text-decoration, underline);
-}
-.link[data-size=m][data-text-mode=on-accent]{
-  font-family:var(--link-body-m-font-family, SB Sans Interface);
-  font-weight:var(--link-body-m-font-weight, Regular);
-  line-height:var(--link-body-m-line-height, 20px);
-  font-size:var(--link-body-m-font-size, 14px);
-  letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
-  paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
-  -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
-          text-decoration:var(--link-body-m-text-decoration, underline);
-}
-.link[data-size=m] svg{
-  width:var(--size-icon-container-s, 24px) !important;
-  height:var(--size-icon-container-s, 24px) !important;
-}
-.link[data-size=l]{
-  height:var(--size-link-l, 24px);
-  gap:var(--space-link-gap-single, 0px);
-}
-.link[data-size=l][data-text-mode=default]{
-  font-family:var(--sans-body-l-font-family, SB Sans Interface);
-  font-weight:var(--sans-body-l-font-weight, Regular);
-  line-height:var(--sans-body-l-line-height, 24px);
-  font-size:var(--sans-body-l-font-size, 16px);
-  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
-  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
-}
-.link[data-size=l][data-text-mode=accent]{
-  font-family:var(--link-body-l-font-family, SB Sans Interface);
-  font-weight:var(--link-body-l-font-weight, Regular);
-  line-height:var(--link-body-l-line-height, 24px);
-  font-size:var(--link-body-l-font-size, 16px);
-  letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
-  paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
-  -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
-          text-decoration:var(--link-body-l-text-decoration, underline);
-}
-.link[data-size=l][data-text-mode=on-accent]{
-  font-family:var(--link-body-l-font-family, SB Sans Interface);
-  font-weight:var(--link-body-l-font-weight, Regular);
-  line-height:var(--link-body-l-line-height, 24px);
-  font-size:var(--link-body-l-font-size, 16px);
-  letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
-  paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
-  -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
-          text-decoration:var(--link-body-l-text-decoration, underline);
-}
-.link[data-size=l] svg{
-  width:var(--size-icon-container-s, 24px) !important;
-  height:var(--size-icon-container-s, 24px) !important;
-}
-
-.icon{
-  flex-shrink:0;
-}