@digitalc/dxp-ui 0.0.4 → 0.0.5-alpha-gomo.1

package/lib/components/Tabs/index.js

@@ -0,0 +1,145 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Tabs/index.tsx
+var Tabs_exports = {};
+__export(Tabs_exports, {
+  default: () => Tabs_default
+});
+module.exports = __toCommonJS(Tabs_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_cssinjs = require("@ant-design/cssinjs");
+var import_theme = require("../../utils/theme");
+var import_designTokens = require("./designTokens");
+var import_constants = require("../../constants");
+var import_Text = __toESM(require("../Text"));
+var import_style = require("./style/index.less");
+var Tabs = (props) => {
+  const _a = props, {
+    inverse,
+    children,
+    items = [],
+    type = "default",
+    defaultActiveKey,
+    prefixCls = `${import_constants.BASE_CLASS_PREFIX}-tabs`
+  } = _a, attr = __objRest(_a, [
+    "inverse",
+    "children",
+    "items",
+    "type",
+    "defaultActiveKey",
+    "prefixCls"
+  ]);
+  const subTitleColor = inverse ? import_designTokens.otherDesignToken.colorTabsTextSubtitleInverseInactive : import_designTokens.otherDesignToken.colorTabsTextSubtitleInactive;
+  const subTitleActiveColor = inverse ? import_designTokens.otherDesignToken.colorTabsTextSubtitleInverse : import_designTokens.otherDesignToken.colorTabsTextSubtitle;
+  const iconColor = inverse ? import_designTokens.otherDesignToken.colorTabsIconInactiveInverse : import_designTokens.otherDesignToken.colorTabsIconInactive;
+  const iconActiveColor = inverse ? import_designTokens.otherDesignToken.colorTabsIconActiveInverse : import_designTokens.otherDesignToken.colorTabsIconActive;
+  const useCustomButtonStyle = () => {
+    const hashId = (0, import_cssinjs.useStyleRegister)({
+      theme: import_theme.theme,
+      token: { baseColor: "blue" },
+      path: [`${prefixCls}`]
+    }, () => `
+      .${prefixCls}-card.${prefixCls}-fill>.${prefixCls}-nav .${prefixCls}-tab {
+        border-radius: 18px;
+      }
+      .${prefixCls}-card.${prefixCls}-fill .${prefixCls}-nav-list {
+        background: ${import_designTokens.designFillTokens.colorFillAlter};
+        border-radius: 18px;
+      }
+    `);
+    return hashId;
+  };
+  useCustomButtonStyle();
+  const [activeKey, setActiveKey] = (0, import_react.useState)(defaultActiveKey || "");
+  const handleTabClick = (key) => {
+    setActiveKey(key);
+  };
+  const item = items.map((i) => __spreadProps(__spreadValues({
+    label: /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-item` }, /* @__PURE__ */ import_react.default.createElement("span", { style: { color: i.key === activeKey ? iconActiveColor : iconColor, fontSize: import_designTokens.otherDesignToken.sizingTabsIcon } }, i.icon), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { size: "ContentC14Regular", className: `${prefixCls}-item-title` }, i.title), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { size: "ContentC12Regular", style: { color: i.key === activeKey ? subTitleActiveColor : subTitleColor } }, i.subTitle))
+  }, i), {
+    icon: null
+  }));
+  const inverseStoken = inverse ? import_designTokens.inverseDesignTokens : import_designTokens.designTokens;
+  const fillStoken = type === "fill" ? import_designTokens.designFillTokens : inverseStoken;
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.ConfigProvider,
+    {
+      prefixCls: import_constants.BASE_CLASS_PREFIX,
+      theme: {
+        components: {
+          Tabs: __spreadProps(__spreadValues({}, fillStoken), {
+            horizontalItemGutter: 0
+          })
+        }
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Tabs,
+      __spreadProps(__spreadValues({}, attr), {
+        defaultActiveKey,
+        items: item,
+        onTabClick: handleTabClick,
+        type: type === "fill" ? "card" : "line",
+        className: type === "fill" ? `${prefixCls}-fill` : ""
+      }),
+      children
+    )
+  );
+};
+var Tabs_default = Tabs;

package/lib/components/Tabs/style/index.less

@@ -0,0 +1,25 @@
+
+@import './variables.less';
+
+@components: tabs;
+.@{prefix}-@{components}-item {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+.@{prefix}-@{components}-tab-btn {
+  text-align: center;
+  .@{prefix}-@{components}-tab-icon {
+    margin: 0 !important;
+  }
+}
+.@{prefix}-@{components}-tab-active .@{prefix}-@{components}-item-title {
+  font-family: Roboto-Bold;
+}
+.@{prefix}-@{components}-fill .@{prefix}-@{components}-tab-active .@{prefix}-@{components}-item-title {
+  font-family: Roboto-Regular;
+}
+.@{prefix}-@{components}-fill>.@{prefix}-@{components}-nav .@{prefix}-@{components}-tab-focus {
+  outline: none;
+}

package/lib/components/Tabs/style/variables.less

@@ -0,0 +1,4 @@
+
+@import '../../../style/variables.less';
+
+@btn-primary-bg-default: var(--base-color-primary);

package/lib/components/Tag/designTokens.d.ts

@@ -0,0 +1,90 @@
+declare const designTokens: {
+    borderRadiusSM: any;
+};
+declare const designTokensPrimary: {
+    colorText: any;
+    defaultBg: any;
+    colorBorder: any;
+};
+declare const designTokensSecondary: {
+    colorText: any;
+    defaultBg: any;
+    colorBorder: any;
+};
+declare const designTokensBlueLight: {
+    colorText: string;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensGreenLight: {
+    colorText: string;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensYellowLight: {
+    colorText: string;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensRedLight: {
+    colorText: string;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensGreyLight: {
+    colorText: string;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensLakeblueLight: {
+    colorText: string;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensOrangeLight: {
+    colorText: string;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensBlue: {
+    colorText: any;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensGreen: {
+    colorText: any;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensYellow: {
+    colorText: any;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensRed: {
+    colorText: any;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensGrey: {
+    colorText: any;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensLakeblue: {
+    colorText: any;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensOrange: {
+    colorText: any;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const otherDesignTokens: {
+    padding: string;
+    sizingTagShort: string;
+    sizingTagTall: string;
+    sizingTagTallLg: string;
+};
+export { designTokens, otherDesignTokens, designTokensPrimary, designTokensSecondary, designTokensBlue, designTokensGrey, designTokensGreen, designTokensRed, designTokensYellow, designTokensOrange, designTokensLakeblue, designTokensBlueLight, designTokensGreyLight, designTokensGreenLight, designTokensRedLight, designTokensYellowLight, designTokensOrangeLight, designTokensLakeblueLight, };

package/lib/components/Tag/designTokens.js

@@ -0,0 +1,181 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Tag/designTokens.ts
+var designTokens_exports = {};
+__export(designTokens_exports, {
+  designTokens: () => designTokens,
+  designTokensBlue: () => designTokensBlue,
+  designTokensBlueLight: () => designTokensBlueLight,
+  designTokensGreen: () => designTokensGreen,
+  designTokensGreenLight: () => designTokensGreenLight,
+  designTokensGrey: () => designTokensGrey,
+  designTokensGreyLight: () => designTokensGreyLight,
+  designTokensLakeblue: () => designTokensLakeblue,
+  designTokensLakeblueLight: () => designTokensLakeblueLight,
+  designTokensOrange: () => designTokensOrange,
+  designTokensOrangeLight: () => designTokensOrangeLight,
+  designTokensPrimary: () => designTokensPrimary,
+  designTokensRed: () => designTokensRed,
+  designTokensRedLight: () => designTokensRedLight,
+  designTokensSecondary: () => designTokensSecondary,
+  designTokensYellow: () => designTokensYellow,
+  designTokensYellowLight: () => designTokensYellowLight,
+  otherDesignTokens: () => otherDesignTokens
+});
+module.exports = __toCommonJS(designTokens_exports);
+var import_tokenHelper = require("../../utils/tokenHelper");
+var designTokens = {
+  borderRadiusSM: (0, import_tokenHelper.getToken)("borderRadiusTag")
+  // 圆角
+};
+var designTokensPrimary = {
+  colorText: (0, import_tokenHelper.getToken)("colorTagText"),
+  // 文本颜色
+  defaultBg: (0, import_tokenHelper.getToken)("colorTagBackgroundPrimary"),
+  // 背景色
+  colorBorder: (0, import_tokenHelper.getToken)("colorTagBackgroundPrimary")
+  // 边框
+};
+var designTokensSecondary = {
+  colorText: (0, import_tokenHelper.getToken)("colorTagText"),
+  // 文本颜色
+  defaultBg: (0, import_tokenHelper.getToken)("colorTagBackgroundSecondary"),
+  // 背景色
+  colorBorder: (0, import_tokenHelper.getToken)("colorTagBackgroundSecondary")
+  // 边框
+};
+var designTokensBlueLight = {
+  colorText: "#3434E1",
+  // 文本颜色
+  defaultBg: "#EBEBFC",
+  // 背景色
+  colorBorder: "#EBEBFC"
+  // 边框
+};
+var designTokensGreenLight = {
+  colorText: "#00BC6F",
+  // 文本颜色
+  defaultBg: "#E8FBF3",
+  // 背景色
+  colorBorder: "#E8FBF3"
+  // 边框
+};
+var designTokensYellowLight = {
+  colorText: "#FFC300",
+  // 文本颜色
+  defaultBg: "#FFF8E5",
+  // 背景色
+  colorBorder: "#FFF8E5"
+  // 边框
+};
+var designTokensRedLight = {
+  colorText: "#FA2C2C",
+  // 文本颜色
+  defaultBg: "#FFEAEA",
+  // 背景色
+  colorBorder: "#FFEAEA"
+  // 边框
+};
+var designTokensGreyLight = {
+  colorText: "#545454",
+  // 文本颜色
+  defaultBg: "#E6E6E6",
+  // 背景色
+  colorBorder: "#E6E6E6"
+  // 边框
+};
+var designTokensLakeblueLight = {
+  colorText: "#1482CC",
+  // 文本颜色
+  defaultBg: "#E8F6FF",
+  // 背景色
+  colorBorder: "#E8F6FF"
+  // 边框
+};
+var designTokensOrangeLight = {
+  colorText: "#FF8D1B",
+  // 文本颜色
+  defaultBg: "#FFF4E9",
+  // 背景色
+  colorBorder: "#FFF4E9"
+  // 边框
+};
+var designTokensBlue = {
+  colorText: (0, import_tokenHelper.getToken)("colorTagText"),
+  // 文本颜色
+  defaultBg: "#3434E1",
+  // 背景色
+  colorBorder: "#3434E1"
+  // 边框
+};
+var designTokensGreen = {
+  colorText: (0, import_tokenHelper.getToken)("colorTagText"),
+  // 文本颜色
+  defaultBg: "#00BC6F",
+  // 背景色
+  colorBorder: "#00BC6F"
+  // 边框
+};
+var designTokensYellow = {
+  colorText: (0, import_tokenHelper.getToken)("colorTagText"),
+  // 文本颜色
+  defaultBg: "#FFC300",
+  // 背景色
+  colorBorder: "#FFC300"
+  // 边框
+};
+var designTokensRed = {
+  colorText: (0, import_tokenHelper.getToken)("colorTagText"),
+  // 文本颜色
+  defaultBg: "#FA2C2C",
+  // 背景色
+  colorBorder: "#FA2C2C"
+  // 边框
+};
+var designTokensGrey = {
+  colorText: (0, import_tokenHelper.getToken)("colorTagText"),
+  // 文本颜色
+  defaultBg: "#B5B5B5",
+  // 背景色
+  colorBorder: "#B5B5B5"
+  // 边框
+};
+var designTokensLakeblue = {
+  colorText: (0, import_tokenHelper.getToken)("colorTagText"),
+  // 文本颜色
+  defaultBg: "#1482CC",
+  // 背景色
+  colorBorder: "#1482CC"
+  // 边框
+};
+var designTokensOrange = {
+  colorText: (0, import_tokenHelper.getToken)("colorTagText"),
+  // 文本颜色
+  defaultBg: "#FF8D1B",
+  // 背景色
+  colorBorder: "#FF8D1B"
+  // 边框
+};
+var otherDesignTokens = {
+  padding: `0 ${(0, import_tokenHelper.getToken)("spacingTagPaddingHorizontal")}px`,
+  // 内边距
+  sizingTagShort: `${(0, import_tokenHelper.getToken)("sizingTagShort")}px`,
+  sizingTagTall: `${(0, import_tokenHelper.getToken)("sizingTagTall")}px`,
+  sizingTagTallLg: `${(0, import_tokenHelper.getToken)("sizingTagTallLg")}px`
+};

package/lib/components/Tag/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import './style/index.less';
+export type types = 'primary' | 'secondary' | 'blue' | 'green' | 'yellow' | 'red' | 'grey' | 'lakeblue' | 'orange';
+export type size = 'short' | 'tall' | 'tallLg';
+export interface TagProps {
+    prefixCls?: string;
+    children?: React.ReactNode;
+    types?: types;
+    style?: React.CSSProperties;
+    inverse?: boolean;
+    block?: boolean;
+    [key: string]: any;
+}
+declare const Tag: (props: TagProps) => React.JSX.Element;
+export default Tag;

package/lib/components/Tag/index.js

@@ -0,0 +1,146 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Tag/index.tsx
+var Tag_exports = {};
+__export(Tag_exports, {
+  default: () => Tag_default
+});
+module.exports = __toCommonJS(Tag_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_designTokens = require("./designTokens");
+var import_constants = require("../../constants");
+var import_Text = __toESM(require("../Text"));
+var import_style = require("./style/index.less");
+var Tag = (props) => {
+  const _a = props, {
+    types = "primary",
+    size = "short",
+    light = false,
+    children,
+    prefixCls = "tag",
+    block = false,
+    style
+  } = _a, attr = __objRest(_a, [
+    "types",
+    "size",
+    "light",
+    "children",
+    "prefixCls",
+    "block",
+    "style"
+  ]);
+  const {
+    padding,
+    sizingTagShort,
+    sizingTagTall,
+    sizingTagTallLg
+  } = import_designTokens.otherDesignTokens;
+  const getTagSize = (s) => {
+    switch (s) {
+      case "tall":
+        return sizingTagTall;
+      case "tallLg":
+        return sizingTagTallLg;
+      default:
+        return sizingTagShort;
+    }
+  };
+  const getType = (t) => {
+    switch (t) {
+      case "secondary":
+        return import_designTokens.designTokensSecondary;
+      case "blue":
+        return light ? import_designTokens.designTokensBlueLight : import_designTokens.designTokensBlue;
+      case "green":
+        return light ? import_designTokens.designTokensGreenLight : import_designTokens.designTokensGreen;
+      case "red":
+        return light ? import_designTokens.designTokensRedLight : import_designTokens.designTokensRed;
+      case "orange":
+        return light ? import_designTokens.designTokensOrangeLight : import_designTokens.designTokensOrange;
+      case "grey":
+        return light ? import_designTokens.designTokensGreyLight : import_designTokens.designTokensGrey;
+      case "lakeblue":
+        return light ? import_designTokens.designTokensLakeblueLight : import_designTokens.designTokensLakeblue;
+      case "yellow":
+        return light ? import_designTokens.designTokensYellowLight : import_designTokens.designTokensYellow;
+      default:
+        return import_designTokens.designTokensPrimary;
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.ConfigProvider,
+    {
+      prefixCls: import_constants.BASE_CLASS_PREFIX,
+      theme: {
+        components: {
+          Tag: __spreadValues(__spreadValues({}, import_designTokens.designTokens), getType(types))
+        }
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Tag,
+      __spreadProps(__spreadValues({}, attr), {
+        className: `${import_constants.BASE_CLASS_PREFIX}-${prefixCls}`,
+        style: __spreadValues({ padding, height: getTagSize(size), width: block ? "100%" : "auto" }, style)
+      }),
+      /* @__PURE__ */ import_react.default.createElement(import_Text.default, { size: "ContentC12SemiBold" }, children)
+    )
+  );
+};
+var Tag_default = Tag;

package/lib/components/Tag/style/index.less

@@ -0,0 +1,9 @@
+
+@import './variables.less';
+
+@components: tag;
+.@{prefix}-@{components}{
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}

package/lib/components/Tag/style/variables.less

@@ -0,0 +1,4 @@
+
+@import '../../../style/variables.less';
+
+@btn-primary-bg-default: var(--base-color-primary);

package/lib/components/Text/designTokens.d.ts

@@ -0,0 +1,51 @@
+declare const otherDesignTokens: {
+    fontSizeDesktopTitleT23: string;
+    fontSizeDesktopContentC15: string;
+    fontSizeDesktopContentC21: string;
+    fontSizeDesktopTitleT21: string;
+    fontSizeDesktopTitleT15: string;
+    fontSizeDesktopContentC13: string;
+    fontSizeDesktopContentC11: string;
+    fontSizeDesktopContentC12: string;
+    fontSizeDesktopContentC14: string;
+    fontSizeDesktopTitleT1: string;
+    fontSizeDesktopTitleT32: string;
+    fontSizeDesktopTitleT41: string;
+    fontSizeDesktopContentC05: string;
+    fontSizeDesktopContentC04: string;
+    fontSizeDesktopTitleT7: string;
+    fontSizeDesktopTitleT8: string;
+    fontSizeDesktopTitleT2: string;
+    fontSizeDesktopTitleT5: string;
+    fontSizeDesktopTitleT3: string;
+    fontSizeDesktopTitleT4: string;
+    fontSizeDesktopTitleT10: string;
+    fontSizeMobileContentC04: string;
+    fontSizeMobileContentC05: string;
+    fontSizeMobileContentC11: string;
+    fontSizeMobileContentC12: string;
+    fontSizeMobileContentC13: string;
+    fontSizeMobileContentC14: string;
+    fontSizeMobileContentC15: string;
+    fontSizeMobileContentC21: string;
+    fontSizeMobileTitleT12: string;
+    fontSizeMobileTitleT13: string;
+    fontSizeMobileTitleT14: string;
+    fontSizeMobileTitleT15: string;
+    fontSizeMobileTitleT21: string;
+    fontSizeMobileTitleT23: string;
+    fontSizeMobileTitleT24: string;
+    fontSizeMobileTitleT25: string;
+    fontSizeMobileTitleT32: string;
+    fontSizeMobileTitleT34: string;
+    fontSizeMobileTitleT41: string;
+    fontSizeMobileTitleT45: string;
+    fontSizeMobileNavigation: string;
+    fontFamilyPromaryRegular: any;
+    fontFamilyPromarySemiBold: any;
+    fontFamilyPromaryBold: any;
+    fontFamilySecondaryRegular: any;
+    fontFamilySecondarySemiBold: any;
+    fontFamilySecondaryBold: any;
+};
+export { otherDesignTokens };