@midas-ds/components 8.0.0 → 8.2.0

package/label/Label.d.ts

@@ -2,7 +2,7 @@ import { LabelProps as AriaLabelProps } from 'react-aria-components';
 import * as React from 'react';
 export interface LabelProps extends AriaLabelProps {
     /**
-     * The visual variant of the component
+     *  @deprecated Please use Label without variant for label-02, and for label-01 use Text component with slot: 'description'
      */
     variant?: 'label-01' | 'label-02';
 }

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "8.0.0",
+  "version": "8.2.0",
   "main": "./index.cjs",
   "module": "./index.js",
   "types": "./index.d.ts",

package/select/utils.d.ts

@@ -2,3 +2,10 @@ export declare const options: {
     name: string;
     id: string;
 }[];
+export declare const optionsWithSections: {
+    name: string;
+    children: {
+        name: string;
+        id: string;
+    }[];
+}[];

package/theme/index.d.ts

@@ -37,16 +37,19 @@ export declare const theme: {
         purple80: string;
         purple140: string;
         red100: string;
-        signalBlue20: string;
-        signalBlue140: string;
+        signalBlue10: string;
+        signalBlue100: string;
         signalGreen20: string;
-        signalGreen140: string;
+        signalGreen30: string;
+        signalGreen100: string;
+        signalYellow10: string;
+        signalYellow100: string;
         signalRed20: string;
-        signalRed140: string;
+        signalRed30: string;
+        signalRed80: string;
+        signalRed100: string;
         signalRed160: string;
         signalRed180: string;
-        signalYellow20: string;
-        signalYellow140: string;
     };
     typography: {
         fontFamily: string;
@@ -134,10 +137,10 @@ export declare const theme: {
         layerAccentHover02: string;
         layerAccentSelected02: string;
         brandPrimary: string;
-        borderStrong: string;
-        borderMedium: string;
+        borderPrimary: string;
+        borderSecondary: string;
         borderSubtle: string;
-        borderBrand: string;
+        borderTertiary: string;
         borderInvalid: string;
         borderDisabled: string;
         field01: string;
@@ -150,6 +153,7 @@ export declare const theme: {
         fieldSkeleton: string;
         iconPrimary: string;
         iconSecondary: string;
+        iconTertiary: string;
         iconInverse: string;
         iconOnColor: string;
         iconDisabled: string;
@@ -161,14 +165,16 @@ export declare const theme: {
         linkHover: string;
         linkPressed: string;
         linkVisited: string;
-        notificationBorderSuccess: string;
-        notificationBorderInfo: string;
-        notificationBorderImportant: string;
-        notificationBorderWarning: string;
-        notificationBackgroundSuccess: string;
-        notificationBackgroundInfo: string;
-        notificationBackgroundImportant: string;
-        notificationBackgroundWarning: string;
+        supportBorderSuccess: string;
+        supportBorderInfo: string;
+        supportBorderImportant: string;
+        supportBorderWarning: string;
+        supportBackgroundSuccess: string;
+        supportBackgroundSuccessHover: string;
+        supportBackgroundInfo: string;
+        supportBackgroundImportant: string;
+        supportBackgroundWarning: string;
+        supportBackgroundWarningHover: string;
         textPrimary: string;
         textSecondary: string;
         textTertiary: string;

package/theme/tokens.d.ts

@@ -35,16 +35,19 @@ export declare const baseColors: {
     purple80: string;
     purple140: string;
     red100: string;
-    signalBlue20: string;
-    signalBlue140: string;
+    signalBlue10: string;
+    signalBlue100: string;
     signalGreen20: string;
-    signalGreen140: string;
+    signalGreen30: string;
+    signalGreen100: string;
+    signalYellow10: string;
+    signalYellow100: string;
     signalRed20: string;
-    signalRed140: string;
+    signalRed30: string;
+    signalRed80: string;
+    signalRed100: string;
     signalRed160: string;
     signalRed180: string;
-    signalYellow20: string;
-    signalYellow140: string;
 };
 export declare const typography: {
     fontFamily: string;
@@ -132,10 +135,10 @@ export declare const semantic: {
     layerAccentHover02: string;
     layerAccentSelected02: string;
     brandPrimary: string;
-    borderStrong: string;
-    borderMedium: string;
+    borderPrimary: string;
+    borderSecondary: string;
     borderSubtle: string;
-    borderBrand: string;
+    borderTertiary: string;
     borderInvalid: string;
     borderDisabled: string;
     field01: string;
@@ -148,6 +151,7 @@ export declare const semantic: {
     fieldSkeleton: string;
     iconPrimary: string;
     iconSecondary: string;
+    iconTertiary: string;
     iconInverse: string;
     iconOnColor: string;
     iconDisabled: string;
@@ -159,14 +163,16 @@ export declare const semantic: {
     linkHover: string;
     linkPressed: string;
     linkVisited: string;
-    notificationBorderSuccess: string;
-    notificationBorderInfo: string;
-    notificationBorderImportant: string;
-    notificationBorderWarning: string;
-    notificationBackgroundSuccess: string;
-    notificationBackgroundInfo: string;
-    notificationBackgroundImportant: string;
-    notificationBackgroundWarning: string;
+    supportBorderSuccess: string;
+    supportBorderInfo: string;
+    supportBorderImportant: string;
+    supportBorderWarning: string;
+    supportBackgroundSuccess: string;
+    supportBackgroundSuccessHover: string;
+    supportBackgroundInfo: string;
+    supportBackgroundImportant: string;
+    supportBackgroundWarning: string;
+    supportBackgroundWarningHover: string;
     textPrimary: string;
     textSecondary: string;
     textTertiary: string;

package/theme.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tokens-BzHPOv0Z.cjs"),s={...e.tokens};exports.baseColors=e.baseColors;exports.breakpoints=e.breakpoints;exports.semantic=e.semantic;exports.spacing=e.spacing;exports.states=e.states;exports.transitions=e.transitions;exports.typography=e.typography;exports.windowSizes=e.windowSizes;exports.zIndex=e.zIndex;exports.theme=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tokens-CIuAmuws.cjs"),s={...e.tokens};exports.baseColors=e.baseColors;exports.breakpoints=e.breakpoints;exports.semantic=e.semantic;exports.spacing=e.spacing;exports.states=e.states;exports.transitions=e.transitions;exports.typography=e.typography;exports.windowSizes=e.windowSizes;exports.zIndex=e.zIndex;exports.theme=s;

package/theme.js

@@ -1,5 +1,5 @@
-import { t as s } from "./tokens-f_GueHFO.js";
-import { b as n, f as r, s as i, c as p, d as m, e as c, a as b, w as d, z as f } from "./tokens-f_GueHFO.js";
+import { t as s } from "./tokens-Dq5vcWLv.js";
+import { b as n, f as r, s as i, c as p, d as m, e as c, a as b, w as d, z as f } from "./tokens-Dq5vcWLv.js";
 const t = { ...s };
 export {
   n as baseColors,

package/toggle-button/ToggleButton.d.ts

@@ -0,0 +1,2 @@
+import { ToggleButtonProps } from 'react-aria-components';
+export declare const ToggleButton: React.FC<ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/toggle-button/ToggleButtonGroup.d.ts

@@ -0,0 +1,3 @@
+import { ToggleButtonGroupProps } from 'react-aria-components';
+import * as React from 'react';
+export declare const ToggleButtonGroup: React.FC<ToggleButtonGroupProps & React.RefAttributes<HTMLDivElement>>;

package/toggle-button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ToggleButton';
+export * from './ToggleButtonGroup';

package/tokens-CIuAmuws.cjs

@@ -0,0 +1 @@
+"use strict";const r={black:"#000000",white:"#ffffff",blackHover:"#0d0d0d",whiteHover:"#e6e6e6",gray10:"#f2f2f2",gray20:"#e6e6e6",gray30:"#d9d9d9",gray40:"#cccccc",gray50:"#bfbfbf",gray60:"#b3b3b3",gray70:"#a6a6a6",gray80:"#999999",gray90:"#8c8c8c",gray100:"#808080",gray110:"#737373",gray120:"#666666",gray130:"#5d5d5d",gray140:"#525252",gray150:"#474747",gray160:"#383838",gray170:"#333333",gray180:"#262626",gray190:"#212121",gray200:"#171717",blue10:"#eaf2f6",blue20:"#d5e5ed",blue40:"#abcbdb",blue60:"#82b0c9",blue80:"#5897b8",blue90:"#4289ad",blue100:"#2e7ca5",blue140:"#25607f",blue170:"#143c50",purple80:"#b46ab4",purple140:"#954b95",red100:"#b90835",signalBlue10:"#eaf2f6",signalBlue100:"#0066cc",signalGreen20:"#d5f2d9",signalGreen30:"#bae5c5",signalGreen100:"#008d3c",signalYellow10:"#fff8e1",signalYellow100:"#fdb813",signalRed20:"#ffdfdf",signalRed30:"#fcc8c8",signalRed80:"#eb4e4e",signalRed100:"#e62323",signalRed160:"#b31b1b",signalRed180:"#801313"},a={fontFamily:'"Inter", sans-serif',lineHeight01:1,lineHeight02:1.125,lineHeight03:1.25,lineHeight04:1.375,lineHeight05:1.5,lineHeight06:1.75,lineHeight07:2,lineHeight08:2.25,lineHeight09:2.5,size01:"0.75rem",size02:"0.875rem",size03:"1rem",size04:"1.125rem",size05:"1.25rem",size06:"1.5rem",size07:"1.75rem",size08:"2rem",size09:"2.25rem",size10:"2.625rem",weightThin:100,weightExtraLight:200,weightLight:300,weightRegular:400,weightMedium:500,weightSemiBold:600,weightBold:700,weightExtraBold:800,weightBlack:900},g={"01":"0.125rem","02":"0.25rem","03":"0.5rem","04":"0.75rem","05":"1rem","06":"1.5rem","07":"2rem","08":"2.5rem","09":"3rem",10:"4rem",11:"5rem",12:"6rem"},i={focus:"0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white)"},l={slow:"500ms",normal:"300ms",fast:"250ms"},e={md:768,lg:1200,xl:1440},t={sm:`(max-width: ${e.md-1}px)`,md:`(min-width: ${e.md}px)`,lg:`(min-width: ${e.lg}px)`,xl:`(min-width: ${e.xl}px)`,forcedColorsMode:"(forced-colors: active)",darkMode:"(prefers-color-scheme: dark)",prefersReducedMotion:"(prefers-reduced-motion: reduced)"},d={background:`light-dark(${r.white}, ${r.gray200})`,backgroundHover:`light-dark(${r.whiteHover}, ${r.gray190})`,backgroundInverse:`light-dark(${r.gray200}, ${r.gray10})`,layer01:`light-dark(${r.gray10}, ${r.gray180})`,layerHover01:`light-dark(${r.gray20}, ${r.gray170})`,layerSelected01:`light-dark(${r.gray30}, ${r.gray160})`,layerSelectedHover01:`light-dark(${r.gray40}, ${r.gray150})`,layer02:`light-dark(${r.white}, ${r.gray160})`,layerHover02:`light-dark(${r.whiteHover}, ${r.gray150})`,layerSelected02:`light-dark(${r.gray30}, ${r.gray140})`,layerSelectedHover02:`light-dark(${r.gray40}, ${r.gray130})`,layerAccent01:`light-dark(${r.gray30}, ${r.gray160})`,layerAccentHover01:`light-dark(${r.gray40}, ${r.gray150})`,layerAccentSelected01:`light-dark(${r.gray50}, ${r.gray140})`,layerAccent02:`light-dark(${r.gray10}, ${r.gray180})`,layerAccentHover02:`light-dark(${r.gray20}, ${r.gray170})`,layerAccentSelected02:`light-dark(${r.gray30}, ${r.gray160})`,brandPrimary:`light-dark(${r.red100}, ${r.red100})`,borderPrimary:`light-dark(${r.gray200}, ${r.gray10})`,borderSecondary:`light-dark(${r.gray110}, ${r.gray90})`,borderSubtle:`light-dark(${r.gray50}, ${r.gray160})`,borderTertiary:`light-dark(${r.blue170}, ${r.blue100})`,borderInvalid:`light-dark(${r.signalRed100}, ${r.signalRed80})`,borderDisabled:`light-dark(${r.gray50}, ${r.gray140})`,field01:`light-dark(${r.gray10}, ${r.gray180})`,fieldHover01:`light-dark(${r.gray20}, ${r.gray170})`,fieldActive01:`light-dark(${r.gray30}, ${r.gray160})`,field02:`light-dark(${r.white}, ${r.gray160})`,fieldHover02:`light-dark(${r.whiteHover}, ${r.gray150})`,fieldActive02:`light-dark(${r.gray30}, ${r.gray140})`,fieldDisabled:`light-dark(${r.gray10}, ${r.gray180})`,fieldSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,iconPrimary:`light-dark(${r.gray200}, ${r.gray10})`,iconSecondary:`light-dark(${r.gray140}, ${r.gray70})`,iconTertiary:`light-dark(${r.blue170}, ${r.gray10})`,iconInverse:`light-dark(${r.white}, ${r.gray200})`,iconOnColor:`light-dark(${r.white}, ${r.white})`,iconDisabled:`light-dark(${r.gray50}, ${r.gray140})`,iconSuccess:`light-dark(${r.signalGreen100}, ${r.signalGreen100})`,iconInfo:`light-dark(${r.signalBlue100}, ${r.signalBlue100})`,iconWarning:`light-dark(${r.signalRed100}, ${r.signalRed100})`,iconImportant:`light-dark(${r.signalYellow100}, ${r.signalYellow100})`,linkEnabled:`light-dark(${r.blue100}, ${r.blue90})`,linkHover:`light-dark(${r.blue170}, ${r.blue80})`,linkPressed:`light-dark(${r.gray200}, ${r.blue60})`,linkVisited:`light-dark(${r.purple140}, ${r.purple80})`,supportBorderSuccess:`light-dark(${r.signalGreen100}, ${r.signalGreen100})`,supportBorderInfo:`light-dark(${r.signalBlue100}, ${r.signalBlue100})`,supportBorderImportant:`light-dark(${r.signalYellow100}, ${r.signalYellow100})`,supportBorderWarning:`light-dark(${r.signalRed100}, ${r.signalRed100})`,supportBackgroundSuccess:`light-dark(${r.signalGreen20}, ${r.gray180})`,supportBackgroundSuccessHover:`light-dark(${r.signalGreen30}, ${r.gray170})`,supportBackgroundInfo:`light-dark(${r.signalBlue10}, ${r.gray180})`,supportBackgroundImportant:`light-dark(${r.signalYellow10}, ${r.gray180})`,supportBackgroundWarning:`light-dark(${r.signalRed20}, ${r.gray180})`,supportBackgroundWarningHover:`light-dark(${r.signalRed30}, ${r.gray170})`,textPrimary:`light-dark(${r.gray200}, ${r.gray10})`,textSecondary:`light-dark(${r.gray140}, ${r.gray70})`,textTertiary:`light-dark(${r.blue170}, ${r.gray10})`,textOnColor:`light-dark(${r.white}, ${r.white})`,textInverse:`light-dark(${r.gray10}, ${r.gray200})`,textDisabled:`light-dark(${r.gray50}, ${r.gray140})`,textInvalid:`light-dark(${r.signalRed100}, ${r.signalRed80})`,textPlaceholder:`light-dark(${r.gray70}, ${r.gray140})`,buttonBackgroundPrimary:`light-dark(${r.blue170}, ${r.blue100})`,buttonBackgroundPrimaryHover:`light-dark(${r.blue140}, ${r.blue140})`,buttonBackgroundPrimaryActive:`light-dark(${r.blue100}, ${r.blue170})`,buttonBackgroundSecondary:`light-dark(${r.white}, ${r.gray200})`,buttonBackgroundSecondaryHover:`light-dark(${r.whiteHover}, ${r.gray190})`,buttonBackgroundSecondaryActive:`light-dark(${r.gray30}, ${r.gray180})`,buttonBackgroundTertiaryHover:`light-dark(${r.whiteHover}, ${r.gray190})`,buttonBackgroundTertiaryActive:`light-dark(${r.gray30}, ${r.gray180})`,buttonBackgroundDanger:`light-dark(${r.signalRed100}, ${r.signalRed100})`,buttonBackgroundDangerHover:`light-dark(${r.signalRed160}, ${r.signalRed160})`,buttonBackgroundDangerActive:`light-dark(${r.signalRed180}, ${r.signalRed180})`,buttonBackgroundDisabled:`light-dark(${r.gray10}, ${r.gray180})`,buttonBackgroundSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,buttonBorderSecondary:`light-dark(${r.blue170}, ${r.gray10})`,logoPrimary:`light-dark(${r.red100}, ${r.white})`},n={base:1,above:10,modal:1e3,toast:1100,skipToContent:1200},o=Object.freeze(Object.defineProperty({__proto__:null,baseColors:r,breakpoints:t,semantic:d,spacing:g,states:i,transitions:l,typography:a,windowSizes:e,zIndex:n},Symbol.toStringTag,{value:"Module"}));exports.baseColors=r;exports.breakpoints=t;exports.semantic=d;exports.spacing=g;exports.states=i;exports.tokens=o;exports.transitions=l;exports.typography=a;exports.windowSizes=e;exports.zIndex=n;

package/{tokens-f_GueHFO.js → tokens-Dq5vcWLv.js}

@@ -35,17 +35,20 @@ const r = {
   purple80: "#b46ab4",
   purple140: "#954b95",
   red100: "#b90835",
-  signalBlue20: "#eaf2f6",
-  signalBlue140: "#0066cc",
+  signalBlue10: "#eaf2f6",
+  signalBlue100: "#0066cc",
   signalGreen20: "#d5f2d9",
-  signalGreen140: "#008d3c",
+  signalGreen30: "#bae5c5",
+  signalGreen100: "#008d3c",
+  signalYellow10: "#fff8e1",
+  signalYellow100: "#fdb813",
   signalRed20: "#ffdfdf",
-  signalRed140: "#e62323",
+  signalRed30: "#fcc8c8",
+  signalRed80: "#eb4e4e",
+  signalRed100: "#e62323",
   signalRed160: "#b31b1b",
-  signalRed180: "#801313",
-  signalYellow20: "#fff8e1",
-  signalYellow140: "#fdb813"
-}, e = {
+  signalRed180: "#801313"
+}, a = {
   fontFamily: '"Inter", sans-serif',
   lineHeight01: 1,
   // 16px
@@ -120,20 +123,20 @@ const r = {
   12: "6rem"
   // 96px
 }, i = {
-  focus: "0 0 0 2px white, 0 0 0 4px black"
+  focus: "0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white)"
 }, l = {
   slow: "500ms",
   normal: "300ms",
   fast: "250ms"
-}, a = {
+}, e = {
   md: 768,
   lg: 1200,
   xl: 1440
 }, t = {
-  sm: `(max-width: ${a.md - 1}px)`,
-  md: `(min-width: ${a.md}px)`,
-  lg: `(min-width: ${a.lg}px)`,
-  xl: `(min-width: ${a.xl}px)`,
+  sm: `(max-width: ${e.md - 1}px)`,
+  md: `(min-width: ${e.md}px)`,
+  lg: `(min-width: ${e.lg}px)`,
+  xl: `(min-width: ${e.xl}px)`,
   forcedColorsMode: "(forced-colors: active)",
   darkMode: "(prefers-color-scheme: dark)",
   prefersReducedMotion: "(prefers-reduced-motion: reduced)"
@@ -156,11 +159,11 @@ const r = {
   layerAccentHover02: `light-dark(${r.gray20}, ${r.gray170})`,
   layerAccentSelected02: `light-dark(${r.gray30}, ${r.gray160})`,
   brandPrimary: `light-dark(${r.red100}, ${r.red100})`,
-  borderStrong: `light-dark(${r.gray200}, ${r.gray10})`,
-  borderMedium: `light-dark(${r.gray110}, ${r.gray90})`,
+  borderPrimary: `light-dark(${r.gray200}, ${r.gray10})`,
+  borderSecondary: `light-dark(${r.gray110}, ${r.gray90})`,
   borderSubtle: `light-dark(${r.gray50}, ${r.gray160})`,
-  borderBrand: `light-dark(${r.blue170}, ${r.blue170})`,
-  borderInvalid: `light-dark(${r.signalRed140}, ${r.signalRed140})`,
+  borderTertiary: `light-dark(${r.blue170}, ${r.blue100})`,
+  borderInvalid: `light-dark(${r.signalRed100}, ${r.signalRed80})`,
   borderDisabled: `light-dark(${r.gray50}, ${r.gray140})`,
   field01: `light-dark(${r.gray10}, ${r.gray180})`,
   fieldHover01: `light-dark(${r.gray20}, ${r.gray170})`,
@@ -171,33 +174,36 @@ const r = {
   fieldDisabled: `light-dark(${r.gray10}, ${r.gray180})`,
   fieldSkeleton: `light-dark(${r.gray10}, ${r.gray180})`,
   iconPrimary: `light-dark(${r.gray200}, ${r.gray10})`,
-  iconSecondary: `light-dark(${r.blue170}, ${r.gray10})`,
+  iconSecondary: `light-dark(${r.gray140}, ${r.gray70})`,
+  iconTertiary: `light-dark(${r.blue170}, ${r.gray10})`,
   iconInverse: `light-dark(${r.white}, ${r.gray200})`,
   iconOnColor: `light-dark(${r.white}, ${r.white})`,
   iconDisabled: `light-dark(${r.gray50}, ${r.gray140})`,
-  iconSuccess: `light-dark(${r.signalGreen140}, ${r.signalGreen140})`,
-  iconInfo: `light-dark(${r.signalBlue140}, ${r.signalBlue140})`,
-  iconWarning: `light-dark(${r.signalRed140}, ${r.signalRed140})`,
-  iconImportant: `light-dark(${r.signalYellow140}, ${r.signalYellow140})`,
+  iconSuccess: `light-dark(${r.signalGreen100}, ${r.signalGreen100})`,
+  iconInfo: `light-dark(${r.signalBlue100}, ${r.signalBlue100})`,
+  iconWarning: `light-dark(${r.signalRed100}, ${r.signalRed100})`,
+  iconImportant: `light-dark(${r.signalYellow100}, ${r.signalYellow100})`,
   linkEnabled: `light-dark(${r.blue100}, ${r.blue90})`,
   linkHover: `light-dark(${r.blue170}, ${r.blue80})`,
   linkPressed: `light-dark(${r.gray200}, ${r.blue60})`,
   linkVisited: `light-dark(${r.purple140}, ${r.purple80})`,
-  notificationBorderSuccess: `light-dark(${r.signalGreen140}, ${r.signalGreen140})`,
-  notificationBorderInfo: `light-dark(${r.signalBlue140}, ${r.signalBlue140})`,
-  notificationBorderImportant: `light-dark(${r.signalYellow140}, ${r.signalYellow140})`,
-  notificationBorderWarning: `light-dark(${r.signalRed140}, ${r.signalRed140})`,
-  notificationBackgroundSuccess: `light-dark(${r.signalGreen20}, ${r.gray180})`,
-  notificationBackgroundInfo: `light-dark(${r.signalBlue20}, ${r.gray180})`,
-  notificationBackgroundImportant: `light-dark(${r.signalYellow20}, ${r.gray180})`,
-  notificationBackgroundWarning: `light-dark(${r.signalRed20}, ${r.gray180})`,
+  supportBorderSuccess: `light-dark(${r.signalGreen100}, ${r.signalGreen100})`,
+  supportBorderInfo: `light-dark(${r.signalBlue100}, ${r.signalBlue100})`,
+  supportBorderImportant: `light-dark(${r.signalYellow100}, ${r.signalYellow100})`,
+  supportBorderWarning: `light-dark(${r.signalRed100}, ${r.signalRed100})`,
+  supportBackgroundSuccess: `light-dark(${r.signalGreen20}, ${r.gray180})`,
+  supportBackgroundSuccessHover: `light-dark(${r.signalGreen30}, ${r.gray170})`,
+  supportBackgroundInfo: `light-dark(${r.signalBlue10}, ${r.gray180})`,
+  supportBackgroundImportant: `light-dark(${r.signalYellow10}, ${r.gray180})`,
+  supportBackgroundWarning: `light-dark(${r.signalRed20}, ${r.gray180})`,
+  supportBackgroundWarningHover: `light-dark(${r.signalRed30}, ${r.gray170})`,
   textPrimary: `light-dark(${r.gray200}, ${r.gray10})`,
   textSecondary: `light-dark(${r.gray140}, ${r.gray70})`,
   textTertiary: `light-dark(${r.blue170}, ${r.gray10})`,
   textOnColor: `light-dark(${r.white}, ${r.white})`,
   textInverse: `light-dark(${r.gray10}, ${r.gray200})`,
   textDisabled: `light-dark(${r.gray50}, ${r.gray140})`,
-  textInvalid: `light-dark(${r.signalRed140}, ${r.signalRed140})`,
+  textInvalid: `light-dark(${r.signalRed100}, ${r.signalRed80})`,
   textPlaceholder: `light-dark(${r.gray70}, ${r.gray140})`,
   buttonBackgroundPrimary: `light-dark(${r.blue170}, ${r.blue100})`,
   buttonBackgroundPrimaryHover: `light-dark(${r.blue140}, ${r.blue140})`,
@@ -207,7 +213,7 @@ const r = {
   buttonBackgroundSecondaryActive: `light-dark(${r.gray30}, ${r.gray180})`,
   buttonBackgroundTertiaryHover: `light-dark(${r.whiteHover}, ${r.gray190})`,
   buttonBackgroundTertiaryActive: `light-dark(${r.gray30}, ${r.gray180})`,
-  buttonBackgroundDanger: `light-dark(${r.signalRed140}, ${r.signalRed140})`,
+  buttonBackgroundDanger: `light-dark(${r.signalRed100}, ${r.signalRed100})`,
   buttonBackgroundDangerHover: `light-dark(${r.signalRed160}, ${r.signalRed160})`,
   buttonBackgroundDangerActive: `light-dark(${r.signalRed180}, ${r.signalRed180})`,
   buttonBackgroundDisabled: `light-dark(${r.gray10}, ${r.gray180})`,
@@ -228,12 +234,12 @@ const r = {
   spacing: g,
   states: i,
   transitions: l,
-  typography: e,
-  windowSizes: a,
+  typography: a,
+  windowSizes: e,
   zIndex: n
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  e as a,
+  a,
   r as b,
   g as c,
   i as d,
@@ -241,6 +247,6 @@ export {
   t as f,
   d as s,
   o as t,
-  a as w,
+  e as w,
   n as z
 };

package/tooltip/Tooltip.d.ts

@@ -2,8 +2,7 @@ import { TooltipProps, TooltipTriggerComponentProps } from 'react-aria-component
 import * as React from 'react';
 interface MidasTooltipProps extends Omit<TooltipProps, 'children'> {
     children: React.ReactNode;
-    placement?: 'top' | 'right' | 'bottom' | 'left';
 }
-export declare function Tooltip({ children, placement, className, ...props }: MidasTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ children, className, ...props }: MidasTooltipProps): import("react/jsx-runtime").JSX.Element;
 export declare function TooltipTrigger({ children, delay, ...props }: TooltipTriggerComponentProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/utils/storybook.d.ts

@@ -0,0 +1,4 @@
+export declare const options: {
+    name: string;
+    id: string;
+}[];

package/utils/test.d.ts

@@ -2,3 +2,10 @@
  * A utility for making visual assertions in Storybook play tests based on the browsers "prefers-colors-scheme" setting
  */
 export declare const lightDark: (light: string, dark: string) => string;
+/**
+ * Convert a CSS hex color to CSS rgb color
+ * ```
+ * '#f2f2f2' => 'rgb(242, 242, 242)'
+ * ```
+ */
+export declare const hexToRgb: (hex: string) => string;

package/tokens-BzHPOv0Z.cjs

@@ -1 +0,0 @@
-"use strict";const r={black:"#000000",white:"#ffffff",blackHover:"#0d0d0d",whiteHover:"#e6e6e6",gray10:"#f2f2f2",gray20:"#e6e6e6",gray30:"#d9d9d9",gray40:"#cccccc",gray50:"#bfbfbf",gray60:"#b3b3b3",gray70:"#a6a6a6",gray80:"#999999",gray90:"#8c8c8c",gray100:"#808080",gray110:"#737373",gray120:"#666666",gray130:"#5d5d5d",gray140:"#525252",gray150:"#474747",gray160:"#383838",gray170:"#333333",gray180:"#262626",gray190:"#212121",gray200:"#171717",blue10:"#eaf2f6",blue20:"#d5e5ed",blue40:"#abcbdb",blue60:"#82b0c9",blue80:"#5897b8",blue90:"#4289ad",blue100:"#2e7ca5",blue140:"#25607f",blue170:"#143c50",purple80:"#b46ab4",purple140:"#954b95",red100:"#b90835",signalBlue20:"#eaf2f6",signalBlue140:"#0066cc",signalGreen20:"#d5f2d9",signalGreen140:"#008d3c",signalRed20:"#ffdfdf",signalRed140:"#e62323",signalRed160:"#b31b1b",signalRed180:"#801313",signalYellow20:"#fff8e1",signalYellow140:"#fdb813"},a={fontFamily:'"Inter", sans-serif',lineHeight01:1,lineHeight02:1.125,lineHeight03:1.25,lineHeight04:1.375,lineHeight05:1.5,lineHeight06:1.75,lineHeight07:2,lineHeight08:2.25,lineHeight09:2.5,size01:"0.75rem",size02:"0.875rem",size03:"1rem",size04:"1.125rem",size05:"1.25rem",size06:"1.5rem",size07:"1.75rem",size08:"2rem",size09:"2.25rem",size10:"2.625rem",weightThin:100,weightExtraLight:200,weightLight:300,weightRegular:400,weightMedium:500,weightSemiBold:600,weightBold:700,weightExtraBold:800,weightBlack:900},g={"01":"0.125rem","02":"0.25rem","03":"0.5rem","04":"0.75rem","05":"1rem","06":"1.5rem","07":"2rem","08":"2.5rem","09":"3rem",10:"4rem",11:"5rem",12:"6rem"},i={focus:"0 0 0 2px white, 0 0 0 4px black"},t={slow:"500ms",normal:"300ms",fast:"250ms"},e={md:768,lg:1200,xl:1440},l={sm:`(max-width: ${e.md-1}px)`,md:`(min-width: ${e.md}px)`,lg:`(min-width: ${e.lg}px)`,xl:`(min-width: ${e.xl}px)`,forcedColorsMode:"(forced-colors: active)",darkMode:"(prefers-color-scheme: dark)",prefersReducedMotion:"(prefers-reduced-motion: reduced)"},d={background:`light-dark(${r.white}, ${r.gray200})`,backgroundHover:`light-dark(${r.whiteHover}, ${r.gray190})`,backgroundInverse:`light-dark(${r.gray200}, ${r.gray10})`,layer01:`light-dark(${r.gray10}, ${r.gray180})`,layerHover01:`light-dark(${r.gray20}, ${r.gray170})`,layerSelected01:`light-dark(${r.gray30}, ${r.gray160})`,layerSelectedHover01:`light-dark(${r.gray40}, ${r.gray150})`,layer02:`light-dark(${r.white}, ${r.gray160})`,layerHover02:`light-dark(${r.whiteHover}, ${r.gray150})`,layerSelected02:`light-dark(${r.gray30}, ${r.gray140})`,layerSelectedHover02:`light-dark(${r.gray40}, ${r.gray130})`,layerAccent01:`light-dark(${r.gray30}, ${r.gray160})`,layerAccentHover01:`light-dark(${r.gray40}, ${r.gray150})`,layerAccentSelected01:`light-dark(${r.gray50}, ${r.gray140})`,layerAccent02:`light-dark(${r.gray10}, ${r.gray180})`,layerAccentHover02:`light-dark(${r.gray20}, ${r.gray170})`,layerAccentSelected02:`light-dark(${r.gray30}, ${r.gray160})`,brandPrimary:`light-dark(${r.red100}, ${r.red100})`,borderStrong:`light-dark(${r.gray200}, ${r.gray10})`,borderMedium:`light-dark(${r.gray110}, ${r.gray90})`,borderSubtle:`light-dark(${r.gray50}, ${r.gray160})`,borderBrand:`light-dark(${r.blue170}, ${r.blue170})`,borderInvalid:`light-dark(${r.signalRed140}, ${r.signalRed140})`,borderDisabled:`light-dark(${r.gray50}, ${r.gray140})`,field01:`light-dark(${r.gray10}, ${r.gray180})`,fieldHover01:`light-dark(${r.gray20}, ${r.gray170})`,fieldActive01:`light-dark(${r.gray30}, ${r.gray160})`,field02:`light-dark(${r.white}, ${r.gray160})`,fieldHover02:`light-dark(${r.whiteHover}, ${r.gray150})`,fieldActive02:`light-dark(${r.gray30}, ${r.gray140})`,fieldDisabled:`light-dark(${r.gray10}, ${r.gray180})`,fieldSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,iconPrimary:`light-dark(${r.gray200}, ${r.gray10})`,iconSecondary:`light-dark(${r.blue170}, ${r.gray10})`,iconInverse:`light-dark(${r.white}, ${r.gray200})`,iconOnColor:`light-dark(${r.white}, ${r.white})`,iconDisabled:`light-dark(${r.gray50}, ${r.gray140})`,iconSuccess:`light-dark(${r.signalGreen140}, ${r.signalGreen140})`,iconInfo:`light-dark(${r.signalBlue140}, ${r.signalBlue140})`,iconWarning:`light-dark(${r.signalRed140}, ${r.signalRed140})`,iconImportant:`light-dark(${r.signalYellow140}, ${r.signalYellow140})`,linkEnabled:`light-dark(${r.blue100}, ${r.blue90})`,linkHover:`light-dark(${r.blue170}, ${r.blue80})`,linkPressed:`light-dark(${r.gray200}, ${r.blue60})`,linkVisited:`light-dark(${r.purple140}, ${r.purple80})`,notificationBorderSuccess:`light-dark(${r.signalGreen140}, ${r.signalGreen140})`,notificationBorderInfo:`light-dark(${r.signalBlue140}, ${r.signalBlue140})`,notificationBorderImportant:`light-dark(${r.signalYellow140}, ${r.signalYellow140})`,notificationBorderWarning:`light-dark(${r.signalRed140}, ${r.signalRed140})`,notificationBackgroundSuccess:`light-dark(${r.signalGreen20}, ${r.gray180})`,notificationBackgroundInfo:`light-dark(${r.signalBlue20}, ${r.gray180})`,notificationBackgroundImportant:`light-dark(${r.signalYellow20}, ${r.gray180})`,notificationBackgroundWarning:`light-dark(${r.signalRed20}, ${r.gray180})`,textPrimary:`light-dark(${r.gray200}, ${r.gray10})`,textSecondary:`light-dark(${r.gray140}, ${r.gray70})`,textTertiary:`light-dark(${r.blue170}, ${r.gray10})`,textOnColor:`light-dark(${r.white}, ${r.white})`,textInverse:`light-dark(${r.gray10}, ${r.gray200})`,textDisabled:`light-dark(${r.gray50}, ${r.gray140})`,textInvalid:`light-dark(${r.signalRed140}, ${r.signalRed140})`,textPlaceholder:`light-dark(${r.gray70}, ${r.gray140})`,buttonBackgroundPrimary:`light-dark(${r.blue170}, ${r.blue100})`,buttonBackgroundPrimaryHover:`light-dark(${r.blue140}, ${r.blue140})`,buttonBackgroundPrimaryActive:`light-dark(${r.blue100}, ${r.blue170})`,buttonBackgroundSecondary:`light-dark(${r.white}, ${r.gray200})`,buttonBackgroundSecondaryHover:`light-dark(${r.whiteHover}, ${r.gray190})`,buttonBackgroundSecondaryActive:`light-dark(${r.gray30}, ${r.gray180})`,buttonBackgroundTertiaryHover:`light-dark(${r.whiteHover}, ${r.gray190})`,buttonBackgroundTertiaryActive:`light-dark(${r.gray30}, ${r.gray180})`,buttonBackgroundDanger:`light-dark(${r.signalRed140}, ${r.signalRed140})`,buttonBackgroundDangerHover:`light-dark(${r.signalRed160}, ${r.signalRed160})`,buttonBackgroundDangerActive:`light-dark(${r.signalRed180}, ${r.signalRed180})`,buttonBackgroundDisabled:`light-dark(${r.gray10}, ${r.gray180})`,buttonBackgroundSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,buttonBorderSecondary:`light-dark(${r.blue170}, ${r.gray10})`,logoPrimary:`light-dark(${r.red100}, ${r.white})`},n={base:1,above:10,modal:1e3,toast:1100,skipToContent:1200},o=Object.freeze(Object.defineProperty({__proto__:null,baseColors:r,breakpoints:l,semantic:d,spacing:g,states:i,transitions:t,typography:a,windowSizes:e,zIndex:n},Symbol.toStringTag,{value:"Module"}));exports.baseColors=r;exports.breakpoints=l;exports.semantic=d;exports.spacing=g;exports.states=i;exports.tokens=o;exports.transitions=t;exports.typography=a;exports.windowSizes=e;exports.zIndex=n;