@xfers/design-system 4.4.4 → 4.4.5-dev.686a881117

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.
@@ -0,0 +1,83 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.REMOVABLE_TAG_COLORS = exports.FILLED_TAG_COLORS = exports.OUTLINED_TAG_COLORS = exports.ICON_SIZE_MAP = exports.ICON_MAP = void 0;
4
+ var ColorStyles_1 = require("src/shared/ColorStyles");
5
+ var theme_1 = require("src/theme/theme");
6
+ exports.ICON_MAP = {
7
+ positive: 'check',
8
+ critical: 'cancel',
9
+ warning: 'timer',
10
+ info: 'info',
11
+ neutral: 'timer',
12
+ };
13
+ exports.ICON_SIZE_MAP = {
14
+ sm: 'xs',
15
+ lg: 's',
16
+ };
17
+ exports.OUTLINED_TAG_COLORS = {
18
+ positive: {
19
+ base: theme_1.straitsXTheme.color.surface.subduePositive,
20
+ text: theme_1.straitsXTheme.color.status.positive,
21
+ icon: theme_1.straitsXTheme.color.status.positive,
22
+ border: theme_1.straitsXTheme.color.status.positive,
23
+ },
24
+ critical: {
25
+ base: theme_1.straitsXTheme.color.surface.subdueCritical,
26
+ text: theme_1.straitsXTheme.color.status.critical,
27
+ icon: theme_1.straitsXTheme.color.status.critical,
28
+ border: theme_1.straitsXTheme.color.status.critical,
29
+ },
30
+ warning: {
31
+ base: theme_1.straitsXTheme.color.surface.subdueWarning,
32
+ text: theme_1.straitsXTheme.color.status.warning,
33
+ icon: theme_1.straitsXTheme.color.status.warning,
34
+ border: theme_1.straitsXTheme.color.status.warning,
35
+ },
36
+ info: {
37
+ base: theme_1.straitsXTheme.color.surface.SubdueInfo,
38
+ text: theme_1.straitsXTheme.color.status.info,
39
+ icon: theme_1.straitsXTheme.color.status.info,
40
+ border: theme_1.straitsXTheme.color.status.info,
41
+ },
42
+ neutral: {
43
+ base: ColorStyles_1.NEUTRAL_COLORS.G100,
44
+ text: theme_1.straitsXTheme.color.base.onNeutralSecondary,
45
+ icon: theme_1.straitsXTheme.color.base.onNeutralSecondary,
46
+ border: theme_1.straitsXTheme.color.base.line,
47
+ },
48
+ };
49
+ exports.FILLED_TAG_COLORS = {
50
+ positive: {
51
+ base: theme_1.straitsXTheme.color.status.positive,
52
+ text: theme_1.straitsXTheme.color.base.onContainer,
53
+ icon: '',
54
+ border: theme_1.straitsXTheme.color.status.positive,
55
+ },
56
+ neutral: {
57
+ base: theme_1.straitsXTheme.color.surface.disabledSurface,
58
+ text: theme_1.straitsXTheme.color.surface.disabledOnSurface,
59
+ icon: '',
60
+ border: theme_1.straitsXTheme.color.base.line,
61
+ },
62
+ };
63
+ exports.REMOVABLE_TAG_COLORS = {
64
+ positive: {
65
+ base: theme_1.straitsXTheme.color.surface.subduePositive,
66
+ text: theme_1.straitsXTheme.color.status.positive,
67
+ icon: theme_1.straitsXTheme.color.status.positive,
68
+ border: theme_1.straitsXTheme.color.status.positive,
69
+ },
70
+ disabled: {
71
+ base: theme_1.straitsXTheme.color.surface.disabledSurface,
72
+ text: theme_1.straitsXTheme.color.surface.disabledOnSurface,
73
+ icon: theme_1.straitsXTheme.color.surface.disabledOnSurface,
74
+ border: theme_1.straitsXTheme.color.base.line,
75
+ },
76
+ neutral: {
77
+ base: theme_1.straitsXTheme.color.surface.neutral,
78
+ text: theme_1.straitsXTheme.color.base.onNeutralSecondary,
79
+ icon: theme_1.straitsXTheme.color.base.onNeutralSecondary,
80
+ border: theme_1.straitsXTheme.color.base.line,
81
+ },
82
+ };
83
+ //# sourceMappingURL=const.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"const.js","sourceRoot":"","sources":["../../../src/components/Tag/const.ts"],"names":[],"mappings":";;;AAAA,sDAAuD;AACvD,yCAA+C;AAQlC,QAAA,QAAQ,GAAG;IACtB,QAAQ,EAAE,OAAO;IACjB,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,OAAO;IAChB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,OAAO;CACR,CAAA;AAEG,QAAA,aAAa,GAAG;IAC3B,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,GAAG;CACC,CAAA;AAEG,QAAA,mBAAmB,GAA4C;IAC1E,QAAQ,EAAE;QACR,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;QAChD,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;QACzC,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;QACzC,MAAM,EAAE,qBAAa,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;KAC5C;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;QAChD,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;QACzC,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;QACzC,MAAM,EAAE,qBAAa,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;KAC5C;IACD,OAAO,EAAE;QACP,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa;QAC/C,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;QACxC,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;QACxC,MAAM,EAAE,qBAAa,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;KAC3C;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU;QAC5C,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;QACrC,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;QACrC,MAAM,EAAE,qBAAa,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;KACxC;IACD,OAAO,EAAE;QACP,IAAI,EAAE,4BAAc,CAAC,IAAI;QACzB,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,IAAI,CAAC,kBAAkB;QACjD,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,IAAI,CAAC,kBAAkB;QACjD,MAAM,EAAE,qBAAa,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;KACtC;CACF,CAAA;AAEY,QAAA,iBAAiB,GAA0C;IACtE,QAAQ,EAAE;QACR,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;QACzC,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW;QAC1C,IAAI,EAAE,EAAE;QACR,MAAM,EAAE,qBAAa,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;KAC5C;IACD,OAAO,EAAE;QACP,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe;QACjD,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB;QACnD,IAAI,EAAE,EAAE;QACR,MAAM,EAAE,qBAAa,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;KACtC;CACF,CAAA;AAEY,QAAA,oBAAoB,GAA6C;IAC5E,QAAQ,EAAE;QACR,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;QAChD,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;QACzC,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;QACzC,MAAM,EAAE,qBAAa,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;KAC5C;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe;QACjD,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB;QACnD,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB;QACnD,MAAM,EAAE,qBAAa,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;KACtC;IACD,OAAO,EAAE;QACP,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO;QACzC,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,IAAI,CAAC,kBAAkB;QACjD,IAAI,EAAE,qBAAa,CAAC,KAAK,CAAC,IAAI,CAAC,kBAAkB;QACjD,MAAM,EAAE,qBAAa,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;KACtC;CACF,CAAA"}
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ exports.default = default_1;
8
+ var react_1 = require("react");
9
+ var styled_1 = require("@emotion/styled");
10
+ var MaterialSymbols_1 = require("src/icons/MaterialSymbols");
11
+ var Typography_1 = require("src/constants/Typography/Typography");
12
+ var src_1 = require("src");
13
+ var const_1 = require("src/components/Tag/const");
14
+ function getColorByProperty(type, variant, property) {
15
+ switch (variant) {
16
+ case 'outlined':
17
+ return const_1.OUTLINED_TAG_COLORS[type][property];
18
+ case 'filled':
19
+ return const_1.FILLED_TAG_COLORS[type][property];
20
+ case 'removable':
21
+ return const_1.REMOVABLE_TAG_COLORS[type][property];
22
+ default:
23
+ return const_1.OUTLINED_TAG_COLORS[type][property];
24
+ }
25
+ }
26
+ function default_1(_a) {
27
+ var type = _a.type, children = _a.children, _b = _a.showIcon, showIcon = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c, _d = _a.variant, variant = _d === void 0 ? 'outlined' : _d, onClick = _a.onClick;
28
+ return (react_1.default.createElement(Base, { type: type, size: size, variant: variant, onClick: variant !== 'removable' ? onClick : undefined },
29
+ showIcon && type !== 'disabled' && (react_1.default.createElement(MaterialSymbols_1.MaterialSymbols, { icon: const_1.ICON_MAP[type], size: const_1.ICON_SIZE_MAP[size], color: getColorByProperty(type, variant, 'icon') })),
30
+ react_1.default.createElement(Typography_1.Typography.Body, { size: size, color: getColorByProperty(type, variant, 'text') }, children),
31
+ variant === 'removable' && (react_1.default.createElement(CloseButton, { onClick: onClick, type: "tertiary", icon: react_1.default.createElement(MaterialSymbols_1.MaterialSymbols, { icon: "close", size: const_1.ICON_SIZE_MAP[size], color: getColorByProperty(type, variant, 'icon') }) }))));
32
+ }
33
+ var getAdditionalStyles = function (_a) {
34
+ var type = _a.type, _b = _a.variant, variant = _b === void 0 ? 'outlined' : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c, onClick = _a.onClick;
35
+ return "\n border-radius: ".concat(variant === 'removable' ? '999px' : '4px', ";\n min-height: ").concat(size === 'sm' ? '24px' : '32px', ";\n background-color: ").concat(type && variant ? getColorByProperty(type, variant, 'base') : 'transparent', ";\n border: 1px solid ").concat(type && variant ? getColorByProperty(type, variant, 'border') : 'transparent', ";\n padding-inline: ").concat(variant === 'removable' ? '12px' : '8px', ";\n cursor: ").concat(onClick ? 'pointer' : 'default', ";\n\n");
36
+ };
37
+ var CloseButton = (0, styled_1.default)(src_1.Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n && {\n padding: 0 !important;\n width: auto !important;\n height: auto !important;\n }\n\n &&:hover {\n background: transparent !important;\n }\n\n &&:focus {\n background: transparent !important;\n }\n\n &&:active {\n background: transparent !important;\n }\n"], ["\n && {\n padding: 0 !important;\n width: auto !important;\n height: auto !important;\n }\n\n &&:hover {\n background: transparent !important;\n }\n\n &&:focus {\n background: transparent !important;\n }\n\n &&:active {\n background: transparent !important;\n }\n"])));
38
+ var Base = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 4px;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: fit-content;\n text-transform: capitalize;\n\n ", ";\n"], ["\n display: flex;\n flex-direction: row;\n gap: 4px;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: fit-content;\n text-transform: capitalize;\n\n ", ";\n"])), function (props) { return getAdditionalStyles(props); });
39
+ var templateObject_1, templateObject_2;
40
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,3 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Tag/types.ts"],"names":[],"mappings":""}
@@ -82,10 +82,10 @@ var SURFACE;
82
82
  SURFACE["DISABLED_ON_SURFACE"] = "#9D9E9F";
83
83
  // TODO(joseadhitya): Talk to design team about this , rename semantic color or remove it in cleanup effor
84
84
  SURFACE["DARK"] = "#051513";
85
- SURFACE["SUBDUE_INFO"] = "#EBF5FF";
86
- SURFACE["SUBDUE_POSITIVE"] = "#E5F8F3";
87
- SURFACE["SUBDUE_WARNING"] = "#FFFBE9";
88
- SURFACE["SUBDUE_CRITICAL"] = "#FFF0F0";
85
+ SURFACE["SUBDUE_INFO"] = "#EEF6FF";
86
+ SURFACE["SUBDUE_POSITIVE"] = "#F0F9F4";
87
+ SURFACE["SUBDUE_WARNING"] = "#FFFAEA";
88
+ SURFACE["SUBDUE_CRITICAL"] = "#FFF1F1";
89
89
  })(SURFACE || (exports.SURFACE = SURFACE = {}));
90
90
  var BASE;
91
91
  (function (BASE) {
@@ -113,10 +113,10 @@ var INTERACTIVE;
113
113
  })(INTERACTIVE || (exports.INTERACTIVE = INTERACTIVE = {}));
114
114
  var STATUS;
115
115
  (function (STATUS) {
116
- STATUS["INFO"] = "#2F8DEE";
116
+ STATUS["INFO"] = "#0C45E1";
117
117
  STATUS["POSITIVE"] = "#257C58";
118
- STATUS["WARNING"] = "#E5C412";
119
- STATUS["CRITICAL"] = "#B71515";
118
+ STATUS["WARNING"] = "#FC9A07";
119
+ STATUS["CRITICAL"] = "#DF1312";
120
120
  })(STATUS || (exports.STATUS = STATUS = {}));
121
121
  var COMPONENT;
122
122
  (function (COMPONENT) {
package/dist/index.js CHANGED
@@ -16,7 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
16
16
  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
17
17
  };
18
18
  Object.defineProperty(exports, "__esModule", { value: true });
19
- exports.MaterialSymbols = exports.getCoachmarkJoyrideConfig = exports.Coachmark = exports.Timeline = exports.SummaryCard = exports.Spin = exports.ErrorPage = exports.Tooltip = exports.CopyBox = exports.Section = exports.Banner = exports.Note = exports.ContentBreakdown = exports.Hidden = exports.Link = exports.Divider = exports.EmptyData = exports.SmallP = exports.P1Bold = exports.P1 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Checkbox = exports.DatePicker = exports.Timer = exports.Tabs = exports.Table = exports.Steps = exports.Select = exports.RangePicker = exports.Radio = exports.Pagination = exports.DeprecatedModal = exports.Modal = exports.Label = exports.Input = exports.Form = exports.DynamicSelect = exports.Dropdown = exports.Carousel = exports.Chart = exports.Card = exports.BadgeIcon = exports.Accordion = exports.ActionCard = exports.ActionButton = exports.Button = exports.Alert = void 0;
19
+ exports.MaterialSymbols = exports.getCoachmarkJoyrideConfig = exports.Coachmark = exports.Timeline = exports.SummaryCard = exports.Spin = exports.ErrorPage = exports.Tooltip = exports.CopyBox = exports.Section = exports.Banner = exports.Note = exports.ContentBreakdown = exports.Hidden = exports.Link = exports.Divider = exports.EmptyData = exports.SmallP = exports.P1Bold = exports.P1 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Checkbox = exports.DatePicker = exports.Timer = exports.Tabs = exports.Table = exports.Steps = exports.Select = exports.RangePicker = exports.Radio = exports.Pagination = exports.DeprecatedModal = exports.Modal = exports.Tag = exports.Input = exports.Form = exports.DynamicSelect = exports.Dropdown = exports.Carousel = exports.Chart = exports.Card = exports.BadgeIcon = exports.Accordion = exports.ActionCard = exports.ActionButton = exports.Button = exports.Alert = void 0;
20
20
  exports.LINE_HEIGHT = exports.FONT_SIZE = exports.FONT_WEIGHT = exports.FALLBACK_FONT = exports.MAIN_FONT = exports.BACKGROUND_COLORS = exports.TEXT_COLORS = exports.ICON_COLORS = exports.MAIN_COLORS = exports.NEUTRAL_COLORS = exports.YELLOW_COLORS = exports.RED_COLORS = exports.GREEN_COLORS = exports.BLUE_COLORS = exports.TABLET_BREAKPOINT = exports.LAPTOP_BREAKPOINT = exports.DESKTOP_BREAKPOINT = exports.EXTRA_LARGE_DESKTOP_BREAKPOINT = exports.useModal = exports.ModalProvider = exports.straitsXTheme = exports.xfersTheme = exports.useTheme = exports.ThemeProvider = exports.Typography = void 0;
21
21
  // Components
22
22
  var Alert_1 = require("./components/Alert");
@@ -45,8 +45,8 @@ var Form_1 = require("./components/Form");
45
45
  Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return Form_1.default; } });
46
46
  var Input_1 = require("./components/Input");
47
47
  Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.default; } });
48
- var Label_1 = require("./components/Label");
49
- Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return Label_1.default; } });
48
+ var Tag_1 = require("./components/Tag");
49
+ Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.default; } });
50
50
  var Modal_1 = require("./components/Modal");
51
51
  Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.default; } });
52
52
  var DeprecatedModal_1 = require("./components/DeprecatedModal");
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,15 @@
1
+ import { FilledTagType, OutlinedTagType, RemovableTagType, TagColorSchema } from './types';
2
+ export declare const ICON_MAP: {
3
+ readonly positive: "check";
4
+ readonly critical: "cancel";
5
+ readonly warning: "timer";
6
+ readonly info: "info";
7
+ readonly neutral: "timer";
8
+ };
9
+ export declare const ICON_SIZE_MAP: {
10
+ readonly sm: "xs";
11
+ readonly lg: "s";
12
+ };
13
+ export declare const OUTLINED_TAG_COLORS: Record<OutlinedTagType, TagColorSchema>;
14
+ export declare const FILLED_TAG_COLORS: Record<FilledTagType, TagColorSchema>;
15
+ export declare const REMOVABLE_TAG_COLORS: Record<RemovableTagType, TagColorSchema>;
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ import { TagType, TagVariant } from './types';
3
+ type Props = {
4
+ type: TagType;
5
+ children: React.ReactNode;
6
+ showIcon?: boolean;
7
+ size?: 'sm' | 'lg';
8
+ variant?: TagVariant;
9
+ onClick?: () => void;
10
+ };
11
+ export default function ({ type, children, showIcon, size, variant, onClick, }: Props): React.JSX.Element;
12
+ export {};
@@ -0,0 +1,13 @@
1
+ export type OutlinedTagType = 'positive' | 'critical' | 'warning' | 'info' | 'neutral';
2
+ export type FilledTagType = 'positive' | 'neutral';
3
+ export type RemovableTagType = 'positive' | 'disabled' | 'neutral';
4
+ export type TagSchemaType = 'base' | 'text' | 'icon' | 'border';
5
+ export type TagColorSchema = {
6
+ base: string;
7
+ text: string;
8
+ icon: string;
9
+ border: string;
10
+ };
11
+ export type TagType = 'positive' | 'critical' | 'warning' | 'info' | 'neutral' | 'disabled';
12
+ export type TagVariant = 'outlined' | 'filled' | 'removable';
13
+ export type TagSize = 'sm' | 'lg';
@@ -67,10 +67,10 @@ export declare enum SURFACE {
67
67
  DISABLED_SURFACE = "#F2F4F5",
68
68
  DISABLED_ON_SURFACE = "#9D9E9F",
69
69
  DARK = "#051513",
70
- SUBDUE_INFO = "#EBF5FF",
71
- SUBDUE_POSITIVE = "#E5F8F3",
72
- SUBDUE_WARNING = "#FFFBE9",
73
- SUBDUE_CRITICAL = "#FFF0F0"
70
+ SUBDUE_INFO = "#EEF6FF",
71
+ SUBDUE_POSITIVE = "#F0F9F4",
72
+ SUBDUE_WARNING = "#FFFAEA",
73
+ SUBDUE_CRITICAL = "#FFF1F1"
74
74
  }
75
75
  export declare enum BASE {
76
76
  PRIMARY = "#00D37E",
@@ -95,10 +95,10 @@ export declare enum INTERACTIVE {
95
95
  PRESSED_CRITICAL = "#A92920"
96
96
  }
97
97
  export declare enum STATUS {
98
- INFO = "#2F8DEE",
98
+ INFO = "#0C45E1",
99
99
  POSITIVE = "#257C58",
100
- WARNING = "#E5C412",
101
- CRITICAL = "#B71515"
100
+ WARNING = "#FC9A07",
101
+ CRITICAL = "#DF1312"
102
102
  }
103
103
  export declare enum COMPONENT {
104
104
  BUTTON_DISABLED = "#BDBDBD",
@@ -11,7 +11,7 @@ export { default as Dropdown } from './components/Dropdown';
11
11
  export { default as DynamicSelect } from './components/DynamicSelect';
12
12
  export { default as Form } from './components/Form';
13
13
  export { default as Input } from './components/Input';
14
- export { default as Label } from './components/Label';
14
+ export { default as Tag } from './components/Tag';
15
15
  export { default as Modal } from './components/Modal';
16
16
  export { default as DeprecatedModal } from './components/DeprecatedModal';
17
17
  export { default as Pagination } from './components/Pagination';