mbt-ui-kit 0.1.20 → 0.1.22

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.
@@ -57,6 +57,26 @@ const preloadFonts = [plexSansRegularUrl, plexSansMediumUrl, interVariableUrl];
57
57
  <Button type="button" onClick={handleOpenSettings}>
58
58
  <SettingsIcon /> Settings
59
59
  </Button>
60
+
61
+ <Button>
62
+ Some text <SearchIcon /> Search
63
+ </Button>
64
+ ```
65
+
66
+ ## Badges
67
+
68
+ ```tsx
69
+ <Badge>1200</Badge>
70
+
71
+ <Badge icon={<CrystalIcon />}>1200</Badge>
72
+
73
+ <Badge icon={<CrystalIcon />} purchasable>
74
+ 1200
75
+ </Badge>
76
+
77
+ <Badge icon={<CrystalIcon />} boost>
78
+ 1200
79
+ </Badge>
60
80
  ```
61
81
 
62
82
  ## Inputs
@@ -81,6 +101,8 @@ const preloadFonts = [plexSansRegularUrl, plexSansMediumUrl, interVariableUrl];
81
101
  <Text strong>Highlighted text.</Text>
82
102
  <Text small muted>Secondary caption.</Text>
83
103
  <Text label>Role</Text>
104
+ <Text>Some text <SearchIcon /> more text</Text>
105
+ <Text contentGap>{'Some text'}<SearchIcon />{'more text'}</Text>
84
106
 
85
107
  <Metric>1,234</Metric>
86
108
  <Metric large>42,500</Metric>
@@ -156,7 +178,7 @@ const panelStyle = {
156
178
  import { colors } from 'mbt-ui-kit/tokens';
157
179
 
158
180
  const heroStyle = {
159
- background: colors.primaryGradient,
181
+ background: `linear-gradient(45deg, ${colors.primaryStop0} 0%, ${colors.primaryStop1} 40%, ${colors.primaryStop2} 100%)`,
160
182
  };
161
183
 
162
184
  const customDiamondStyle = {
@@ -24,6 +24,7 @@ This folder holds factual package reference for `mbt-ui-kit`.
24
24
  ## Primary Components
25
25
 
26
26
  - `Button`
27
+ - `Badge`
27
28
  - `Input`
28
29
  - `Loader`
29
30
  - `Heading`
@@ -48,8 +49,7 @@ This folder holds factual package reference for `mbt-ui-kit`.
48
49
 
49
50
  ## Color Token Notes
50
51
 
51
- - `colors` includes solid colors, gradient stop tokens, and convenience gradient strings.
52
- - direct gradient tokens: `colors.primaryGradient` and `colors.diamondGradient`
52
+ - `colors` includes solid colors and gradient stop tokens.
53
53
  - primary gradient stop tokens: `colors.primaryStop0`, `colors.primaryStop1`, `colors.primaryStop2`
54
54
  - diamond gradient stop tokens: `colors.diamondStop0`, `colors.diamondStop1`, `colors.diamondStop2`, `colors.diamondStop3`, `colors.diamondStop4`
55
55
 
@@ -26,6 +26,7 @@ These files are the canonical package-owned rules for `mbt-ui-kit`.
26
26
  ## Component Guidance
27
27
 
28
28
  - Use `Button` for shared button behavior instead of recreating button primitives.
29
+ - Use `Badge` for compact pill-style value labels with optional left media and package-owned purchasable or boost affordances.
29
30
  - Use `Input` for labeled text inputs and search-style input affordances.
30
31
  - Use `Heading`, `Text`, and `Metric` for typography when the consumer wants the package typography primitives.
31
32
  - Use `MenuButton` for sidebar or navigation-style button treatments, not as a generic replacement for every button.
@@ -34,6 +35,5 @@ These files are the canonical package-owned rules for `mbt-ui-kit`.
34
35
  ## Token Guidance
35
36
 
36
37
  - Preferred token families are `colors`, `fonts`, `fontSizes`, `fontWeights`, `fontFeatures`, `spacing`, `radius`, `zIndex`, and `transitions`.
37
- - Use `colors.primaryGradient` and `colors.diamondGradient` when the consumer wants the package's default gradient strings directly.
38
- - Use the exported gradient stop tokens when the consumer needs to compose the same gradients with a different angle or stop layout.
38
+ - Use the exported gradient stop tokens when the consumer needs to compose package gradients.
39
39
  - When a consumer needs a custom value outside the token system, keep the exception local to that consumer instead of expanding package docs with app-only design rules.
package/README.md CHANGED
@@ -193,20 +193,18 @@ Available token groups:
193
193
  - `zIndex`
194
194
  - `transitions`
195
195
 
196
- The `colors` group also includes gradient tokens and gradient stop tokens:
196
+ The `colors` group also includes gradient stop tokens:
197
197
 
198
- - `primaryGradient`
199
- - `diamondGradient`
200
198
  - `primaryStop0`, `primaryStop1`, `primaryStop2`
201
199
  - `diamondStop0`, `diamondStop1`, `diamondStop2`, `diamondStop3`, `diamondStop4`
202
200
 
203
- Direct gradient usage:
201
+ Gradient composition from stop colors:
204
202
 
205
203
  ```tsx
206
204
  import { colors } from 'mbt-ui-kit/tokens';
207
205
 
208
206
  const heroStyle = {
209
- background: colors.primaryGradient,
207
+ background: `linear-gradient(45deg, ${colors.primaryStop0} 0%, ${colors.primaryStop1} 40%, ${colors.primaryStop2} 100%)`,
210
208
  };
211
209
  ```
212
210
 
@@ -236,7 +234,12 @@ import 'mbt-ui-kit/tokens.css';
236
234
  }
237
235
 
238
236
  .hero {
239
- background: var(--mbt-color-primary-gradient);
237
+ background: linear-gradient(
238
+ 45deg,
239
+ var(--mbt-color-primary-stop-0) 0%,
240
+ var(--mbt-color-primary-stop-1) 40%,
241
+ var(--mbt-color-primary-stop-2) 100%
242
+ );
240
243
  }
241
244
  ```
242
245
 
@@ -253,7 +256,14 @@ import 'mbt-ui-kit/tokens.css';
253
256
  }
254
257
 
255
258
  .hero {
256
- background: $diamond-gradient;
259
+ background: linear-gradient(
260
+ 45deg,
261
+ $diamond-stop-0 0%,
262
+ $diamond-stop-1 25%,
263
+ $diamond-stop-2 50%,
264
+ $diamond-stop-3 75%,
265
+ $diamond-stop-4 100%
266
+ );
257
267
  }
258
268
  ```
259
269
 
@@ -0,0 +1,9 @@
1
+ import type { HTMLAttributes, ReactNode } from 'react';
2
+ export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
3
+ children?: ReactNode;
4
+ icon?: ReactNode;
5
+ purchasable?: boolean;
6
+ boost?: boolean;
7
+ }
8
+ export declare function Badge({ children, icon, purchasable, boost, className, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
9
+ //# sourceMappingURL=badge.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,IAAI,EACJ,WAAmB,EACnB,KAAa,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,2CAoCZ"}
@@ -0,0 +1,2 @@
1
+ export declare function BoostIcon(): import("react/jsx-runtime").JSX.Element;
2
+ //# sourceMappingURL=boost-icon.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"boost-icon.d.ts","sourceRoot":"","sources":["../../../src/components/badge/boost-icon.tsx"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,4CAoBxB"}
@@ -0,0 +1,3 @@
1
+ export type { BadgeProps } from './badge';
2
+ export { Badge } from './badge';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
@@ -0,0 +1,2 @@
1
+ export declare function PurchasableIcon(): import("react/jsx-runtime").JSX.Element;
2
+ //# sourceMappingURL=purchasable-icon.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"purchasable-icon.d.ts","sourceRoot":"","sources":["../../../src/components/badge/purchasable-icon.tsx"],"names":[],"mappings":"AAAA,wBAAgB,eAAe,4CAwB9B"}
@@ -4,7 +4,6 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
4
4
  fullWidth?: boolean;
5
5
  loading?: boolean;
6
6
  variant?: 'primary' | 'secondary';
7
- rounded?: boolean;
8
7
  }
9
- export declare function Button({ children, fullWidth, rounded, disabled, loading, variant, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
8
+ export declare function Button({ children, fullWidth, disabled, loading, variant, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
10
9
  //# sourceMappingURL=button.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,OAAc,EACd,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,WAAW,2CA0Bb"}
1
+ {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CACnC;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,WAAW,2CAyBb"}
@@ -1,4 +1,4 @@
1
- import type { HTMLAttributes, ReactNode } from 'react';
1
+ import { type HTMLAttributes, type ReactNode } from 'react';
2
2
  export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
3
3
  children?: ReactNode;
4
4
  strong?: boolean;
@@ -6,7 +6,8 @@ export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
6
6
  label?: boolean;
7
7
  muted?: boolean;
8
8
  disableFontFeatures?: boolean;
9
+ contentGap?: boolean;
9
10
  as?: 'p' | 'span' | 'div';
10
11
  }
11
- export declare function Text({ children, strong, small, label, muted, disableFontFeatures, as, className, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
12
+ export declare function Text({ children, strong, small, label, muted, disableFontFeatures, contentGap, as, className, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
12
13
  //# sourceMappingURL=text.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/components/typography/text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,EAAE,CAAC,EAAE,GAAG,GAAG,MAAM,GAAG,KAAK,CAAC;CAC3B;AAED,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,MAAc,EACd,KAAa,EACb,KAAa,EACb,KAAa,EACb,mBAA2B,EAC3B,EAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,2CAmBX"}
1
+ {"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/components/typography/text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtE,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,EAAE,CAAC,EAAE,GAAG,GAAG,MAAM,GAAG,KAAK,CAAC;CAC3B;AAED,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,MAAc,EACd,KAAa,EACb,KAAa,EACb,KAAa,EACb,mBAA2B,EAC3B,UAAkB,EAClB,EAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,2CA6BX"}
package/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./tokens-DbQnrzz6.cjs"),t=require("react/jsx-runtime"),p=require("react");function f({size:n="md",className:e,...s}){const o=["mbt-loader",`mbt-loader--${n}`,e].filter(Boolean).join(" ");return t.jsxs("span",{className:o,...s,children:[t.jsx("span",{className:"mbt-loader__dot"}),t.jsx("span",{className:"mbt-loader__dot"}),t.jsx("span",{className:"mbt-loader__dot"})]})}function w({children:n,fullWidth:e,rounded:s=!0,disabled:o,loading:a,variant:r="primary",className:i,...c}){const u=o||a,m=["mbt-button",r&&`mbt-button--${r}`,e&&"mbt-button--full-width",!s&&"mbt-button--diagonal",o&&"mbt-button--disabled",a&&"mbt-button--loading",i].filter(Boolean).join(" ");return t.jsxs("button",{type:"button",className:m,disabled:u,...c,children:[t.jsx("span",{className:"mbt-button__content",children:n}),a&&t.jsx(f,{size:"md",className:"mbt-button__loader"})]})}function j({className:n,title:e="Search"}){return t.jsxs("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:n,role:"img","aria-label":e,children:[t.jsx("title",{children:e}),t.jsx("circle",{cx:"11",cy:"11",r:"8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),t.jsx("path",{d:"m21 21-4.34-4.34",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}const x=p.forwardRef(({label:n,muted:e=!1,showSearchIcon:s=!1,icon:o,fullWidth:a=!1,className:r,...i},c)=>{const u=p.useId(),m=i.id??u,d=["mbt-input",a&&"mbt-input--full-width",r].filter(Boolean).join(" "),_=["mbt-input__label",e&&"mbt-input__label--muted"].filter(Boolean).join(" "),N=["mbt-input__wrapper",e&&"mbt-input__wrapper--muted"].filter(Boolean).join(" "),g=["mbt-input__field",e&&"mbt-input__field--muted"].filter(Boolean).join(" "),k=["mbt-input__icon",e&&"mbt-input__icon--muted"].filter(Boolean).join(" "),b=o||s&&t.jsx(j,{});return t.jsx("div",{className:d,children:t.jsxs("div",{className:"mbt-input__container",children:[n&&t.jsx("label",{htmlFor:m,className:_,children:n}),t.jsxs("div",{className:N,children:[t.jsx("input",{ref:c,id:m,type:"text",className:g,...i}),b&&t.jsx("div",{className:k,children:b})]})]})})});x.displayName="Input";function h({className:n,title:e="Graduation cap"}){return t.jsxs("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:n,role:"img","aria-label":e,children:[t.jsx("title",{children:e}),t.jsx("path",{d:"M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),t.jsx("path",{d:"M22 10v6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),t.jsx("path",{d:"M6 12.5V16a6 3 0 0 0 12 0v-3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}function B({children:n,icon:e,selected:s=!1,small:o=!1,disabled:a,className:r,...i}){const c=["mbt-menu-button",s&&"mbt-menu-button--selected",o&&"mbt-menu-button--small",r].filter(Boolean).join(" "),u=e??t.jsx(h,{});return t.jsxs("button",{type:"button",className:c,disabled:a,"aria-pressed":s,...i,children:[t.jsx("div",{className:"mbt-menu-button__icon",children:u}),t.jsx("span",{className:"mbt-menu-button__text",children:n})]})}function I({level:n,children:e,className:s,...o}){const a=`h${n}`,r=[`mbt-h${n}`,s].filter(Boolean).join(" ");return t.jsx(a,{className:r,...o,children:e})}function L({children:n,large:e=!1,muted:s=!1,as:o="div",className:a,...r}){const i=o,c=["mbt-metric",e&&"mbt-metric--large",s&&"mbt-metric--muted",a].filter(Boolean).join(" ");return t.jsx(i,{className:c,...r,children:n})}function v({children:n,strong:e=!1,small:s=!1,label:o=!1,muted:a=!1,disableFontFeatures:r=!1,as:i="p",className:c,...u}){const m=i,d=["mbt-text",e&&"mbt-text--strong",s&&"mbt-text--small",o&&"mbt-text--label",a&&"mbt-text--muted",r&&"mbt-text--no-features",c].filter(Boolean).join(" ");return t.jsx(m,{className:d,...u,children:n})}exports.colors=l.colors;exports.fontFeatures=l.fontFeatures;exports.fontSizes=l.fontSizes;exports.fontWeights=l.fontWeights;exports.fonts=l.fonts;exports.radius=l.radius;exports.spacing=l.spacing;exports.tokens=l.tokens;exports.transitions=l.transitions;exports.zIndex=l.zIndex;exports.Button=w;exports.GraduationCapIcon=h;exports.Heading=I;exports.Input=x;exports.Loader=f;exports.MenuButton=B;exports.Metric=L;exports.SearchIcon=j;exports.Text=v;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./tokens-C8rDJFS5.cjs"),t=require("react/jsx-runtime"),x=require("react");function f({size:s="md",className:e,...n}){const o=["mbt-loader",`mbt-loader--${s}`,e].filter(Boolean).join(" ");return t.jsxs("span",{className:o,...n,children:[t.jsx("span",{className:"mbt-loader__dot"}),t.jsx("span",{className:"mbt-loader__dot"}),t.jsx("span",{className:"mbt-loader__dot"})]})}function L({children:s,fullWidth:e,disabled:n,loading:o,variant:a="primary",className:i,...r}){const l=n||o,d=["mbt-button",a&&`mbt-button--${a}`,e&&"mbt-button--full-width",n&&"mbt-button--disabled",o&&"mbt-button--loading",i].filter(Boolean).join(" ");return t.jsxs("button",{type:"button",className:d,disabled:l,...r,children:[t.jsx("span",{className:"mbt-button__content",children:s}),o&&t.jsx(f,{size:"md",className:"mbt-button__loader"})]})}function B({level:s,children:e,className:n,...o}){const a=`h${s}`,i=[`mbt-h${s}`,n].filter(Boolean).join(" ");return t.jsx(a,{className:i,...o,children:e})}function v({children:s,large:e=!1,muted:n=!1,as:o="div",className:a,...i}){const r=o,l=["mbt-metric",e&&"mbt-metric--large",n&&"mbt-metric--muted",a].filter(Boolean).join(" ");return t.jsx(r,{className:l,...i,children:s})}function g({children:s,strong:e=!1,small:n=!1,label:o=!1,muted:a=!1,disableFontFeatures:i=!1,contentGap:r=!1,as:l="p",className:d,...m}){const b=l,h=["mbt-text",e&&"mbt-text--strong",n&&"mbt-text--small",o&&"mbt-text--label",a&&"mbt-text--muted",i&&"mbt-text--no-features",d].filter(Boolean).join(" "),p=r?t.jsx("span",{className:"mbt-text__content",children:x.Children.toArray(s).map(u=>typeof u=="string"?u.trim():u).filter(u=>u!=="")}):s;return t.jsx(b,{className:h,...m,children:p})}function C(){return t.jsxs("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[t.jsx("path",{d:"M12 4L19 10.5L16.5 12.5L12 8.5L7.5 12.5L5 10.5L12 4Z",fill:"currentColor"}),t.jsx("path",{d:"M12 9L19 15.5L16.5 17.5L12 13.5L7.5 17.5L5 15.5L12 9Z",fill:"currentColor"})]})}function I(){return t.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[t.jsx("path",{d:"M8 3V13",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"}),t.jsx("path",{d:"M3 8H13",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]})}function y({children:s,icon:e,purchasable:n=!1,boost:o=!1,className:a,...i}){const r=!!e,l=r&&n,d=["mbt-badge",r&&"mbt-badge--with-icon",n&&"mbt-badge--purchasable",o&&"mbt-badge--boost",a].filter(Boolean).join(" ");return t.jsxs("div",{className:d,...i,children:[r&&t.jsxs("span",{className:"mbt-badge__media",children:[t.jsx("span",{className:"mbt-badge__icon",children:e}),l&&t.jsx("span",{className:"mbt-badge__purchasable","aria-hidden":"true",children:t.jsx(I,{})})]}),t.jsx(g,{as:"span",disableFontFeatures:!0,strong:!0,className:"mbt-badge__content",children:s}),o&&t.jsx("span",{className:"mbt-badge__boost","aria-hidden":"true",children:t.jsx(C,{})})]})}function _({className:s,title:e="Search"}){return t.jsxs("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:s,role:"img","aria-label":e,children:[t.jsx("title",{children:e}),t.jsx("circle",{cx:"11",cy:"11",r:"8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),t.jsx("path",{d:"m21 21-4.34-4.34",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}const N=x.forwardRef(({label:s,muted:e=!1,showSearchIcon:n=!1,icon:o,fullWidth:a=!1,className:i,...r},l)=>{const d=x.useId(),m=r.id??d,b=["mbt-input",a&&"mbt-input--full-width",i].filter(Boolean).join(" "),h=["mbt-input__label",e&&"mbt-input__label--muted"].filter(Boolean).join(" "),p=["mbt-input__wrapper",e&&"mbt-input__wrapper--muted"].filter(Boolean).join(" "),u=["mbt-input__field",e&&"mbt-input__field--muted"].filter(Boolean).join(" "),k=["mbt-input__icon",e&&"mbt-input__icon--muted"].filter(Boolean).join(" "),j=o||n&&t.jsx(_,{});return t.jsx("div",{className:b,children:t.jsxs("div",{className:"mbt-input__container",children:[s&&t.jsx("label",{htmlFor:m,className:h,children:s}),t.jsxs("div",{className:p,children:[t.jsx("input",{ref:l,id:m,type:"text",className:u,...r}),j&&t.jsx("div",{className:k,children:j})]})]})})});N.displayName="Input";function w({className:s,title:e="Graduation cap"}){return t.jsxs("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:s,role:"img","aria-label":e,children:[t.jsx("title",{children:e}),t.jsx("path",{d:"M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),t.jsx("path",{d:"M22 10v6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),t.jsx("path",{d:"M6 12.5V16a6 3 0 0 0 12 0v-3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}function M({children:s,icon:e,selected:n=!1,small:o=!1,disabled:a,className:i,...r}){const l=["mbt-menu-button",n&&"mbt-menu-button--selected",o&&"mbt-menu-button--small",i].filter(Boolean).join(" "),d=e??t.jsx(w,{});return t.jsxs("button",{type:"button",className:l,disabled:a,"aria-pressed":n,...r,children:[t.jsx("div",{className:"mbt-menu-button__icon",children:d}),t.jsx("span",{className:"mbt-menu-button__text",children:s})]})}exports.colors=c.colors;exports.fontFeatures=c.fontFeatures;exports.fontSizes=c.fontSizes;exports.fontWeights=c.fontWeights;exports.fonts=c.fonts;exports.radius=c.radius;exports.spacing=c.spacing;exports.tokens=c.tokens;exports.transitions=c.transitions;exports.zIndex=c.zIndex;exports.Badge=y;exports.Button=L;exports.GraduationCapIcon=w;exports.Heading=B;exports.Input=N;exports.Loader=f;exports.MenuButton=M;exports.Metric=v;exports.SearchIcon=_;exports.Text=g;
package/dist/index.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import './styles/index.scss';
2
2
  export type { ButtonProps } from './components/button';
3
3
  export { Button } from './components/button';
4
+ export type { BadgeProps } from './components/badge';
5
+ export { Badge } from './components/badge';
4
6
  export type { InputProps } from './components/input';
5
7
  export { Input, SearchIcon } from './components/input';
6
8
  export type { LoaderProps } from './components/loader';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAE7B,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACvD,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACzE,YAAY,EACV,YAAY,EACZ,WAAW,EACX,SAAS,GACV,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EACV,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,UAAU,EACV,MAAM,EACN,OAAO,EACP,UAAU,EACV,MAAM,GACP,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,MAAM,EACN,YAAY,EACZ,SAAS,EACT,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAO,EACP,MAAM,EACN,WAAW,EACX,MAAM,GACP,MAAM,iBAAiB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAE7B,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACvD,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACzE,YAAY,EACV,YAAY,EACZ,WAAW,EACX,SAAS,GACV,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EACV,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,UAAU,EACV,MAAM,EACN,OAAO,EACP,UAAU,EACV,MAAM,GACP,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,MAAM,EACN,YAAY,EACZ,SAAS,EACT,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAO,EACP,MAAM,EACN,WAAW,EACX,MAAM,GACP,MAAM,iBAAiB,CAAC"}
package/dist/index.mjs CHANGED
@@ -1,48 +1,180 @@
1
- import { c as T, f as $, a as S, b as F, d as G, r as D, s as H, t as R, e as V, z as q } from "./tokens-C9wefV-c.js";
1
+ import { c as G, f as H, a as P, b as V, d as Z, r as A, s as D, t as R, e as q, z as E } from "./tokens-C0g4TAJO.js";
2
2
  import { jsxs as c, jsx as t } from "react/jsx-runtime";
3
- import { forwardRef as N, useId as k } from "react";
4
- function g({ size: n = "md", className: e, ...o }) {
5
- const s = ["mbt-loader", `mbt-loader--${n}`, e].filter(Boolean).join(" ");
6
- return /* @__PURE__ */ c("span", { className: s, ...o, children: [
3
+ import { Children as g, forwardRef as N, useId as w } from "react";
4
+ function k({ size: n = "md", className: e, ...s }) {
5
+ const o = ["mbt-loader", `mbt-loader--${n}`, e].filter(Boolean).join(" ");
6
+ return /* @__PURE__ */ c("span", { className: o, ...s, children: [
7
7
  /* @__PURE__ */ t("span", { className: "mbt-loader__dot" }),
8
8
  /* @__PURE__ */ t("span", { className: "mbt-loader__dot" }),
9
9
  /* @__PURE__ */ t("span", { className: "mbt-loader__dot" })
10
10
  ] });
11
11
  }
12
- function v({
12
+ function M({
13
13
  children: n,
14
14
  fullWidth: e,
15
- rounded: o = !0,
16
15
  disabled: s,
17
- loading: a,
18
- variant: r = "primary",
16
+ loading: o,
17
+ variant: a = "primary",
19
18
  className: i,
20
- ...l
19
+ ...r
21
20
  }) {
22
- const m = s || a, u = [
21
+ const l = s || o, d = [
23
22
  "mbt-button",
24
- r && `mbt-button--${r}`,
23
+ a && `mbt-button--${a}`,
25
24
  e && "mbt-button--full-width",
26
- !o && "mbt-button--diagonal",
27
25
  s && "mbt-button--disabled",
28
- a && "mbt-button--loading",
26
+ o && "mbt-button--loading",
29
27
  i
30
28
  ].filter(Boolean).join(" ");
31
29
  return /* @__PURE__ */ c(
32
30
  "button",
33
31
  {
34
32
  type: "button",
35
- className: u,
36
- disabled: m,
37
- ...l,
33
+ className: d,
34
+ disabled: l,
35
+ ...r,
38
36
  children: [
39
37
  /* @__PURE__ */ t("span", { className: "mbt-button__content", children: n }),
40
- a && /* @__PURE__ */ t(g, { size: "md", className: "mbt-button__loader" })
38
+ o && /* @__PURE__ */ t(k, { size: "md", className: "mbt-button__loader" })
39
+ ]
40
+ }
41
+ );
42
+ }
43
+ function W({
44
+ level: n,
45
+ children: e,
46
+ className: s,
47
+ ...o
48
+ }) {
49
+ const a = `h${n}`, i = [`mbt-h${n}`, s].filter(Boolean).join(" ");
50
+ return /* @__PURE__ */ t(a, { className: i, ...o, children: e });
51
+ }
52
+ function z({
53
+ children: n,
54
+ large: e = !1,
55
+ muted: s = !1,
56
+ as: o = "div",
57
+ className: a,
58
+ ...i
59
+ }) {
60
+ const r = o, l = [
61
+ "mbt-metric",
62
+ e && "mbt-metric--large",
63
+ s && "mbt-metric--muted",
64
+ a
65
+ ].filter(Boolean).join(" ");
66
+ return /* @__PURE__ */ t(r, { className: l, ...i, children: n });
67
+ }
68
+ function L({
69
+ children: n,
70
+ strong: e = !1,
71
+ small: s = !1,
72
+ label: o = !1,
73
+ muted: a = !1,
74
+ disableFontFeatures: i = !1,
75
+ contentGap: r = !1,
76
+ as: l = "p",
77
+ className: d,
78
+ ...u
79
+ }) {
80
+ const b = l, p = [
81
+ "mbt-text",
82
+ e && "mbt-text--strong",
83
+ s && "mbt-text--small",
84
+ o && "mbt-text--label",
85
+ a && "mbt-text--muted",
86
+ i && "mbt-text--no-features",
87
+ d
88
+ ].filter(Boolean).join(" "), h = r ? /* @__PURE__ */ t("span", { className: "mbt-text__content", children: g.toArray(n).map((m) => typeof m == "string" ? m.trim() : m).filter((m) => m !== "") }) : n;
89
+ return /* @__PURE__ */ t(b, { className: p, ...u, children: h });
90
+ }
91
+ function x() {
92
+ return /* @__PURE__ */ c(
93
+ "svg",
94
+ {
95
+ width: "24",
96
+ height: "24",
97
+ viewBox: "0 0 24 24",
98
+ fill: "none",
99
+ xmlns: "http://www.w3.org/2000/svg",
100
+ "aria-hidden": "true",
101
+ children: [
102
+ /* @__PURE__ */ t(
103
+ "path",
104
+ {
105
+ d: "M12 4L19 10.5L16.5 12.5L12 8.5L7.5 12.5L5 10.5L12 4Z",
106
+ fill: "currentColor"
107
+ }
108
+ ),
109
+ /* @__PURE__ */ t(
110
+ "path",
111
+ {
112
+ d: "M12 9L19 15.5L16.5 17.5L12 13.5L7.5 17.5L5 15.5L12 9Z",
113
+ fill: "currentColor"
114
+ }
115
+ )
116
+ ]
117
+ }
118
+ );
119
+ }
120
+ function B() {
121
+ return /* @__PURE__ */ c(
122
+ "svg",
123
+ {
124
+ width: "16",
125
+ height: "16",
126
+ viewBox: "0 0 16 16",
127
+ fill: "none",
128
+ xmlns: "http://www.w3.org/2000/svg",
129
+ "aria-hidden": "true",
130
+ children: [
131
+ /* @__PURE__ */ t(
132
+ "path",
133
+ {
134
+ d: "M8 3V13",
135
+ stroke: "currentColor",
136
+ strokeWidth: "2",
137
+ strokeLinecap: "round"
138
+ }
139
+ ),
140
+ /* @__PURE__ */ t(
141
+ "path",
142
+ {
143
+ d: "M3 8H13",
144
+ stroke: "currentColor",
145
+ strokeWidth: "2",
146
+ strokeLinecap: "round"
147
+ }
148
+ )
41
149
  ]
42
150
  }
43
151
  );
44
152
  }
45
- function x({ className: n, title: e = "Search" }) {
153
+ function F({
154
+ children: n,
155
+ icon: e,
156
+ purchasable: s = !1,
157
+ boost: o = !1,
158
+ className: a,
159
+ ...i
160
+ }) {
161
+ const r = !!e, l = r && s, d = [
162
+ "mbt-badge",
163
+ r && "mbt-badge--with-icon",
164
+ s && "mbt-badge--purchasable",
165
+ o && "mbt-badge--boost",
166
+ a
167
+ ].filter(Boolean).join(" ");
168
+ return /* @__PURE__ */ c("div", { className: d, ...i, children: [
169
+ r && /* @__PURE__ */ c("span", { className: "mbt-badge__media", children: [
170
+ /* @__PURE__ */ t("span", { className: "mbt-badge__icon", children: e }),
171
+ l && /* @__PURE__ */ t("span", { className: "mbt-badge__purchasable", "aria-hidden": "true", children: /* @__PURE__ */ t(B, {}) })
172
+ ] }),
173
+ /* @__PURE__ */ t(L, { as: "span", disableFontFeatures: !0, strong: !0, className: "mbt-badge__content", children: n }),
174
+ o && /* @__PURE__ */ t("span", { className: "mbt-badge__boost", "aria-hidden": "true", children: /* @__PURE__ */ t(x, {}) })
175
+ ] });
176
+ }
177
+ function j({ className: n, title: e = "Search" }) {
46
178
  return /* @__PURE__ */ c(
47
179
  "svg",
48
180
  {
@@ -82,50 +214,50 @@ function x({ className: n, title: e = "Search" }) {
82
214
  }
83
215
  );
84
216
  }
85
- const j = N(
217
+ const v = N(
86
218
  ({
87
219
  label: n,
88
220
  muted: e = !1,
89
- showSearchIcon: o = !1,
90
- icon: s,
221
+ showSearchIcon: s = !1,
222
+ icon: o,
91
223
  fullWidth: a = !1,
92
- className: r,
93
- ...i
224
+ className: i,
225
+ ...r
94
226
  }, l) => {
95
- const m = k(), u = i.id ?? m, d = [
227
+ const d = w(), u = r.id ?? d, b = [
96
228
  "mbt-input",
97
229
  a && "mbt-input--full-width",
98
- r
230
+ i
99
231
  ].filter(Boolean).join(" "), p = [
100
232
  "mbt-input__label",
101
233
  e && "mbt-input__label--muted"
102
- ].filter(Boolean).join(" "), f = [
234
+ ].filter(Boolean).join(" "), h = [
103
235
  "mbt-input__wrapper",
104
236
  e && "mbt-input__wrapper--muted"
105
- ].filter(Boolean).join(" "), h = [
237
+ ].filter(Boolean).join(" "), m = [
106
238
  "mbt-input__field",
107
239
  e && "mbt-input__field--muted"
108
- ].filter(Boolean).join(" "), _ = ["mbt-input__icon", e && "mbt-input__icon--muted"].filter(Boolean).join(" "), b = s || o && /* @__PURE__ */ t(x, {});
109
- return /* @__PURE__ */ t("div", { className: d, children: /* @__PURE__ */ c("div", { className: "mbt-input__container", children: [
240
+ ].filter(Boolean).join(" "), _ = ["mbt-input__icon", e && "mbt-input__icon--muted"].filter(Boolean).join(" "), f = o || s && /* @__PURE__ */ t(j, {});
241
+ return /* @__PURE__ */ t("div", { className: b, children: /* @__PURE__ */ c("div", { className: "mbt-input__container", children: [
110
242
  n && /* @__PURE__ */ t("label", { htmlFor: u, className: p, children: n }),
111
- /* @__PURE__ */ c("div", { className: f, children: [
243
+ /* @__PURE__ */ c("div", { className: h, children: [
112
244
  /* @__PURE__ */ t(
113
245
  "input",
114
246
  {
115
247
  ref: l,
116
248
  id: u,
117
249
  type: "text",
118
- className: h,
119
- ...i
250
+ className: m,
251
+ ...r
120
252
  }
121
253
  ),
122
- b && /* @__PURE__ */ t("div", { className: _, children: b })
254
+ f && /* @__PURE__ */ t("div", { className: _, children: f })
123
255
  ] })
124
256
  ] }) });
125
257
  }
126
258
  );
127
- j.displayName = "Input";
128
- function w({
259
+ v.displayName = "Input";
260
+ function C({
129
261
  className: n,
130
262
  title: e = "Graduation cap"
131
263
  }) {
@@ -176,20 +308,20 @@ function w({
176
308
  }
177
309
  );
178
310
  }
179
- function C({
311
+ function T({
180
312
  children: n,
181
313
  icon: e,
182
- selected: o = !1,
183
- small: s = !1,
314
+ selected: s = !1,
315
+ small: o = !1,
184
316
  disabled: a,
185
- className: r,
186
- ...i
317
+ className: i,
318
+ ...r
187
319
  }) {
188
320
  const l = [
189
321
  "mbt-menu-button",
190
- o && "mbt-menu-button--selected",
191
- s && "mbt-menu-button--small",
192
- r
322
+ s && "mbt-menu-button--selected",
323
+ o && "mbt-menu-button--small",
324
+ i
193
325
  ].filter(Boolean).join(" ");
194
326
  return /* @__PURE__ */ c(
195
327
  "button",
@@ -197,80 +329,34 @@ function C({
197
329
  type: "button",
198
330
  className: l,
199
331
  disabled: a,
200
- "aria-pressed": o,
201
- ...i,
332
+ "aria-pressed": s,
333
+ ...r,
202
334
  children: [
203
- /* @__PURE__ */ t("div", { className: "mbt-menu-button__icon", children: e ?? /* @__PURE__ */ t(w, {}) }),
335
+ /* @__PURE__ */ t("div", { className: "mbt-menu-button__icon", children: e ?? /* @__PURE__ */ t(C, {}) }),
204
336
  /* @__PURE__ */ t("span", { className: "mbt-menu-button__text", children: n })
205
337
  ]
206
338
  }
207
339
  );
208
340
  }
209
- function I({
210
- level: n,
211
- children: e,
212
- className: o,
213
- ...s
214
- }) {
215
- const a = `h${n}`, r = [`mbt-h${n}`, o].filter(Boolean).join(" ");
216
- return /* @__PURE__ */ t(a, { className: r, ...s, children: e });
217
- }
218
- function y({
219
- children: n,
220
- large: e = !1,
221
- muted: o = !1,
222
- as: s = "div",
223
- className: a,
224
- ...r
225
- }) {
226
- const i = s, l = [
227
- "mbt-metric",
228
- e && "mbt-metric--large",
229
- o && "mbt-metric--muted",
230
- a
231
- ].filter(Boolean).join(" ");
232
- return /* @__PURE__ */ t(i, { className: l, ...r, children: n });
233
- }
234
- function W({
235
- children: n,
236
- strong: e = !1,
237
- small: o = !1,
238
- label: s = !1,
239
- muted: a = !1,
240
- disableFontFeatures: r = !1,
241
- as: i = "p",
242
- className: l,
243
- ...m
244
- }) {
245
- const u = i, d = [
246
- "mbt-text",
247
- e && "mbt-text--strong",
248
- o && "mbt-text--small",
249
- s && "mbt-text--label",
250
- a && "mbt-text--muted",
251
- r && "mbt-text--no-features",
252
- l
253
- ].filter(Boolean).join(" ");
254
- return /* @__PURE__ */ t(u, { className: d, ...m, children: n });
255
- }
256
341
  export {
257
- v as Button,
258
- w as GraduationCapIcon,
259
- I as Heading,
260
- j as Input,
261
- g as Loader,
262
- C as MenuButton,
263
- y as Metric,
264
- x as SearchIcon,
265
- W as Text,
266
- T as colors,
267
- $ as fontFeatures,
268
- S as fontSizes,
269
- F as fontWeights,
270
- G as fonts,
271
- D as radius,
272
- H as spacing,
342
+ F as Badge,
343
+ M as Button,
344
+ C as GraduationCapIcon,
345
+ W as Heading,
346
+ v as Input,
347
+ k as Loader,
348
+ T as MenuButton,
349
+ z as Metric,
350
+ j as SearchIcon,
351
+ L as Text,
352
+ G as colors,
353
+ H as fontFeatures,
354
+ P as fontSizes,
355
+ V as fontWeights,
356
+ Z as fonts,
357
+ A as radius,
358
+ D as spacing,
273
359
  R as tokens,
274
- V as transitions,
275
- q as zIndex
360
+ q as transitions,
361
+ E as zIndex
276
362
  };
@@ -1 +1 @@
1
- @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-v23-latin-regular.woff2) format("woff2")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-v23-latin-500.woff2) format("woff2")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-v23-latin-600.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/Inter-VariableFont_opsz,wght.ttf) format("truetype")}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/Inter-Italic-VariableFont_opsz,wght.ttf) format("truetype")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-v20-latin-regular.woff2) format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-v20-latin-500.woff2) format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-v20-latin-600.woff2) format("woff2")}.mbt-button{appearance:none;border:none;background:none;cursor:pointer;outline:none;padding:8px 16px;display:grid;place-items:center;border-radius:8px}.mbt-button--diagonal{border-radius:0 8px}.mbt-button{font-family:IBM Plex Sans,sans-serif;font-size:16px;font-weight:500;line-height:normal;text-transform:uppercase;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,color .15s ease}.mbt-button--primary{background-color:#f2f4fa;color:#0b0e14}.mbt-button--secondary{background-color:#475569;color:#f2f4fa}.mbt-button__content,.mbt-button__loader{grid-area:1/1}.mbt-button:hover{color:#6663fd}.mbt-button:active{opacity:.9}.mbt-button:focus-visible{box-shadow:0 0 0 2px #0b0e14,0 0 0 4px #6663fd}.mbt-button--disabled{background-color:#475569;color:#8d92a9;cursor:not-allowed;pointer-events:none}.mbt-button--loading{cursor:not-allowed;pointer-events:none}.mbt-button--loading .mbt-button__content{visibility:hidden}.mbt-button--full-width{width:100%}.mbt-input__container{display:flex;flex-direction:column;gap:10px;width:100%;max-width:296px}.mbt-input__label{font-family:Inter,sans-serif;font-size:16px;font-weight:400;line-height:1;color:#f2f4fa;margin:0;font-feature-settings:"ss01" 1,"salt" 1,"ss02" 1}.mbt-input__label--muted{color:#8d92a9}.mbt-input__wrapper{position:relative;display:flex;align-items:center;width:100%;border:1px solid #f2f4fa;border-radius:8px;padding:8px 16px;background-color:transparent;transition:border-color .15s ease}.mbt-input__wrapper--muted{border-color:#8d92a9}.mbt-input__wrapper:focus-within{border-color:#6663fd}.mbt-input__field{flex:1;appearance:none;border:none;background:none;outline:none;font-family:Inter,sans-serif;font-size:16px;font-weight:400;line-height:1;color:#f2f4fa;font-feature-settings:"ss01" 1,"salt" 1,"ss02" 1}.mbt-input__field::placeholder{color:#f2f4fa}.mbt-input__field--muted{color:#8d92a9}.mbt-input__field--muted::placeholder{color:#8d92a9}.mbt-input__icon{flex-shrink:0;width:24px;height:24px;margin-left:8px;color:#f2f4fa}.mbt-input__icon--muted{color:#8d92a9}.mbt-input--full-width .mbt-input__container{max-width:none}.mbt-h1{font-family:IBM Plex Sans,sans-serif;font-size:72px;font-weight:600;line-height:80px;color:#f2f4fa;margin:0}.mbt-h2{font-family:IBM Plex Sans,sans-serif;font-size:40px;font-weight:600;line-height:48px;color:#f2f4fa;margin:0}.mbt-h3{font-family:IBM Plex Sans,sans-serif;font-size:28px;font-weight:500;line-height:36px;color:#f2f4fa;margin:0}.mbt-h4{font-family:IBM Plex Sans,sans-serif;font-size:20px;font-weight:500;line-height:28px;color:#f2f4fa;margin:0}.mbt-h5{font-family:IBM Plex Sans,sans-serif;font-size:16px;font-weight:500;line-height:24px;color:#f2f4fa;margin:0}.mbt-text{font-family:Inter,sans-serif;font-size:16px;font-weight:400;line-height:normal;color:#f2f4fa;margin:0;font-feature-settings:"salt" on,"ss01" on,"ss02" on}.mbt-text--strong{font-weight:500}.mbt-text--small{font-size:12px;line-height:18px}.mbt-text--label{font-size:12px;text-transform:uppercase}.mbt-text--muted{color:#8d92a9}.mbt-text--no-features{font-feature-settings:normal}.mbt-metric{font-family:IBM Plex Mono,monospace;font-size:16px;font-weight:400;line-height:1;color:#f2f4fa;margin:0}.mbt-metric--large{font-size:24px;font-weight:500;line-height:32px}.mbt-metric--muted{color:#8d92a9}.mbt-menu-button{appearance:none;border:none;background:none;cursor:pointer;outline:none;display:flex;align-items:center;width:248px;height:44px;padding:4px 12px;gap:8px;font-family:IBM Plex Sans,sans-serif;font-size:16px;font-weight:500;line-height:24px;color:#f2f4fa;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:8px;transition:background-color .15s ease,color .15s ease}.mbt-menu-button__icon{flex-shrink:0;width:24px;height:24px;color:#f2f4fa;transition:color .15s ease}.mbt-menu-button__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mbt-menu-button:hover:not(:disabled):not(.mbt-menu-button--selected){background-color:#2a3148;color:#0078fd}.mbt-menu-button:hover:not(:disabled):not(.mbt-menu-button--selected) .mbt-menu-button__icon{color:#0078fd}.mbt-menu-button--selected{background-color:#1d2335;color:#6663fd}.mbt-menu-button--selected .mbt-menu-button__icon{color:#6663fd}.mbt-menu-button--small{padding:4px 8px;height:32px;gap:8px;font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:18px}.mbt-menu-button--small .mbt-menu-button__icon{width:20px;height:20px}.mbt-menu-button:disabled{color:#8d92a9;cursor:not-allowed;pointer-events:none}.mbt-menu-button:disabled .mbt-menu-button__icon{color:#8d92a9}.mbt-loader{display:inline-flex;align-items:center;gap:4px}.mbt-loader__dot{display:inline-block;background-color:currentColor;border-radius:999px;animation:mbt-loader-bounce 1.4s infinite ease-in-out both}.mbt-loader__dot:nth-child(1){animation-delay:-.32s}.mbt-loader__dot:nth-child(2){animation-delay:-.16s}.mbt-loader--sm .mbt-loader__dot{width:6px;height:6px}.mbt-loader--md .mbt-loader__dot{width:9px;height:9px}.mbt-loader--lg .mbt-loader__dot{width:12px;height:12px}@keyframes mbt-loader-bounce{0%,80%,to{opacity:0;transform:scale(0)}40%{opacity:1;transform:scale(1)}}*,*:before,*:after{box-sizing:border-box}:root{--mbt-color-bg-0: #0b0e14;--mbt-color-bg-1: #111520;--mbt-color-surface: #171c2a;--mbt-color-surface-raised: #1d2335;--mbt-color-border: #2a3148;--mbt-color-gray: #475569;--mbt-color-text-primary: #f2f4fa;--mbt-color-text-muted: #8d92a9;--mbt-color-text-inverse: #0b0e14;--mbt-color-primary: #6663fd;--mbt-color-secondary: #0078fd;--mbt-color-success: #00b279;--mbt-color-error: #f2766a;--mbt-color-warning: #e6c352;--mbt-color-diamond: #e6f3ff;--mbt-color-primary-stop-0: #65d5f4;--mbt-color-primary-stop-1: #0096fa;--mbt-color-primary-stop-2: #1c3dc2;--mbt-color-primary-gradient: linear-gradient( 45deg, #65d5f4 0%, #0096fa 40%, #1c3dc2 100% );--mbt-color-diamond-stop-0: #beacd3;--mbt-color-diamond-stop-1: #bee3f7;--mbt-color-diamond-stop-2: #efece7;--mbt-color-diamond-stop-3: #f8ddde;--mbt-color-diamond-stop-4: #cfe6f1;--mbt-color-diamond-gradient: linear-gradient( 45deg, #beacd3 0%, #bee3f7 25%, #efece7 50%, #f8ddde 75%, #cfe6f1 100% );--mbt-color-gold: #d1a64a;--mbt-color-silver: #969fa6;--mbt-color-bronze: #956c68;--mbt-font-primary: "IBM Plex Sans", sans-serif;--mbt-font-secondary: "Inter", sans-serif;--mbt-font-mono: "IBM Plex Mono", monospace;--mbt-font-size-1: 12px;--mbt-font-size-2: 14px;--mbt-font-size-3: 16px;--mbt-font-size-4: 20px;--mbt-font-size-5: 24px;--mbt-font-size-6: 28px;--mbt-font-size-7: 40px;--mbt-font-size-8: 48px;--mbt-font-size-9: 72px;--mbt-font-weight-regular: 400;--mbt-font-weight-medium: 500;--mbt-font-weight-semibold: 600;--mbt-font-feature-inter-stylistic: "salt" on, "ss01" on, "ss02" on;--mbt-space-0: 0;--mbt-space-1: 4px;--mbt-space-2: 8px;--mbt-space-3: 12px;--mbt-space-4: 16px;--mbt-space-5: 24px;--mbt-space-6: 32px;--mbt-space-7: 48px;--mbt-space-8: 64px;--mbt-space-9: 96px;--mbt-space-10: 128px;--mbt-radius-0: 0;--mbt-radius-xs: 4px;--mbt-radius-sm: 8px;--mbt-radius-md: 12px;--mbt-radius-lg: 16px;--mbt-radius-xl: 24px;--mbt-radius-full: 999px;--mbt-z-index-0: 0;--mbt-z-index-1: 100;--mbt-z-index-2: 200;--mbt-z-index-3: 300;--mbt-z-index-4: 400;--mbt-z-index-5: 500;--mbt-transition-fast: .15s ease;--mbt-transition-normal: .25s ease;--mbt-transition-slow: .4s ease}
1
+ @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-v23-latin-regular.woff2) format("woff2")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-v23-latin-500.woff2) format("woff2")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-v23-latin-600.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/Inter-VariableFont_opsz,wght.ttf) format("truetype")}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/Inter-Italic-VariableFont_opsz,wght.ttf) format("truetype")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-v20-latin-regular.woff2) format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-v20-latin-500.woff2) format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-v20-latin-600.woff2) format("woff2")}.mbt-button{appearance:none;border:none;background:none;cursor:pointer;outline:none;padding:8px 16px;display:grid;place-items:center;max-height:40px;border-radius:8px;font-family:IBM Plex Sans,sans-serif;font-size:16px;font-weight:500;line-height:normal;text-transform:uppercase;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,color .15s ease}.mbt-button--primary{background-color:#f2f4fa;color:#0b0e14}.mbt-button--secondary{background-color:#475569;color:#f2f4fa}.mbt-button__content,.mbt-button__loader{grid-area:1/1}.mbt-button__content{display:inline-flex;align-items:center;justify-content:center;gap:8px}.mbt-button__content svg{display:block;flex-shrink:0}.mbt-button:hover{color:#6663fd}.mbt-button:active{opacity:.9}.mbt-button:focus-visible{box-shadow:0 0 0 2px #0b0e14,0 0 0 4px #6663fd}.mbt-button--disabled{background-color:#475569;color:#8d92a9;cursor:not-allowed;pointer-events:none}.mbt-button--loading{cursor:not-allowed;pointer-events:none}.mbt-button--loading .mbt-button__content{visibility:hidden}.mbt-button--full-width{width:100%}.mbt-badge{position:relative;display:inline-flex;align-items:center;gap:12px;height:24px;max-height:24px;padding:4px 12px;border-radius:999px;background:#1d2335;color:#f2f4fa;overflow:visible;-webkit-user-select:none;user-select:none}.mbt-badge--with-icon{padding-left:12px}.mbt-badge--purchasable{cursor:pointer}.mbt-badge--boost{padding-right:20px}.mbt-badge__media{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin-left:-20px}.mbt-badge__icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px}.mbt-badge__icon svg{display:block;max-width:100%;max-height:100%}.mbt-badge__purchasable{position:absolute;right:-8px;bottom:-7px;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:#f2f4fa}.mbt-badge__content{display:inline-flex;align-items:center;min-width:0;line-height:1;color:inherit;white-space:nowrap}.mbt-badge__boost{position:absolute;top:-8px;right:-8px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:#0950c2}.mbt-input__container{display:flex;flex-direction:column;gap:10px;width:100%;max-width:296px}.mbt-input__label{font-family:Inter,sans-serif;font-size:16px;font-weight:400;line-height:1;color:#f2f4fa;margin:0;font-feature-settings:"ss01" 1,"salt" 1,"ss02" 1}.mbt-input__label--muted{color:#8d92a9}.mbt-input__wrapper{position:relative;display:flex;align-items:center;width:100%;border:1px solid #f2f4fa;border-radius:8px;padding:8px 16px;background-color:transparent;transition:border-color .15s ease}.mbt-input__wrapper--muted{border-color:#8d92a9}.mbt-input__wrapper:focus-within{border-color:#6663fd}.mbt-input__field{flex:1;appearance:none;border:none;background:none;outline:none;font-family:Inter,sans-serif;font-size:16px;font-weight:400;line-height:1;color:#f2f4fa;font-feature-settings:"ss01" 1,"salt" 1,"ss02" 1}.mbt-input__field::placeholder{color:#f2f4fa}.mbt-input__field--muted{color:#8d92a9}.mbt-input__field--muted::placeholder{color:#8d92a9}.mbt-input__icon{flex-shrink:0;width:24px;height:24px;margin-left:8px;color:#f2f4fa}.mbt-input__icon--muted{color:#8d92a9}.mbt-input--full-width .mbt-input__container{max-width:none}.mbt-h1{font-family:IBM Plex Sans,sans-serif;font-size:72px;font-weight:600;line-height:80px;color:#f2f4fa;margin:0}.mbt-h2{font-family:IBM Plex Sans,sans-serif;font-size:40px;font-weight:600;line-height:48px;color:#f2f4fa;margin:0}.mbt-h3{font-family:IBM Plex Sans,sans-serif;font-size:28px;font-weight:500;line-height:36px;color:#f2f4fa;margin:0}.mbt-h4{font-family:IBM Plex Sans,sans-serif;font-size:20px;font-weight:500;line-height:28px;color:#f2f4fa;margin:0}.mbt-h5{font-family:IBM Plex Sans,sans-serif;font-size:16px;font-weight:500;line-height:24px;color:#f2f4fa;margin:0}.mbt-text{font-family:Inter,sans-serif;font-size:16px;font-weight:400;line-height:normal;color:#f2f4fa;margin:0;font-feature-settings:"salt" on,"ss01" on,"ss02" on}.mbt-text svg{display:inline-block;vertical-align:middle}.mbt-text__content{display:inline-flex;align-items:center;gap:8px}.mbt-text__content svg{display:block;flex-shrink:0}.mbt-text--strong{font-weight:500}.mbt-text--small{font-size:12px;line-height:18px}.mbt-text--label{font-size:12px;text-transform:uppercase}.mbt-text--muted{color:#8d92a9}.mbt-text--no-features{font-feature-settings:normal}.mbt-metric{font-family:IBM Plex Mono,monospace;font-size:16px;font-weight:400;line-height:1;color:#f2f4fa;margin:0}.mbt-metric--large{font-size:24px;font-weight:500;line-height:32px}.mbt-metric--muted{color:#8d92a9}.mbt-menu-button{appearance:none;border:none;background:none;cursor:pointer;outline:none;display:flex;align-items:center;width:248px;height:44px;padding:4px 12px;gap:8px;font-family:IBM Plex Sans,sans-serif;font-size:16px;font-weight:500;line-height:24px;color:#f2f4fa;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:8px;transition:background-color .15s ease,color .15s ease}.mbt-menu-button__icon{flex-shrink:0;width:24px;height:24px;color:#f2f4fa;transition:color .15s ease}.mbt-menu-button__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mbt-menu-button:hover:not(:disabled):not(.mbt-menu-button--selected){background-color:#2a3148;color:#0950c2}.mbt-menu-button:hover:not(:disabled):not(.mbt-menu-button--selected) .mbt-menu-button__icon{color:#0950c2}.mbt-menu-button--selected{background-color:#1d2335;color:#6663fd}.mbt-menu-button--selected .mbt-menu-button__icon{color:#6663fd}.mbt-menu-button--small{padding:4px 8px;height:32px;gap:8px;font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:18px}.mbt-menu-button--small .mbt-menu-button__icon{width:20px;height:20px}.mbt-menu-button:disabled{color:#8d92a9;cursor:not-allowed;pointer-events:none}.mbt-menu-button:disabled .mbt-menu-button__icon{color:#8d92a9}.mbt-loader{display:inline-flex;align-items:center;gap:4px}.mbt-loader__dot{display:inline-block;background-color:currentColor;border-radius:999px;animation:mbt-loader-bounce 1.4s infinite ease-in-out both}.mbt-loader__dot:nth-child(1){animation-delay:-.32s}.mbt-loader__dot:nth-child(2){animation-delay:-.16s}.mbt-loader--sm .mbt-loader__dot{width:6px;height:6px}.mbt-loader--md .mbt-loader__dot{width:9px;height:9px}.mbt-loader--lg .mbt-loader__dot{width:12px;height:12px}@keyframes mbt-loader-bounce{0%,80%,to{opacity:0;transform:scale(0)}40%{opacity:1;transform:scale(1)}}*,*:before,*:after{box-sizing:border-box}:root{--mbt-color-bg-0: #0b0e14;--mbt-color-bg-1: #111520;--mbt-color-surface: #171c2a;--mbt-color-surface-raised: #1d2335;--mbt-color-border: #2a3148;--mbt-color-gray: #475569;--mbt-color-text-primary: #f2f4fa;--mbt-color-text-muted: #8d92a9;--mbt-color-text-inverse: #0b0e14;--mbt-color-primary: #6663fd;--mbt-color-secondary: #0950c2;--mbt-color-success: #00b279;--mbt-color-error: #f2766a;--mbt-color-warning: #e6c352;--mbt-color-diamond: #e6f3ff;--mbt-color-primary-stop-0: #00a09e;--mbt-color-primary-stop-1: #234dc5;--mbt-color-primary-stop-2: #1945d9;--mbt-color-diamond-stop-0: #beacd3;--mbt-color-diamond-stop-1: #bee3f7;--mbt-color-diamond-stop-2: #efece7;--mbt-color-diamond-stop-3: #f8ddde;--mbt-color-diamond-stop-4: #cfe6f1;--mbt-color-gold: #d1a64a;--mbt-color-silver: #969fa6;--mbt-color-bronze: #956c68;--mbt-font-primary: "IBM Plex Sans", sans-serif;--mbt-font-secondary: "Inter", sans-serif;--mbt-font-mono: "IBM Plex Mono", monospace;--mbt-font-size-1: 12px;--mbt-font-size-2: 14px;--mbt-font-size-3: 16px;--mbt-font-size-4: 20px;--mbt-font-size-5: 24px;--mbt-font-size-6: 28px;--mbt-font-size-7: 40px;--mbt-font-size-8: 48px;--mbt-font-size-9: 72px;--mbt-font-weight-regular: 400;--mbt-font-weight-medium: 500;--mbt-font-weight-semibold: 600;--mbt-font-feature-inter-stylistic: "salt" on, "ss01" on, "ss02" on;--mbt-space-0: 0;--mbt-space-1: 4px;--mbt-space-2: 8px;--mbt-space-3: 12px;--mbt-space-4: 16px;--mbt-space-5: 24px;--mbt-space-6: 32px;--mbt-space-7: 48px;--mbt-space-8: 64px;--mbt-space-9: 96px;--mbt-space-10: 128px;--mbt-radius-0: 0;--mbt-radius-xs: 4px;--mbt-radius-sm: 8px;--mbt-radius-md: 12px;--mbt-radius-lg: 16px;--mbt-radius-xl: 24px;--mbt-radius-full: 999px;--mbt-z-index-0: 0;--mbt-z-index-1: 100;--mbt-z-index-2: 200;--mbt-z-index-3: 300;--mbt-z-index-4: 400;--mbt-z-index-5: 500;--mbt-transition-fast: .15s ease;--mbt-transition-normal: .25s ease;--mbt-transition-slow: .4s ease}
@@ -25,7 +25,7 @@
25
25
 
26
26
  /* Brand */
27
27
  --mbt-color-primary: #6663fd;
28
- --mbt-color-secondary: #0078fd;
28
+ --mbt-color-secondary: #0950c2;
29
29
 
30
30
  /* State */
31
31
  --mbt-color-success: #00b279;
@@ -34,15 +34,9 @@
34
34
  --mbt-color-diamond: #e6f3ff;
35
35
 
36
36
  /* Primary gradient */
37
- --mbt-color-primary-stop-0: #65d5f4;
38
- --mbt-color-primary-stop-1: #0096fa;
39
- --mbt-color-primary-stop-2: #1c3dc2;
40
- --mbt-color-primary-gradient: linear-gradient(
41
- 45deg,
42
- #65d5f4 0%,
43
- #0096fa 40%,
44
- #1c3dc2 100%
45
- );
37
+ --mbt-color-primary-stop-0: #00a09e;
38
+ --mbt-color-primary-stop-1: #234dc5;
39
+ --mbt-color-primary-stop-2: #1945d9;
46
40
 
47
41
  /* Diamond gradient */
48
42
  --mbt-color-diamond-stop-0: #beacd3;
@@ -50,14 +44,6 @@
50
44
  --mbt-color-diamond-stop-2: #efece7;
51
45
  --mbt-color-diamond-stop-3: #f8ddde;
52
46
  --mbt-color-diamond-stop-4: #cfe6f1;
53
- --mbt-color-diamond-gradient: linear-gradient(
54
- 45deg,
55
- #beacd3 0%,
56
- #bee3f7 25%,
57
- #efece7 50%,
58
- #f8ddde 75%,
59
- #cfe6f1 100%
60
- );
61
47
 
62
48
  /* Metals */
63
49
  --mbt-color-gold: #d1a64a;
@@ -13,23 +13,21 @@ export declare const colors: {
13
13
  readonly textMuted: "#8D92A9";
14
14
  readonly textInverse: "#0B0E14";
15
15
  readonly primary: "#6663FD";
16
- readonly secondary: "#0078FD";
16
+ readonly secondary: "#0950C2";
17
17
  readonly gray: "#475569";
18
18
  readonly border: "#2A3148";
19
19
  readonly success: "#00B279";
20
20
  readonly error: "#F2766A";
21
21
  readonly warning: "#E6C352";
22
22
  readonly diamond: "#E6F3FF";
23
- readonly primaryStop0: "#65D5F4";
24
- readonly primaryStop1: "#0096FA";
25
- readonly primaryStop2: "#1C3DC2";
26
- readonly primaryGradient: "linear-gradient(45deg, #65D5F4 0%, #0096FA 40%, #1C3DC2 100%)";
23
+ readonly primaryStop0: "#00A09E";
24
+ readonly primaryStop1: "#234DC5";
25
+ readonly primaryStop2: "#1945D9";
27
26
  readonly diamondStop0: "#BEACD3";
28
27
  readonly diamondStop1: "#BEE3F7";
29
28
  readonly diamondStop2: "#EFECE7";
30
29
  readonly diamondStop3: "#F8DDDE";
31
30
  readonly diamondStop4: "#CFE6F1";
32
- readonly diamondGradient: "linear-gradient(45deg, #BEACD3 0%, #BEE3F7 25%, #EFECE7 50%, #F8DDDE 75%, #CFE6F1 100%)";
33
31
  readonly gold: "#D1A64A";
34
32
  readonly silver: "#969FA6";
35
33
  readonly bronze: "#956C68";
@@ -103,23 +101,21 @@ export declare const tokens: {
103
101
  readonly textMuted: "#8D92A9";
104
102
  readonly textInverse: "#0B0E14";
105
103
  readonly primary: "#6663FD";
106
- readonly secondary: "#0078FD";
104
+ readonly secondary: "#0950C2";
107
105
  readonly gray: "#475569";
108
106
  readonly border: "#2A3148";
109
107
  readonly success: "#00B279";
110
108
  readonly error: "#F2766A";
111
109
  readonly warning: "#E6C352";
112
110
  readonly diamond: "#E6F3FF";
113
- readonly primaryStop0: "#65D5F4";
114
- readonly primaryStop1: "#0096FA";
115
- readonly primaryStop2: "#1C3DC2";
116
- readonly primaryGradient: "linear-gradient(45deg, #65D5F4 0%, #0096FA 40%, #1C3DC2 100%)";
111
+ readonly primaryStop0: "#00A09E";
112
+ readonly primaryStop1: "#234DC5";
113
+ readonly primaryStop2: "#1945D9";
117
114
  readonly diamondStop0: "#BEACD3";
118
115
  readonly diamondStop1: "#BEE3F7";
119
116
  readonly diamondStop2: "#EFECE7";
120
117
  readonly diamondStop3: "#F8DDDE";
121
118
  readonly diamondStop4: "#CFE6F1";
122
- readonly diamondGradient: "linear-gradient(45deg, #BEACD3 0%, #BEE3F7 25%, #EFECE7 50%, #F8DDDE 75%, #CFE6F1 100%)";
123
119
  readonly gold: "#D1A64A";
124
120
  readonly silver: "#969FA6";
125
121
  readonly bronze: "#956C68";
@@ -1 +1 @@
1
- {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/styles/tokens.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CT,CAAC;AAMX,eAAO,MAAM,KAAK;;;;CAIR,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;CAUZ,CAAC;AAEX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,eAAO,MAAM,YAAY;;CAEf,CAAC;AAMX,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYV,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;;CAQT,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;CAOT,CAAC;AAMX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUT,CAAC;AAEX,eAAe,MAAM,CAAC;AAMtB,MAAM,MAAM,KAAK,GAAG,MAAM,OAAO,MAAM,CAAC;AACxC,MAAM,MAAM,IAAI,GAAG,MAAM,OAAO,KAAK,CAAC;AACtC,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAC9C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAClD,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC;AACpD,MAAM,MAAM,OAAO,GAAG,MAAM,OAAO,OAAO,CAAC;AAC3C,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,MAAM,CAAC;AACzC,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,MAAM,CAAC;AACzC,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC"}
1
+ {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/styles/tokens.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCT,CAAC;AAMX,eAAO,MAAM,KAAK;;;;CAIR,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;CAUZ,CAAC;AAEX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,eAAO,MAAM,YAAY;;CAEf,CAAC;AAMX,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYV,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;;CAQT,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;CAOT,CAAC;AAMX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUT,CAAC;AAEX,eAAe,MAAM,CAAC;AAMtB,MAAM,MAAM,KAAK,GAAG,MAAM,OAAO,MAAM,CAAC;AACxC,MAAM,MAAM,IAAI,GAAG,MAAM,OAAO,KAAK,CAAC;AACtC,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAC9C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAClD,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC;AACpD,MAAM,MAAM,OAAO,GAAG,MAAM,OAAO,OAAO,CAAC;AAC3C,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,MAAM,CAAC;AACzC,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,MAAM,CAAC;AACzC,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC"}
@@ -10,7 +10,7 @@ const s = {
10
10
  textInverse: "#0B0E14",
11
11
  // Brand
12
12
  primary: "#6663FD",
13
- secondary: "#0078FD",
13
+ secondary: "#0950C2",
14
14
  // State
15
15
  gray: "#475569",
16
16
  border: "#2A3148",
@@ -19,25 +19,23 @@ const s = {
19
19
  warning: "#E6C352",
20
20
  // Gradient colors
21
21
  diamond: "#E6F3FF",
22
- primaryStop0: "#65D5F4",
23
- primaryStop1: "#0096FA",
24
- primaryStop2: "#1C3DC2",
25
- primaryGradient: "linear-gradient(45deg, #65D5F4 0%, #0096FA 40%, #1C3DC2 100%)",
22
+ primaryStop0: "#00A09E",
23
+ primaryStop1: "#234DC5",
24
+ primaryStop2: "#1945D9",
26
25
  diamondStop0: "#BEACD3",
27
26
  diamondStop1: "#BEE3F7",
28
27
  diamondStop2: "#EFECE7",
29
28
  diamondStop3: "#F8DDDE",
30
29
  diamondStop4: "#CFE6F1",
31
- diamondGradient: "linear-gradient(45deg, #BEACD3 0%, #BEE3F7 25%, #EFECE7 50%, #F8DDDE 75%, #CFE6F1 100%)",
32
30
  // Metals
33
31
  gold: "#D1A64A",
34
32
  silver: "#969FA6",
35
33
  bronze: "#956C68"
36
- }, a = {
34
+ }, o = {
37
35
  primary: '"IBM Plex Sans", sans-serif',
38
36
  secondary: '"Inter", sans-serif',
39
37
  mono: '"IBM Plex Mono", monospace'
40
- }, o = {
38
+ }, a = {
41
39
  1: "12px",
42
40
  2: "14px",
43
41
  3: "16px",
@@ -51,9 +49,9 @@ const s = {
51
49
  regular: 400,
52
50
  medium: 500,
53
51
  semibold: 600
54
- }, e = {
52
+ }, t = {
55
53
  interStylistic: "'salt' on, 'ss01' on, 'ss02' on"
56
- }, r = {
54
+ }, p = {
57
55
  0: "0",
58
56
  1: "4px",
59
57
  2: "8px",
@@ -65,7 +63,7 @@ const s = {
65
63
  8: "64px",
66
64
  9: "96px",
67
65
  10: "128px"
68
- }, t = {
66
+ }, e = {
69
67
  0: "0",
70
68
  xs: "4px",
71
69
  sm: "8px",
@@ -73,37 +71,37 @@ const s = {
73
71
  lg: "16px",
74
72
  xl: "24px",
75
73
  full: "999px"
76
- }, p = {
74
+ }, r = {
77
75
  0: 0,
78
76
  1: 100,
79
77
  2: 200,
80
78
  3: 300,
81
79
  4: 400,
82
80
  5: 500
83
- }, i = {
81
+ }, x = {
84
82
  fast: "150ms ease",
85
83
  normal: "250ms ease",
86
84
  slow: "400ms ease"
87
- }, x = {
85
+ }, i = {
88
86
  colors: s,
89
- fonts: a,
90
- fontSizes: o,
87
+ fonts: o,
88
+ fontSizes: a,
91
89
  fontWeights: n,
92
- fontFeatures: e,
93
- spacing: r,
94
- radius: t,
95
- zIndex: p,
96
- transitions: i
90
+ fontFeatures: t,
91
+ spacing: p,
92
+ radius: e,
93
+ zIndex: r,
94
+ transitions: x
97
95
  };
98
96
  export {
99
- o as a,
97
+ a,
100
98
  n as b,
101
99
  s as c,
102
- a as d,
103
- i as e,
104
- e as f,
105
- t as r,
106
- r as s,
107
- x as t,
108
- p as z
100
+ o as d,
101
+ x as e,
102
+ t as f,
103
+ e as r,
104
+ p as s,
105
+ i as t,
106
+ r as z
109
107
  };
@@ -0,0 +1 @@
1
+ "use strict";const s={bg0:"#0B0E14",bg1:"#111520",surface:"#171C2A",surfaceRaised:"#1D2335",textPrimary:"#F2F4FA",textMuted:"#8D92A9",textInverse:"#0B0E14",primary:"#6663FD",secondary:"#0950C2",gray:"#475569",border:"#2A3148",success:"#00B279",error:"#F2766A",warning:"#E6C352",diamond:"#E6F3FF",primaryStop0:"#00A09E",primaryStop1:"#234DC5",primaryStop2:"#1945D9",diamondStop0:"#BEACD3",diamondStop1:"#BEE3F7",diamondStop2:"#EFECE7",diamondStop3:"#F8DDDE",diamondStop4:"#CFE6F1",gold:"#D1A64A",silver:"#969FA6",bronze:"#956C68"},o={primary:'"IBM Plex Sans", sans-serif',secondary:'"Inter", sans-serif',mono:'"IBM Plex Mono", monospace'},n={1:"12px",2:"14px",3:"16px",4:"20px",5:"24px",6:"28px",7:"40px",8:"48px",9:"72px"},t={regular:400,medium:500,semibold:600},e={interStylistic:"'salt' on, 'ss01' on, 'ss02' on"},r={0:"0",1:"4px",2:"8px",3:"12px",4:"16px",5:"24px",6:"32px",7:"48px",8:"64px",9:"96px",10:"128px"},p={0:"0",xs:"4px",sm:"8px",md:"12px",lg:"16px",xl:"24px",full:"999px"},a={0:0,1:100,2:200,3:300,4:400,5:500},i={fast:"150ms ease",normal:"250ms ease",slow:"400ms ease"},x={colors:s,fonts:o,fontSizes:n,fontWeights:t,fontFeatures:e,spacing:r,radius:p,zIndex:a,transitions:i};exports.colors=s;exports.fontFeatures=e;exports.fontSizes=n;exports.fontWeights=t;exports.fonts=o;exports.radius=p;exports.spacing=r;exports.tokens=x;exports.transitions=i;exports.zIndex=a;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./tokens-DbQnrzz6.cjs");exports.colors=t.colors;exports.fontFeatures=t.fontFeatures;exports.fontSizes=t.fontSizes;exports.fontWeights=t.fontWeights;exports.fonts=t.fonts;exports.radius=t.radius;exports.spacing=t.spacing;exports.tokens=t.tokens;exports.transitions=t.transitions;exports.zIndex=t.zIndex;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./tokens-C8rDJFS5.cjs");exports.colors=t.colors;exports.fontFeatures=t.fontFeatures;exports.fontSizes=t.fontSizes;exports.fontWeights=t.fontWeights;exports.fonts=t.fonts;exports.radius=t.radius;exports.spacing=t.spacing;exports.tokens=t.tokens;exports.transitions=t.transitions;exports.zIndex=t.zIndex;
@@ -1,4 +1,4 @@
1
- import { c as t, f as o, a as n, b as e, d as r, r as f, s as i, t as c, e as d, z } from "./tokens-C9wefV-c.js";
1
+ import { c as t, f as o, a as n, b as e, d as r, r as f, s as i, t as c, e as d, z } from "./tokens-C0g4TAJO.js";
2
2
  export {
3
3
  t as colors,
4
4
  o as fontFeatures,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "mbt-ui-kit",
3
3
  "description": "React component library with SCSS",
4
- "version": "0.1.20",
4
+ "version": "0.1.22",
5
5
  "packageManager": "pnpm@10.28.0",
6
6
  "type": "module",
7
7
  "main": "dist/index.cjs",
@@ -19,7 +19,7 @@ $text-inverse: #0b0e14;
19
19
 
20
20
  // Brand
21
21
  $primary: #6663fd;
22
- $secondary: #0078fd;
22
+ $secondary: #0950c2;
23
23
 
24
24
  // State
25
25
  $gray: #475569;
@@ -30,28 +30,14 @@ $warning: #e6c352;
30
30
  $diamond: #e6f3ff;
31
31
 
32
32
  // Gradient colors
33
- $primary-stop-0: #65d5f4;
34
- $primary-stop-1: #0096fa;
35
- $primary-stop-2: #1c3dc2;
36
- $primary-gradient: linear-gradient(
37
- 45deg,
38
- #65d5f4 0%,
39
- #0096fa 40%,
40
- #1c3dc2 100%
41
- );
33
+ $primary-stop-0: #00a09e;
34
+ $primary-stop-1: #234dc5;
35
+ $primary-stop-2: #1945d9;
42
36
  $diamond-stop-0: #beacd3;
43
37
  $diamond-stop-1: #bee3f7;
44
38
  $diamond-stop-2: #efece7;
45
39
  $diamond-stop-3: #f8ddde;
46
40
  $diamond-stop-4: #cfe6f1;
47
- $diamond-gradient: linear-gradient(
48
- 45deg,
49
- #beacd3 0%,
50
- #bee3f7 25%,
51
- #efece7 50%,
52
- #f8ddde 75%,
53
- #cfe6f1 100%
54
- );
55
41
 
56
42
  // Metals
57
43
  $gold: #d1a64a;
@@ -1 +0,0 @@
1
- "use strict";const s={bg0:"#0B0E14",bg1:"#111520",surface:"#171C2A",surfaceRaised:"#1D2335",textPrimary:"#F2F4FA",textMuted:"#8D92A9",textInverse:"#0B0E14",primary:"#6663FD",secondary:"#0078FD",gray:"#475569",border:"#2A3148",success:"#00B279",error:"#F2766A",warning:"#E6C352",diamond:"#E6F3FF",primaryStop0:"#65D5F4",primaryStop1:"#0096FA",primaryStop2:"#1C3DC2",primaryGradient:"linear-gradient(45deg, #65D5F4 0%, #0096FA 40%, #1C3DC2 100%)",diamondStop0:"#BEACD3",diamondStop1:"#BEE3F7",diamondStop2:"#EFECE7",diamondStop3:"#F8DDDE",diamondStop4:"#CFE6F1",diamondGradient:"linear-gradient(45deg, #BEACD3 0%, #BEE3F7 25%, #EFECE7 50%, #F8DDDE 75%, #CFE6F1 100%)",gold:"#D1A64A",silver:"#969FA6",bronze:"#956C68"},n={primary:'"IBM Plex Sans", sans-serif',secondary:'"Inter", sans-serif',mono:'"IBM Plex Mono", monospace'},o={1:"12px",2:"14px",3:"16px",4:"20px",5:"24px",6:"28px",7:"40px",8:"48px",9:"72px"},t={regular:400,medium:500,semibold:600},e={interStylistic:"'salt' on, 'ss01' on, 'ss02' on"},r={0:"0",1:"4px",2:"8px",3:"12px",4:"16px",5:"24px",6:"32px",7:"48px",8:"64px",9:"96px",10:"128px"},a={0:"0",xs:"4px",sm:"8px",md:"12px",lg:"16px",xl:"24px",full:"999px"},i={0:0,1:100,2:200,3:300,4:400,5:500},p={fast:"150ms ease",normal:"250ms ease",slow:"400ms ease"},x={colors:s,fonts:n,fontSizes:o,fontWeights:t,fontFeatures:e,spacing:r,radius:a,zIndex:i,transitions:p};exports.colors=s;exports.fontFeatures=e;exports.fontSizes=o;exports.fontWeights=t;exports.fonts=n;exports.radius=a;exports.spacing=r;exports.tokens=x;exports.transitions=p;exports.zIndex=i;