@midas-ds/components 7.1.0 → 8.1.0

package/{tokens-XrriCAqI.js → tokens-BWq37Xsh.js}

@@ -35,16 +35,19 @@ 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"
+  signalRed180: "#801313"
 }, a = {
   fontFamily: '"Inter", sans-serif',
   lineHeight01: 1,
@@ -94,7 +97,7 @@ const r = {
   weightBold: 700,
   weightExtraBold: 800,
   weightBlack: 900
-}, e = {
+}, g = {
   "01": "0.125rem",
   // 2px
   "02": "0.25rem",
@@ -119,24 +122,28 @@ const r = {
   // 80px
   12: "6rem"
   // 96px
-}, g = {
-  focus: "0 0 0 2px white, 0 0 0 4px black"
 }, 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: 767px)",
-  md: "(min-width: 768px)",
-  lg: "(min-width: 1200px)",
-  xl: "(min-width: 1440px)",
+  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)"
-}, l = {
-  background01: `light-dark(${r.white}, ${r.gray200})`,
-  backgroundHover01: `light-dark(${r.whiteHover}, ${r.gray190})`,
-  backgroundInverse01: `light-dark(${r.gray200}, ${r.gray10})`,
+}, 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})`,
@@ -152,14 +159,12 @@ 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})`,
-  borderSkeleton: `light-dark(${r.gray10}, ${r.gray180})`,
-  borderInverse: `light-dark(${r.white}, ${r.gray180})`,
   field01: `light-dark(${r.gray10}, ${r.gray180})`,
   fieldHover01: `light-dark(${r.gray20}, ${r.gray170})`,
   fieldActive01: `light-dark(${r.gray30}, ${r.gray160})`,
@@ -172,32 +177,32 @@ const r = {
   iconSecondary: `light-dark(${r.blue170}, ${r.gray10})`,
   iconInverse: `light-dark(${r.white}, ${r.gray200})`,
   iconOnColor: `light-dark(${r.white}, ${r.white})`,
-  iconDanger: `light-dark(${r.signalRed140}, ${r.signalRed140})`,
   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})`,
-  textBrand: `light-dark(${r.blue170}, ${r.gray10})`,
+  textTertiary: `light-dark(${r.blue170}, ${r.gray10})`,
   textOnColor: `light-dark(${r.white}, ${r.white})`,
   textInverse: `light-dark(${r.gray10}, ${r.gray200})`,
-  textSubtle: `light-dark(${r.gray90}, ${r.gray90})`,
   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,40 +212,40 @@ 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})`,
   buttonBackgroundSkeleton: `light-dark(${r.gray10}, ${r.gray180})`,
-  buttonBackgroundGhostHover: `light-dark(${r.whiteHover}, ${r.gray190})`,
-  buttonBackgroundGhostActive: `light-dark(${r.gray30}, ${r.gray190})`,
-  buttonBorderPrimary: `light-dark(${r.blue170}, ${r.gray10})`,
+  buttonBorderSecondary: `light-dark(${r.blue170}, ${r.gray10})`,
   logoPrimary: `light-dark(${r.red100}, ${r.white})`
-}, d = {
+}, n = {
   base: 1,
   above: 10,
   modal: 1e3,
   toast: 1100,
   skipToContent: 1200
-}, n = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, o = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   baseColors: r,
   breakpoints: t,
-  semantic: l,
-  spacing: e,
-  states: g,
-  transitions: i,
+  semantic: d,
+  spacing: g,
+  states: i,
+  transitions: l,
   typography: a,
-  zIndex: d
+  windowSizes: e,
+  zIndex: n
 }, Symbol.toStringTag, { value: "Module" }));
 export {
   a,
   r as b,
-  e as c,
-  g as d,
-  i as e,
+  g as c,
+  i as d,
+  l as e,
   t as f,
-  l as s,
-  n as t,
-  d as z
+  d as s,
+  o as t,
+  e as w,
+  n as z
 };

package/utils/useObserveElement.d.ts

@@ -1,4 +1,20 @@
-export default function useObserveElement(element: HTMLElement | null): {
+interface Options {
+    /**
+     * Get the observed elements size with or without padding
+     * @default false
+     */
+    includePadding?: boolean;
+    /**
+     * Time in ms between each size measure
+     * @default 500
+     */
+    delay?: number;
+}
+/**
+ * Observe an elements size change on resize
+ */
+export default function useObserveElement(element: HTMLElement | null, options?: Options): {
     width: number;
     height: number;
 };
+export {};

package/tokens-CG8BaZyJ.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"},e={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},a={"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"},g={focus:"0 0 0 2px white, 0 0 0 4px black"},i={slow:"500ms",normal:"300ms",fast:"250ms"},t={sm:"(max-width: 767px)",md:"(min-width: 768px)",lg:"(min-width: 1200px)",xl:"(min-width: 1440px)",forcedColorsMode:"(forced-colors: active)",darkMode:"(prefers-color-scheme: dark)",prefersReducedMotion:"(prefers-reduced-motion: reduced)"},l={background01:`light-dark(${r.white}, ${r.gray200})`,backgroundHover01:`light-dark(${r.whiteHover}, ${r.gray190})`,backgroundInverse01:`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})`,borderSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,borderInverse:`light-dark(${r.white}, ${r.gray180})`,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})`,iconDanger:`light-dark(${r.signalRed140}, ${r.signalRed140})`,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})`,textBrand:`light-dark(${r.blue170}, ${r.gray10})`,textOnColor:`light-dark(${r.white}, ${r.white})`,textInverse:`light-dark(${r.gray10}, ${r.gray200})`,textSubtle:`light-dark(${r.gray90}, ${r.gray90})`,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})`,buttonBackgroundGhostHover:`light-dark(${r.whiteHover}, ${r.gray190})`,buttonBackgroundGhostActive:`light-dark(${r.gray30}, ${r.gray190})`,buttonBorderPrimary:`light-dark(${r.blue170}, ${r.gray10})`,logoPrimary:`light-dark(${r.red100}, ${r.white})`},d={base:1,above:10,modal:1e3,toast:1100,skipToContent:1200},n=Object.freeze(Object.defineProperty({__proto__:null,baseColors:r,breakpoints:t,semantic:l,spacing:a,states:g,transitions:i,typography:e,zIndex:d},Symbol.toStringTag,{value:"Module"}));exports.baseColors=r;exports.breakpoints=t;exports.semantic=l;exports.spacing=a;exports.states=g;exports.tokens=n;exports.transitions=i;exports.typography=e;exports.zIndex=d;