@protonradio/proton-ui 0.12.5 → 0.12.6

package/dist/constants.d.ts

@@ -1,5 +1,7 @@
 export declare type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];
 
+export declare type BreakpointDirection = "up" | "down";
+
 export declare const BREAKPOINTS: {
     SMALL: number;
     MEDIUM: number;

package/dist/dark.d.ts

@@ -42,7 +42,6 @@ declare type ProtonPalette = {
     };
     PRIMARY: ProtonColorScale;
     SECONDARY: ProtonColorScale;
-    GRAYSCALE: ProtonColorScale;
 };
 
 declare interface ProtonStyleSheet {

package/dist/design/darkTheme/colors.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("../colors.cjs.js"),A="#f7f9fb",L=A,T="rgba(174, 175, 177, 0.21)",E={SUPER_DARK:"#111212",DARK:"#1e1f21",MEDIUM:"#232629",MEDIUM_LIGHT:"#2b2d30",LIGHT:"#43464a",LIGHTEST:"#63676b",SUPER_LIGHT:"#8a8e91",WHITE:A},D={SUPER_DARK:"#142736",DARK:"#22445d",MEDIUM:"#306082",MEDIUM_LIGHT:"#3e7ca8",LIGHT:"#5795c1",LIGHTEST:"#a2c4dd",SUPER_LIGHT:"#dae7f1",WHITE:A},I={BASE_COLOR:R.BACKGROUNDS.BLACK,BRAND:R.BRAND,GRAYSCALE:E,PRIMARY:R.BRAND_PRIMARY_SCALE,SECONDARY:D};exports.BORDER=L;exports.DARK_GRAYSCALE=E;exports.DARK_PALETTE=I;exports.DARK_SECONDARY=D;exports.ELEVATION=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("../colors.cjs.js"),A="#f7f9fb",D=A,T="rgba(174, 175, 177, 0.21)",I={SUPER_DARK:"#111212",DARK:"#1e1f21",MEDIUM:"#232629",MEDIUM_LIGHT:"#2b2d30",LIGHT:"#43464a",LIGHTEST:"#63676b",SUPER_LIGHT:"#8a8e91",WHITE:A},E={SUPER_DARK:"#142736",DARK:"#22445d",MEDIUM:"#306082",MEDIUM_LIGHT:"#3e7ca8",LIGHT:"#5795c1",LIGHTEST:"#a2c4dd",SUPER_LIGHT:"#dae7f1",WHITE:A},L={BASE_COLOR:R.BACKGROUNDS.BLACK,BRAND:R.BRAND,PRIMARY:R.BRAND_PRIMARY_SCALE,SECONDARY:E};exports.BORDER=D;exports.DARK_GRAYSCALE=I;exports.DARK_PALETTE=L;exports.DARK_SECONDARY=E;exports.ELEVATION=T;
 //# sourceMappingURL=colors.cjs.js.map

package/dist/design/darkTheme/colors.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.cjs.js","sources":["../../../src/design/darkTheme/colors.ts"],"sourcesContent":["import { BACKGROUNDS, BRAND, BRAND_PRIMARY_SCALE } from \"../colors\";\nimport type { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst WHITE = \"#f7f9fb\";\nexport const BORDER = WHITE;\nexport const ELEVATION = \"rgba(174, 175, 177, 0.21)\";\nexport const DARK_GRAYSCALE: ProtonColorScale = {\n  SUPER_DARK: \"#111212\",\n  DARK: \"#1e1f21\",\n  MEDIUM: \"#232629\",\n  MEDIUM_LIGHT: \"#2b2d30\",\n  LIGHT: \"#43464a\",\n  LIGHTEST: \"#63676b\",\n  SUPER_LIGHT: \"#8a8e91\",\n  WHITE: WHITE,\n};\n\nexport const DARK_SECONDARY = {\n  SUPER_DARK: \"#142736\",\n  DARK: \"#22445d\",\n  MEDIUM: \"#306082\",\n  MEDIUM_LIGHT: \"#3e7ca8\",\n  LIGHT: \"#5795c1\",\n  LIGHTEST: \"#a2c4dd\",\n  SUPER_LIGHT: \"#dae7f1\",\n  WHITE: WHITE,\n};\n\nexport const DARK_PALETTE: ProtonPalette = {\n  BASE_COLOR: BACKGROUNDS.BLACK,\n  BRAND,\n  GRAYSCALE: DARK_GRAYSCALE,\n  PRIMARY: BRAND_PRIMARY_SCALE,\n  SECONDARY: DARK_SECONDARY,\n} as const;\n"],"names":["WHITE","BORDER","ELEVATION","DARK_GRAYSCALE","DARK_SECONDARY","DARK_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":"oHAGMA,EAAQ,UACDC,EAASD,EACTE,EAAY,4BACZC,EAAmC,CAC9C,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAAH,CACF,EAEaI,EAAiB,CAC5B,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAAJ,CACF,EAEaK,EAA8B,CACzC,WAAYC,EAAAA,YAAY,MAAA,MACxBC,EAAAA,MACA,UAAWJ,EACX,QAASK,EAAAA,oBACT,UAAWJ,CACb"}
+{"version":3,"file":"colors.cjs.js","sources":["../../../src/design/darkTheme/colors.ts"],"sourcesContent":["import { BACKGROUNDS, BRAND, BRAND_PRIMARY_SCALE } from \"../colors\";\nimport type { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst WHITE = \"#f7f9fb\";\nexport const BORDER = WHITE;\nexport const ELEVATION = \"rgba(174, 175, 177, 0.21)\";\nexport const DARK_GRAYSCALE: ProtonColorScale = {\n  SUPER_DARK: \"#111212\",\n  DARK: \"#1e1f21\",\n  MEDIUM: \"#232629\",\n  MEDIUM_LIGHT: \"#2b2d30\",\n  LIGHT: \"#43464a\",\n  LIGHTEST: \"#63676b\",\n  SUPER_LIGHT: \"#8a8e91\",\n  WHITE: WHITE,\n};\n\nexport const DARK_SECONDARY = {\n  SUPER_DARK: \"#142736\",\n  DARK: \"#22445d\",\n  MEDIUM: \"#306082\",\n  MEDIUM_LIGHT: \"#3e7ca8\",\n  LIGHT: \"#5795c1\",\n  LIGHTEST: \"#a2c4dd\",\n  SUPER_LIGHT: \"#dae7f1\",\n  WHITE: WHITE,\n};\n\nexport const DARK_PALETTE: ProtonPalette = {\n  BASE_COLOR: BACKGROUNDS.BLACK,\n  BRAND,\n  PRIMARY: BRAND_PRIMARY_SCALE,\n  SECONDARY: DARK_SECONDARY,\n} as const;\n"],"names":["WHITE","BORDER","ELEVATION","DARK_GRAYSCALE","DARK_SECONDARY","DARK_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":"oHAGMA,EAAQ,UACDC,EAASD,EACTE,EAAY,4BACZC,EAAmC,CAC9C,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAAH,CACF,EAEaI,EAAiB,CAC5B,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAAJ,CACF,EAEaK,EAA8B,CACzC,WAAYC,EAAAA,YAAY,MAAA,MACxBC,EAAAA,MACA,QAASC,EAAAA,oBACT,UAAWJ,CACb"}

package/dist/design/darkTheme/colors.es.js

@@ -1,5 +1,5 @@
 import { BRAND_PRIMARY_SCALE as A, BRAND as E, BACKGROUNDS as D } from "../colors.es.js";
-const R = "#f7f9fb", S = R, _ = "rgba(174, 175, 177, 0.21)", I = {
+const R = "#f7f9fb", T = R, S = "rgba(174, 175, 177, 0.21)", _ = {
   SUPER_DARK: "#111212",
   DARK: "#1e1f21",
   MEDIUM: "#232629",
@@ -8,7 +8,7 @@ const R = "#f7f9fb", S = R, _ = "rgba(174, 175, 177, 0.21)", I = {
   LIGHTEST: "#63676b",
   SUPER_LIGHT: "#8a8e91",
   WHITE: R
-}, L = {
+}, I = {
   SUPER_DARK: "#142736",
   DARK: "#22445d",
   MEDIUM: "#306082",
@@ -20,15 +20,14 @@ const R = "#f7f9fb", S = R, _ = "rgba(174, 175, 177, 0.21)", I = {
 }, G = {
   BASE_COLOR: D.BLACK,
   BRAND: E,
-  GRAYSCALE: I,
   PRIMARY: A,
-  SECONDARY: L
+  SECONDARY: I
 };
 export {
-  S as BORDER,
-  I as DARK_GRAYSCALE,
+  T as BORDER,
+  _ as DARK_GRAYSCALE,
   G as DARK_PALETTE,
-  L as DARK_SECONDARY,
-  _ as ELEVATION
+  I as DARK_SECONDARY,
+  S as ELEVATION
 };
 //# sourceMappingURL=colors.es.js.map

package/dist/design/darkTheme/colors.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.es.js","sources":["../../../src/design/darkTheme/colors.ts"],"sourcesContent":["import { BACKGROUNDS, BRAND, BRAND_PRIMARY_SCALE } from \"../colors\";\nimport type { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst WHITE = \"#f7f9fb\";\nexport const BORDER = WHITE;\nexport const ELEVATION = \"rgba(174, 175, 177, 0.21)\";\nexport const DARK_GRAYSCALE: ProtonColorScale = {\n  SUPER_DARK: \"#111212\",\n  DARK: \"#1e1f21\",\n  MEDIUM: \"#232629\",\n  MEDIUM_LIGHT: \"#2b2d30\",\n  LIGHT: \"#43464a\",\n  LIGHTEST: \"#63676b\",\n  SUPER_LIGHT: \"#8a8e91\",\n  WHITE: WHITE,\n};\n\nexport const DARK_SECONDARY = {\n  SUPER_DARK: \"#142736\",\n  DARK: \"#22445d\",\n  MEDIUM: \"#306082\",\n  MEDIUM_LIGHT: \"#3e7ca8\",\n  LIGHT: \"#5795c1\",\n  LIGHTEST: \"#a2c4dd\",\n  SUPER_LIGHT: \"#dae7f1\",\n  WHITE: WHITE,\n};\n\nexport const DARK_PALETTE: ProtonPalette = {\n  BASE_COLOR: BACKGROUNDS.BLACK,\n  BRAND,\n  GRAYSCALE: DARK_GRAYSCALE,\n  PRIMARY: BRAND_PRIMARY_SCALE,\n  SECONDARY: DARK_SECONDARY,\n} as const;\n"],"names":["WHITE","BORDER","ELEVATION","DARK_GRAYSCALE","DARK_SECONDARY","DARK_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":";AAGA,MAAMA,IAAQ,WACDC,IAASD,GACTE,IAAY,6BACZC,IAAmC;AAAA,EAC9C,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAAH;AACF,GAEaI,IAAiB;AAAA,EAC5B,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAAJ;AACF,GAEaK,IAA8B;AAAA,EACzC,YAAYC,EAAY;AAAA,EACxB,OAAAC;AAAA,EACA,WAAWJ;AAAA,EACX,SAASK;AAAA,EACT,WAAWJ;AACb;"}
+{"version":3,"file":"colors.es.js","sources":["../../../src/design/darkTheme/colors.ts"],"sourcesContent":["import { BACKGROUNDS, BRAND, BRAND_PRIMARY_SCALE } from \"../colors\";\nimport type { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst WHITE = \"#f7f9fb\";\nexport const BORDER = WHITE;\nexport const ELEVATION = \"rgba(174, 175, 177, 0.21)\";\nexport const DARK_GRAYSCALE: ProtonColorScale = {\n  SUPER_DARK: \"#111212\",\n  DARK: \"#1e1f21\",\n  MEDIUM: \"#232629\",\n  MEDIUM_LIGHT: \"#2b2d30\",\n  LIGHT: \"#43464a\",\n  LIGHTEST: \"#63676b\",\n  SUPER_LIGHT: \"#8a8e91\",\n  WHITE: WHITE,\n};\n\nexport const DARK_SECONDARY = {\n  SUPER_DARK: \"#142736\",\n  DARK: \"#22445d\",\n  MEDIUM: \"#306082\",\n  MEDIUM_LIGHT: \"#3e7ca8\",\n  LIGHT: \"#5795c1\",\n  LIGHTEST: \"#a2c4dd\",\n  SUPER_LIGHT: \"#dae7f1\",\n  WHITE: WHITE,\n};\n\nexport const DARK_PALETTE: ProtonPalette = {\n  BASE_COLOR: BACKGROUNDS.BLACK,\n  BRAND,\n  PRIMARY: BRAND_PRIMARY_SCALE,\n  SECONDARY: DARK_SECONDARY,\n} as const;\n"],"names":["WHITE","BORDER","ELEVATION","DARK_GRAYSCALE","DARK_SECONDARY","DARK_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":";AAGA,MAAMA,IAAQ,WACDC,IAASD,GACTE,IAAY,6BACZC,IAAmC;AAAA,EAC9C,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAAH;AACF,GAEaI,IAAiB;AAAA,EAC5B,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAAJ;AACF,GAEaK,IAA8B;AAAA,EACzC,YAAYC,EAAY;AAAA,EACxB,OAAAC;AAAA,EACA,SAASC;AAAA,EACT,WAAWJ;AACb;"}

package/dist/design/generateStylesheet.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"generateStylesheet.cjs.js","sources":["../../src/design/generateStylesheet.ts"],"sourcesContent":["import { THEMES } from \"./theme\";\nimport { ProtonPalette } from \"./types\";\nimport { LIGHT_STYLESHEET } from \"./lightTheme/stylesheet\";\nimport { DARK_STYLESHEET } from \"./darkTheme/stylesheet\";\nimport { ProtonStyleSheet } from \"./types\";\n\nexport const generateStylesheet = (\n  palette: ProtonPalette,\n  theme: string\n): ProtonStyleSheet => {\n  const themeVariables =\n    theme === THEMES.DARK ? DARK_STYLESHEET : LIGHT_STYLESHEET;\n\n  if (palette) {\n    const customVars = generateCustomStylesheet(palette);\n    return {\n      ...themeVariables,\n      ...customVars,\n    };\n  }\n\n  return themeVariables;\n};\n\n//overrride theme colors in stylesheet\nconst generateCustomStylesheet = (\n  palette: ProtonPalette\n): Partial<ProtonStyleSheet> => {\n  return {\n    \"--proton-color__primary\": palette.BRAND.PRIMARY,\n    \"--proton-color__primary-light\": palette.BRAND.PRIMARY_LIGHT,\n    \"--proton-color__primary-super-light\": palette.BRAND.PRIMARY_SUPER_LIGHT,\n    \"--proton-color__secondary\": palette.BRAND.SECONDARY,\n    \"--proton-color__secondary-light\": palette.BRAND.SECONDARY_LIGHT,\n    \"--proton-color__secondary-super-light\":\n      palette.BRAND.SECONDARY_SUPER_LIGHT,\n\n    //TODO: add newly generated grayscale color scale\n  };\n};\n"],"names":["generateStylesheet","palette","theme","themeVariables","THEMES","DARK_STYLESHEET","LIGHT_STYLESHEET","customVars","generateCustomStylesheet"],"mappings":"yMAMaA,EAAqB,CAChCC,EACAC,IACqB,CACrB,MAAMC,EACJD,IAAUE,EAAAA,OAAO,KAAOC,EAAAA,gBAAkBC,EAAAA,iBAE5C,GAAIL,EAAS,CACX,MAAMM,EAAaC,EAAyBP,CAAO,EACnD,MAAO,CACL,GAAGE,EACH,GAAGI,CAAA,CAEP,CAEA,OAAOJ,CACT,EAGMK,EACJP,IAEO,CACL,0BAA2BA,EAAQ,MAAM,QACzC,gCAAiCA,EAAQ,MAAM,cAC/C,sCAAuCA,EAAQ,MAAM,oBACrD,4BAA6BA,EAAQ,MAAM,UAC3C,kCAAmCA,EAAQ,MAAM,gBACjD,wCACEA,EAAQ,MAAM,qBAAA"}
+{"version":3,"file":"generateStylesheet.cjs.js","sources":["../../src/design/generateStylesheet.ts"],"sourcesContent":["import { THEMES } from \"./theme\";\nimport { ProtonPalette } from \"./types\";\nimport { LIGHT_STYLESHEET } from \"./lightTheme/stylesheet\";\nimport { DARK_STYLESHEET } from \"./darkTheme/stylesheet\";\nimport { ProtonStyleSheet } from \"./types\";\n\nexport const generateStylesheet = (\n  palette: ProtonPalette,\n  theme: string\n): ProtonStyleSheet => {\n  const themeVariables =\n    theme === THEMES.DARK ? DARK_STYLESHEET : LIGHT_STYLESHEET;\n\n  if (palette) {\n    const customVars = generateCustomStylesheet(palette);\n    return {\n      ...themeVariables,\n      ...customVars,\n    };\n  }\n\n  return themeVariables;\n};\n\n//overrride theme colors in stylesheet\nconst generateCustomStylesheet = (\n  palette: ProtonPalette\n): Partial<ProtonStyleSheet> => {\n  return {\n    \"--proton-color__primary\": palette.BRAND.PRIMARY,\n    \"--proton-color__primary-light\": palette.BRAND.PRIMARY_LIGHT,\n    \"--proton-color__primary-super-light\": palette.BRAND.PRIMARY_SUPER_LIGHT,\n    \"--proton-color__secondary\": palette.BRAND.SECONDARY,\n    \"--proton-color__secondary-light\": palette.BRAND.SECONDARY_LIGHT,\n    \"--proton-color__secondary-super-light\":\n      palette.BRAND.SECONDARY_SUPER_LIGHT,\n  };\n};\n"],"names":["generateStylesheet","palette","theme","themeVariables","THEMES","DARK_STYLESHEET","LIGHT_STYLESHEET","customVars","generateCustomStylesheet"],"mappings":"yMAMaA,EAAqB,CAChCC,EACAC,IACqB,CACrB,MAAMC,EACJD,IAAUE,EAAAA,OAAO,KAAOC,EAAAA,gBAAkBC,EAAAA,iBAE5C,GAAIL,EAAS,CACX,MAAMM,EAAaC,EAAyBP,CAAO,EACnD,MAAO,CACL,GAAGE,EACH,GAAGI,CAAA,CAEP,CAEA,OAAOJ,CACT,EAGMK,EACJP,IAEO,CACL,0BAA2BA,EAAQ,MAAM,QACzC,gCAAiCA,EAAQ,MAAM,cAC/C,sCAAuCA,EAAQ,MAAM,oBACrD,4BAA6BA,EAAQ,MAAM,UAC3C,kCAAmCA,EAAQ,MAAM,gBACjD,wCACEA,EAAQ,MAAM,qBAAA"}

package/dist/design/generateStylesheet.es.js

@@ -18,7 +18,6 @@ const i = (o, _) => {
   "--proton-color__secondary": o.BRAND.SECONDARY,
   "--proton-color__secondary-light": o.BRAND.SECONDARY_LIGHT,
   "--proton-color__secondary-super-light": o.BRAND.SECONDARY_SUPER_LIGHT
-  //TODO: add newly generated grayscale color scale
 });
 export {
   i as generateStylesheet

package/dist/design/generateStylesheet.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"generateStylesheet.es.js","sources":["../../src/design/generateStylesheet.ts"],"sourcesContent":["import { THEMES } from \"./theme\";\nimport { ProtonPalette } from \"./types\";\nimport { LIGHT_STYLESHEET } from \"./lightTheme/stylesheet\";\nimport { DARK_STYLESHEET } from \"./darkTheme/stylesheet\";\nimport { ProtonStyleSheet } from \"./types\";\n\nexport const generateStylesheet = (\n  palette: ProtonPalette,\n  theme: string\n): ProtonStyleSheet => {\n  const themeVariables =\n    theme === THEMES.DARK ? DARK_STYLESHEET : LIGHT_STYLESHEET;\n\n  if (palette) {\n    const customVars = generateCustomStylesheet(palette);\n    return {\n      ...themeVariables,\n      ...customVars,\n    };\n  }\n\n  return themeVariables;\n};\n\n//overrride theme colors in stylesheet\nconst generateCustomStylesheet = (\n  palette: ProtonPalette\n): Partial<ProtonStyleSheet> => {\n  return {\n    \"--proton-color__primary\": palette.BRAND.PRIMARY,\n    \"--proton-color__primary-light\": palette.BRAND.PRIMARY_LIGHT,\n    \"--proton-color__primary-super-light\": palette.BRAND.PRIMARY_SUPER_LIGHT,\n    \"--proton-color__secondary\": palette.BRAND.SECONDARY,\n    \"--proton-color__secondary-light\": palette.BRAND.SECONDARY_LIGHT,\n    \"--proton-color__secondary-super-light\":\n      palette.BRAND.SECONDARY_SUPER_LIGHT,\n\n    //TODO: add newly generated grayscale color scale\n  };\n};\n"],"names":["generateStylesheet","palette","theme","themeVariables","THEMES","DARK_STYLESHEET","LIGHT_STYLESHEET","customVars","generateCustomStylesheet"],"mappings":";;;AAMO,MAAMA,IAAqB,CAChCC,GACAC,MACqB;AACrB,QAAMC,IACJD,MAAUE,EAAO,OAAOC,IAAkBC;AAE5C,MAAIL,GAAS;AACX,UAAMM,IAAaC,EAAyBP,CAAO;AACnD,WAAO;AAAA,MACL,GAAGE;AAAA,MACH,GAAGI;AAAA,IAAA;AAAA,EAEP;AAEA,SAAOJ;AACT,GAGMK,IAA2B,CAC/BP,OAEO;AAAA,EACL,2BAA2BA,EAAQ,MAAM;AAAA,EACzC,iCAAiCA,EAAQ,MAAM;AAAA,EAC/C,uCAAuCA,EAAQ,MAAM;AAAA,EACrD,6BAA6BA,EAAQ,MAAM;AAAA,EAC3C,mCAAmCA,EAAQ,MAAM;AAAA,EACjD,yCACEA,EAAQ,MAAM;AAAA;AAAA;"}
+{"version":3,"file":"generateStylesheet.es.js","sources":["../../src/design/generateStylesheet.ts"],"sourcesContent":["import { THEMES } from \"./theme\";\nimport { ProtonPalette } from \"./types\";\nimport { LIGHT_STYLESHEET } from \"./lightTheme/stylesheet\";\nimport { DARK_STYLESHEET } from \"./darkTheme/stylesheet\";\nimport { ProtonStyleSheet } from \"./types\";\n\nexport const generateStylesheet = (\n  palette: ProtonPalette,\n  theme: string\n): ProtonStyleSheet => {\n  const themeVariables =\n    theme === THEMES.DARK ? DARK_STYLESHEET : LIGHT_STYLESHEET;\n\n  if (palette) {\n    const customVars = generateCustomStylesheet(palette);\n    return {\n      ...themeVariables,\n      ...customVars,\n    };\n  }\n\n  return themeVariables;\n};\n\n//overrride theme colors in stylesheet\nconst generateCustomStylesheet = (\n  palette: ProtonPalette\n): Partial<ProtonStyleSheet> => {\n  return {\n    \"--proton-color__primary\": palette.BRAND.PRIMARY,\n    \"--proton-color__primary-light\": palette.BRAND.PRIMARY_LIGHT,\n    \"--proton-color__primary-super-light\": palette.BRAND.PRIMARY_SUPER_LIGHT,\n    \"--proton-color__secondary\": palette.BRAND.SECONDARY,\n    \"--proton-color__secondary-light\": palette.BRAND.SECONDARY_LIGHT,\n    \"--proton-color__secondary-super-light\":\n      palette.BRAND.SECONDARY_SUPER_LIGHT,\n  };\n};\n"],"names":["generateStylesheet","palette","theme","themeVariables","THEMES","DARK_STYLESHEET","LIGHT_STYLESHEET","customVars","generateCustomStylesheet"],"mappings":";;;AAMO,MAAMA,IAAqB,CAChCC,GACAC,MACqB;AACrB,QAAMC,IACJD,MAAUE,EAAO,OAAOC,IAAkBC;AAE5C,MAAIL,GAAS;AACX,UAAMM,IAAaC,EAAyBP,CAAO;AACnD,WAAO;AAAA,MACL,GAAGE;AAAA,MACH,GAAGI;AAAA,IAAA;AAAA,EAEP;AAEA,SAAOJ;AACT,GAGMK,IAA2B,CAC/BP,OAEO;AAAA,EACL,2BAA2BA,EAAQ,MAAM;AAAA,EACzC,iCAAiCA,EAAQ,MAAM;AAAA,EAC/C,uCAAuCA,EAAQ,MAAM;AAAA,EACrD,6BAA6BA,EAAQ,MAAM;AAAA,EAC3C,mCAAmCA,EAAQ,MAAM;AAAA,EACjD,yCACEA,EAAQ,MAAM;AAAA;"}

package/dist/design/lightTheme/colors.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("../colors.cjs.js"),D="#DDDDDD",I=D,A="#F7F8F9",R={SUPER_DARK:"#141211",DARK:"#4D4D4D",MEDIUM:"#7D7D7D",MEDIUM_LIGHT:"#B1B1B1",LIGHT:D,LIGHTEST:"#F0F1F2",SUPER_LIGHT:A,WHITE:"#FFFFFF"},T={SUPER_DARK:"#032026",DARK:"#084657",MEDIUM:"#2085BA",MEDIUM_LIGHT:"#44A8EB",LIGHT:"#70B9F6",LIGHTEST:"#9DCBFC",SUPER_LIGHT:"#C8DFFF",WHITE:"#f5f9ff"},L={BASE_COLOR:E.BACKGROUNDS.WHITE,BRAND:E.BRAND,GRAYSCALE:R,PRIMARY:E.BRAND_PRIMARY_SCALE,SECONDARY:T};exports.BORDER=I;exports.ELEVATION=A;exports.LIGHT_GRAYSCALE=R;exports.LIGHT_PALETTE=L;exports.LIGHT_SECONDARY_SCALE=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("../colors.cjs.js"),D="#DDDDDD",T=D,A="#F7F8F9",I={SUPER_DARK:"#141211",DARK:"#4D4D4D",MEDIUM:"#7D7D7D",MEDIUM_LIGHT:"#B1B1B1",LIGHT:D,LIGHTEST:"#F0F1F2",SUPER_LIGHT:A,WHITE:"#FFFFFF"},R={SUPER_DARK:"#032026",DARK:"#084657",MEDIUM:"#2085BA",MEDIUM_LIGHT:"#44A8EB",LIGHT:"#70B9F6",LIGHTEST:"#9DCBFC",SUPER_LIGHT:"#C8DFFF",WHITE:"#f5f9ff"},L={BASE_COLOR:E.BACKGROUNDS.WHITE,BRAND:E.BRAND,PRIMARY:E.BRAND_PRIMARY_SCALE,SECONDARY:R};exports.BORDER=T;exports.ELEVATION=A;exports.LIGHT_GRAYSCALE=I;exports.LIGHT_PALETTE=L;exports.LIGHT_SECONDARY_SCALE=R;
 //# sourceMappingURL=colors.cjs.js.map

package/dist/design/lightTheme/colors.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.cjs.js","sources":["../../../src/design/lightTheme/colors.ts"],"sourcesContent":["import {\n  BACKGROUNDS,\n  BRAND,\n  BRAND_PRIMARY_SCALE,\n} from \"../colors\";\nimport { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst LIGHT_GRAY = \"#DDDDDD\";\nexport const BORDER = LIGHT_GRAY;\nexport const ELEVATION = \"#F7F8F9\";\nexport const LIGHT_GRAYSCALE: ProtonColorScale = {\n  SUPER_DARK: \"#141211\",\n  DARK: \"#4D4D4D\",\n  MEDIUM: \"#7D7D7D\",\n  MEDIUM_LIGHT: \"#B1B1B1\",\n  LIGHT: LIGHT_GRAY,\n  LIGHTEST: \"#F0F1F2\",\n  SUPER_LIGHT: ELEVATION,\n  WHITE: \"#FFFFFF\",\n};\n\nexport const LIGHT_SECONDARY_SCALE: ProtonColorScale = {\n  SUPER_DARK: \"#032026\",\n  DARK: \"#084657\",\n  MEDIUM: \"#2085BA\",\n  MEDIUM_LIGHT: \"#44A8EB\",\n  LIGHT: \"#70B9F6\",\n  LIGHTEST: \"#9DCBFC\",\n  SUPER_LIGHT: \"#C8DFFF\",\n  WHITE: \"#f5f9ff\",\n};\n\nexport const LIGHT_PALETTE: ProtonPalette = {\n  BASE_COLOR: BACKGROUNDS.WHITE,\n  BRAND,\n  GRAYSCALE: LIGHT_GRAYSCALE,\n  PRIMARY: BRAND_PRIMARY_SCALE,\n  SECONDARY: LIGHT_SECONDARY_SCALE,\n};\n"],"names":["LIGHT_GRAY","BORDER","ELEVATION","LIGHT_GRAYSCALE","LIGHT_SECONDARY_SCALE","LIGHT_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":"oHAOMA,EAAa,UACNC,EAASD,EACTE,EAAY,UACZC,EAAoC,CAC/C,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAOH,EACP,SAAU,UACV,YAAaE,EACb,MAAO,SACT,EAEaE,EAA0C,CACrD,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAO,SACT,EAEaC,EAA+B,CAC1C,WAAYC,EAAAA,YAAY,MAAA,MACxBC,EAAAA,MACA,UAAWJ,EACX,QAASK,EAAAA,oBACT,UAAWJ,CACb"}
+{"version":3,"file":"colors.cjs.js","sources":["../../../src/design/lightTheme/colors.ts"],"sourcesContent":["import {\n  BACKGROUNDS,\n  BRAND,\n  BRAND_PRIMARY_SCALE,\n} from \"../colors\";\nimport { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst LIGHT_GRAY = \"#DDDDDD\";\nexport const BORDER = LIGHT_GRAY;\nexport const ELEVATION = \"#F7F8F9\";\nexport const LIGHT_GRAYSCALE: ProtonColorScale = {\n  SUPER_DARK: \"#141211\",\n  DARK: \"#4D4D4D\",\n  MEDIUM: \"#7D7D7D\",\n  MEDIUM_LIGHT: \"#B1B1B1\",\n  LIGHT: LIGHT_GRAY,\n  LIGHTEST: \"#F0F1F2\",\n  SUPER_LIGHT: ELEVATION,\n  WHITE: \"#FFFFFF\",\n};\n\nexport const LIGHT_SECONDARY_SCALE: ProtonColorScale = {\n  SUPER_DARK: \"#032026\",\n  DARK: \"#084657\",\n  MEDIUM: \"#2085BA\",\n  MEDIUM_LIGHT: \"#44A8EB\",\n  LIGHT: \"#70B9F6\",\n  LIGHTEST: \"#9DCBFC\",\n  SUPER_LIGHT: \"#C8DFFF\",\n  WHITE: \"#f5f9ff\",\n};\n\nexport const LIGHT_PALETTE: ProtonPalette = {\n  BASE_COLOR: BACKGROUNDS.WHITE,\n  BRAND,\n  PRIMARY: BRAND_PRIMARY_SCALE,\n  SECONDARY: LIGHT_SECONDARY_SCALE,\n};\n"],"names":["LIGHT_GRAY","BORDER","ELEVATION","LIGHT_GRAYSCALE","LIGHT_SECONDARY_SCALE","LIGHT_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":"oHAOMA,EAAa,UACNC,EAASD,EACTE,EAAY,UACZC,EAAoC,CAC/C,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAOH,EACP,SAAU,UACV,YAAaE,EACb,MAAO,SACT,EAEaE,EAA0C,CACrD,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAO,SACT,EAEaC,EAA+B,CAC1C,WAAYC,EAAAA,YAAY,MAAA,MACxBC,EAAAA,MACA,QAASC,EAAAA,oBACT,UAAWJ,CACb"}

package/dist/design/lightTheme/colors.es.js

@@ -1,14 +1,14 @@
-import { BRAND_PRIMARY_SCALE as E, BRAND as A, BACKGROUNDS as R } from "../colors.es.js";
-const D = "#DDDDDD", G = D, I = "#F7F8F9", T = {
+import { BRAND_PRIMARY_SCALE as E, BRAND as I, BACKGROUNDS as R } from "../colors.es.js";
+const D = "#DDDDDD", F = D, A = "#F7F8F9", G = {
   SUPER_DARK: "#141211",
   DARK: "#4D4D4D",
   MEDIUM: "#7D7D7D",
   MEDIUM_LIGHT: "#B1B1B1",
   LIGHT: D,
   LIGHTEST: "#F0F1F2",
-  SUPER_LIGHT: I,
+  SUPER_LIGHT: A,
   WHITE: "#FFFFFF"
-}, L = {
+}, T = {
   SUPER_DARK: "#032026",
   DARK: "#084657",
   MEDIUM: "#2085BA",
@@ -19,16 +19,15 @@ const D = "#DDDDDD", G = D, I = "#F7F8F9", T = {
   WHITE: "#f5f9ff"
 }, H = {
   BASE_COLOR: R.WHITE,
-  BRAND: A,
-  GRAYSCALE: T,
+  BRAND: I,
   PRIMARY: E,
-  SECONDARY: L
+  SECONDARY: T
 };
 export {
-  G as BORDER,
-  I as ELEVATION,
-  T as LIGHT_GRAYSCALE,
+  F as BORDER,
+  A as ELEVATION,
+  G as LIGHT_GRAYSCALE,
   H as LIGHT_PALETTE,
-  L as LIGHT_SECONDARY_SCALE
+  T as LIGHT_SECONDARY_SCALE
 };
 //# sourceMappingURL=colors.es.js.map

package/dist/design/lightTheme/colors.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.es.js","sources":["../../../src/design/lightTheme/colors.ts"],"sourcesContent":["import {\n  BACKGROUNDS,\n  BRAND,\n  BRAND_PRIMARY_SCALE,\n} from \"../colors\";\nimport { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst LIGHT_GRAY = \"#DDDDDD\";\nexport const BORDER = LIGHT_GRAY;\nexport const ELEVATION = \"#F7F8F9\";\nexport const LIGHT_GRAYSCALE: ProtonColorScale = {\n  SUPER_DARK: \"#141211\",\n  DARK: \"#4D4D4D\",\n  MEDIUM: \"#7D7D7D\",\n  MEDIUM_LIGHT: \"#B1B1B1\",\n  LIGHT: LIGHT_GRAY,\n  LIGHTEST: \"#F0F1F2\",\n  SUPER_LIGHT: ELEVATION,\n  WHITE: \"#FFFFFF\",\n};\n\nexport const LIGHT_SECONDARY_SCALE: ProtonColorScale = {\n  SUPER_DARK: \"#032026\",\n  DARK: \"#084657\",\n  MEDIUM: \"#2085BA\",\n  MEDIUM_LIGHT: \"#44A8EB\",\n  LIGHT: \"#70B9F6\",\n  LIGHTEST: \"#9DCBFC\",\n  SUPER_LIGHT: \"#C8DFFF\",\n  WHITE: \"#f5f9ff\",\n};\n\nexport const LIGHT_PALETTE: ProtonPalette = {\n  BASE_COLOR: BACKGROUNDS.WHITE,\n  BRAND,\n  GRAYSCALE: LIGHT_GRAYSCALE,\n  PRIMARY: BRAND_PRIMARY_SCALE,\n  SECONDARY: LIGHT_SECONDARY_SCALE,\n};\n"],"names":["LIGHT_GRAY","BORDER","ELEVATION","LIGHT_GRAYSCALE","LIGHT_SECONDARY_SCALE","LIGHT_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":";AAOA,MAAMA,IAAa,WACNC,IAASD,GACTE,IAAY,WACZC,IAAoC;AAAA,EAC/C,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAOH;AAAA,EACP,UAAU;AAAA,EACV,aAAaE;AAAA,EACb,OAAO;AACT,GAEaE,IAA0C;AAAA,EACrD,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAO;AACT,GAEaC,IAA+B;AAAA,EAC1C,YAAYC,EAAY;AAAA,EACxB,OAAAC;AAAA,EACA,WAAWJ;AAAA,EACX,SAASK;AAAA,EACT,WAAWJ;AACb;"}
+{"version":3,"file":"colors.es.js","sources":["../../../src/design/lightTheme/colors.ts"],"sourcesContent":["import {\n  BACKGROUNDS,\n  BRAND,\n  BRAND_PRIMARY_SCALE,\n} from \"../colors\";\nimport { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst LIGHT_GRAY = \"#DDDDDD\";\nexport const BORDER = LIGHT_GRAY;\nexport const ELEVATION = \"#F7F8F9\";\nexport const LIGHT_GRAYSCALE: ProtonColorScale = {\n  SUPER_DARK: \"#141211\",\n  DARK: \"#4D4D4D\",\n  MEDIUM: \"#7D7D7D\",\n  MEDIUM_LIGHT: \"#B1B1B1\",\n  LIGHT: LIGHT_GRAY,\n  LIGHTEST: \"#F0F1F2\",\n  SUPER_LIGHT: ELEVATION,\n  WHITE: \"#FFFFFF\",\n};\n\nexport const LIGHT_SECONDARY_SCALE: ProtonColorScale = {\n  SUPER_DARK: \"#032026\",\n  DARK: \"#084657\",\n  MEDIUM: \"#2085BA\",\n  MEDIUM_LIGHT: \"#44A8EB\",\n  LIGHT: \"#70B9F6\",\n  LIGHTEST: \"#9DCBFC\",\n  SUPER_LIGHT: \"#C8DFFF\",\n  WHITE: \"#f5f9ff\",\n};\n\nexport const LIGHT_PALETTE: ProtonPalette = {\n  BASE_COLOR: BACKGROUNDS.WHITE,\n  BRAND,\n  PRIMARY: BRAND_PRIMARY_SCALE,\n  SECONDARY: LIGHT_SECONDARY_SCALE,\n};\n"],"names":["LIGHT_GRAY","BORDER","ELEVATION","LIGHT_GRAYSCALE","LIGHT_SECONDARY_SCALE","LIGHT_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":";AAOA,MAAMA,IAAa,WACNC,IAASD,GACTE,IAAY,WACZC,IAAoC;AAAA,EAC/C,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAOH;AAAA,EACP,UAAU;AAAA,EACV,aAAaE;AAAA,EACb,OAAO;AACT,GAEaE,IAA0C;AAAA,EACrD,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAO;AACT,GAEaC,IAA+B;AAAA,EAC1C,YAAYC,EAAY;AAAA,EACxB,OAAAC;AAAA,EACA,SAASC;AAAA,EACT,WAAWJ;AACb;"}

package/dist/hooks/useBreakpoint.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.cjs.js","sources":["../../src/hooks/useBreakpoint.tsx"],"sourcesContent":["import { useCallback, useSyncExternalStore } from \"react\";\nimport { Breakpoint } from \"../constants\";\n\ntype BreakpointDirection = \"up\" | \"down\";\n\nexport function useBreakpoint(\n  breakpoint: Breakpoint,\n  direction: BreakpointDirection = \"down\",\n): boolean {\n  const query =\n    direction === \"down\"\n      ? `(max-width: ${breakpoint}px)`\n      : `(min-width: ${breakpoint}px)`;\n\n  const subscribe = useCallback(\n    (callback: () => void) => {\n      const mql = window.matchMedia(query);\n      mql.addEventListener(\"change\", callback);\n      return () => mql.removeEventListener(\"change\", callback);\n    },\n    [query],\n  );\n\n  const getSnapshot = useCallback(\n    () => window.matchMedia(query).matches,\n    [query],\n  );\n\n  return useSyncExternalStore(subscribe, getSnapshot, () => direction === \"up\");\n}\n"],"names":["useBreakpoint","breakpoint","direction","query","subscribe","useCallback","callback","mql","getSnapshot","useSyncExternalStore"],"mappings":"yGAKO,SAASA,EACdC,EACAC,EAAiC,OACxB,CACT,MAAMC,EACJD,IAAc,OACV,eAAeD,CAAU,MACzB,eAAeA,CAAU,MAEzBG,EAAYC,EAAAA,YACfC,GAAyB,CACxB,MAAMC,EAAM,OAAO,WAAWJ,CAAK,EACnC,OAAAI,EAAI,iBAAiB,SAAUD,CAAQ,EAChC,IAAMC,EAAI,oBAAoB,SAAUD,CAAQ,CACzD,EACA,CAACH,CAAK,CAAA,EAGFK,EAAcH,EAAAA,YAClB,IAAM,OAAO,WAAWF,CAAK,EAAE,QAC/B,CAACA,CAAK,CAAA,EAGR,OAAOM,EAAAA,qBAAqBL,EAAWI,EAAa,IAAMN,IAAc,IAAI,CAC9E"}
+{"version":3,"file":"useBreakpoint.cjs.js","sources":["../../src/hooks/useBreakpoint.tsx"],"sourcesContent":["import { useCallback, useSyncExternalStore } from \"react\";\nimport type { Breakpoint, BreakpointDirection } from \"../constants\";\n\nexport function useBreakpoint(\n  breakpoint: Breakpoint,\n  direction: BreakpointDirection = \"down\",\n): boolean {\n  const query =\n    direction === \"down\"\n      ? `(max-width: ${breakpoint}px)`\n      : `(min-width: ${breakpoint}px)`;\n\n  const subscribe = useCallback(\n    (callback: () => void) => {\n      const mql = window.matchMedia(query);\n      mql.addEventListener(\"change\", callback);\n      return () => mql.removeEventListener(\"change\", callback);\n    },\n    [query],\n  );\n\n  const getSnapshot = useCallback(\n    () => window.matchMedia(query).matches,\n    [query],\n  );\n\n  return useSyncExternalStore(subscribe, getSnapshot, () => direction === \"up\");\n}\n"],"names":["useBreakpoint","breakpoint","direction","query","subscribe","useCallback","callback","mql","getSnapshot","useSyncExternalStore"],"mappings":"yGAGO,SAASA,EACdC,EACAC,EAAiC,OACxB,CACT,MAAMC,EACJD,IAAc,OACV,eAAeD,CAAU,MACzB,eAAeA,CAAU,MAEzBG,EAAYC,EAAAA,YACfC,GAAyB,CACxB,MAAMC,EAAM,OAAO,WAAWJ,CAAK,EACnC,OAAAI,EAAI,iBAAiB,SAAUD,CAAQ,EAChC,IAAMC,EAAI,oBAAoB,SAAUD,CAAQ,CACzD,EACA,CAACH,CAAK,CAAA,EAGFK,EAAcH,EAAAA,YAClB,IAAM,OAAO,WAAWF,CAAK,EAAE,QAC/B,CAACA,CAAK,CAAA,EAGR,OAAOM,EAAAA,qBAAqBL,EAAWI,EAAa,IAAMN,IAAc,IAAI,CAC9E"}

package/dist/hooks/useBreakpoint.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.es.js","sources":["../../src/hooks/useBreakpoint.tsx"],"sourcesContent":["import { useCallback, useSyncExternalStore } from \"react\";\nimport { Breakpoint } from \"../constants\";\n\ntype BreakpointDirection = \"up\" | \"down\";\n\nexport function useBreakpoint(\n  breakpoint: Breakpoint,\n  direction: BreakpointDirection = \"down\",\n): boolean {\n  const query =\n    direction === \"down\"\n      ? `(max-width: ${breakpoint}px)`\n      : `(min-width: ${breakpoint}px)`;\n\n  const subscribe = useCallback(\n    (callback: () => void) => {\n      const mql = window.matchMedia(query);\n      mql.addEventListener(\"change\", callback);\n      return () => mql.removeEventListener(\"change\", callback);\n    },\n    [query],\n  );\n\n  const getSnapshot = useCallback(\n    () => window.matchMedia(query).matches,\n    [query],\n  );\n\n  return useSyncExternalStore(subscribe, getSnapshot, () => direction === \"up\");\n}\n"],"names":["useBreakpoint","breakpoint","direction","query","subscribe","useCallback","callback","mql","getSnapshot","useSyncExternalStore"],"mappings":";AAKO,SAASA,EACdC,GACAC,IAAiC,QACxB;AACT,QAAMC,IACJD,MAAc,SACV,eAAeD,CAAU,QACzB,eAAeA,CAAU,OAEzBG,IAAYC;AAAA,IAChB,CAACC,MAAyB;AACxB,YAAMC,IAAM,OAAO,WAAWJ,CAAK;AACnC,aAAAI,EAAI,iBAAiB,UAAUD,CAAQ,GAChC,MAAMC,EAAI,oBAAoB,UAAUD,CAAQ;AAAA,IACzD;AAAA,IACA,CAACH,CAAK;AAAA,EAAA,GAGFK,IAAcH;AAAA,IAClB,MAAM,OAAO,WAAWF,CAAK,EAAE;AAAA,IAC/B,CAACA,CAAK;AAAA,EAAA;AAGR,SAAOM,EAAqBL,GAAWI,GAAa,MAAMN,MAAc,IAAI;AAC9E;"}
+{"version":3,"file":"useBreakpoint.es.js","sources":["../../src/hooks/useBreakpoint.tsx"],"sourcesContent":["import { useCallback, useSyncExternalStore } from \"react\";\nimport type { Breakpoint, BreakpointDirection } from \"../constants\";\n\nexport function useBreakpoint(\n  breakpoint: Breakpoint,\n  direction: BreakpointDirection = \"down\",\n): boolean {\n  const query =\n    direction === \"down\"\n      ? `(max-width: ${breakpoint}px)`\n      : `(min-width: ${breakpoint}px)`;\n\n  const subscribe = useCallback(\n    (callback: () => void) => {\n      const mql = window.matchMedia(query);\n      mql.addEventListener(\"change\", callback);\n      return () => mql.removeEventListener(\"change\", callback);\n    },\n    [query],\n  );\n\n  const getSnapshot = useCallback(\n    () => window.matchMedia(query).matches,\n    [query],\n  );\n\n  return useSyncExternalStore(subscribe, getSnapshot, () => direction === \"up\");\n}\n"],"names":["useBreakpoint","breakpoint","direction","query","subscribe","useCallback","callback","mql","getSnapshot","useSyncExternalStore"],"mappings":";AAGO,SAASA,EACdC,GACAC,IAAiC,QACxB;AACT,QAAMC,IACJD,MAAc,SACV,eAAeD,CAAU,QACzB,eAAeA,CAAU,OAEzBG,IAAYC;AAAA,IAChB,CAACC,MAAyB;AACxB,YAAMC,IAAM,OAAO,WAAWJ,CAAK;AACnC,aAAAI,EAAI,iBAAiB,UAAUD,CAAQ,GAChC,MAAMC,EAAI,oBAAoB,UAAUD,CAAQ;AAAA,IACzD;AAAA,IACA,CAACH,CAAK;AAAA,EAAA,GAGFK,IAAcH;AAAA,IAClB,MAAM,OAAO,WAAWF,CAAK,EAAE;AAAA,IAC/B,CAACA,CAAK;AAAA,EAAA;AAGR,SAAOM,EAAqBL,GAAWI,GAAa,MAAMN,MAAc,IAAI;AAC9E;"}

package/dist/hooks/useMergedRef.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMergedRef.cjs.js","sources":["../../src/hooks/useMergedRef.ts"],"sourcesContent":["import {\n  useCallback,\n  type ForwardedRef,\n  type MutableRefObject,\n  type RefCallback,\n} from \"react\";\n\n/**\n * Combines a local ref (for instance access inside the component) with the ref\n * passed into `forwardRef` (object ref or callback ref).\n */\nexport function useMergedRef<T>(\n  localRef: MutableRefObject<T | null>,\n  forwardedRef: ForwardedRef<T>,\n): RefCallback<T> {\n  return useCallback(\n    (instance: T | null) => {\n      localRef.current = instance;\n      if (typeof forwardedRef === \"function\") {\n        forwardedRef(instance);\n      } else if (forwardedRef != null) {\n        forwardedRef.current = instance;\n      }\n    },\n    [localRef, forwardedRef],\n  );\n}\n"],"names":["useMergedRef","localRef","forwardedRef","useCallback","instance"],"mappings":"yGAWO,SAASA,EACdC,EACAC,EACgB,CAChB,OAAOC,EAAAA,YACJC,GAAuB,CACtBH,EAAS,QAAUG,EACf,OAAOF,GAAiB,WAC1BA,EAAaE,CAAQ,EACZF,GAAgB,OACzBA,EAAa,QAAUE,EAE3B,EACA,CAACH,EAAUC,CAAY,CAAA,CAE3B"}
+{"version":3,"file":"useMergedRef.cjs.js","sources":["../../src/hooks/useMergedRef.ts"],"sourcesContent":["import {\n  useCallback,\n  type ForwardedRef,\n  type RefObject,\n  type RefCallback,\n} from \"react\";\n\n/**\n * Combines a local ref (for instance access inside the component) with the ref\n * passed into `forwardRef` (object ref or callback ref).\n */\nexport function useMergedRef<T>(\n  localRef: RefObject<T | null>,\n  forwardedRef: ForwardedRef<T>,\n): RefCallback<T> {\n  return useCallback(\n    (instance: T | null) => {\n      localRef.current = instance;\n      if (typeof forwardedRef === \"function\") {\n        forwardedRef(instance);\n      } else if (forwardedRef != null) {\n        forwardedRef.current = instance;\n      }\n    },\n    [localRef, forwardedRef],\n  );\n}\n"],"names":["useMergedRef","localRef","forwardedRef","useCallback","instance"],"mappings":"yGAWO,SAASA,EACdC,EACAC,EACgB,CAChB,OAAOC,EAAAA,YACJC,GAAuB,CACtBH,EAAS,QAAUG,EACf,OAAOF,GAAiB,WAC1BA,EAAaE,CAAQ,EACZF,GAAgB,OACzBA,EAAa,QAAUE,EAE3B,EACA,CAACH,EAAUC,CAAY,CAAA,CAE3B"}

package/dist/hooks/useMergedRef.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMergedRef.es.js","sources":["../../src/hooks/useMergedRef.ts"],"sourcesContent":["import {\n  useCallback,\n  type ForwardedRef,\n  type MutableRefObject,\n  type RefCallback,\n} from \"react\";\n\n/**\n * Combines a local ref (for instance access inside the component) with the ref\n * passed into `forwardRef` (object ref or callback ref).\n */\nexport function useMergedRef<T>(\n  localRef: MutableRefObject<T | null>,\n  forwardedRef: ForwardedRef<T>,\n): RefCallback<T> {\n  return useCallback(\n    (instance: T | null) => {\n      localRef.current = instance;\n      if (typeof forwardedRef === \"function\") {\n        forwardedRef(instance);\n      } else if (forwardedRef != null) {\n        forwardedRef.current = instance;\n      }\n    },\n    [localRef, forwardedRef],\n  );\n}\n"],"names":["useMergedRef","localRef","forwardedRef","useCallback","instance"],"mappings":";AAWO,SAASA,EACdC,GACAC,GACgB;AAChB,SAAOC;AAAA,IACL,CAACC,MAAuB;AACtB,MAAAH,EAAS,UAAUG,GACf,OAAOF,KAAiB,aAC1BA,EAAaE,CAAQ,IACZF,KAAgB,SACzBA,EAAa,UAAUE;AAAA,IAE3B;AAAA,IACA,CAACH,GAAUC,CAAY;AAAA,EAAA;AAE3B;"}
+{"version":3,"file":"useMergedRef.es.js","sources":["../../src/hooks/useMergedRef.ts"],"sourcesContent":["import {\n  useCallback,\n  type ForwardedRef,\n  type RefObject,\n  type RefCallback,\n} from \"react\";\n\n/**\n * Combines a local ref (for instance access inside the component) with the ref\n * passed into `forwardRef` (object ref or callback ref).\n */\nexport function useMergedRef<T>(\n  localRef: RefObject<T | null>,\n  forwardedRef: ForwardedRef<T>,\n): RefCallback<T> {\n  return useCallback(\n    (instance: T | null) => {\n      localRef.current = instance;\n      if (typeof forwardedRef === \"function\") {\n        forwardedRef(instance);\n      } else if (forwardedRef != null) {\n        forwardedRef.current = instance;\n      }\n    },\n    [localRef, forwardedRef],\n  );\n}\n"],"names":["useMergedRef","localRef","forwardedRef","useCallback","instance"],"mappings":";AAWO,SAASA,EACdC,GACAC,GACgB;AAChB,SAAOC;AAAA,IACL,CAACC,MAAuB;AACtB,MAAAH,EAAS,UAAUG,GACf,OAAOF,KAAiB,aAC1BA,EAAaE,CAAQ,IACZF,KAAgB,SACzBA,EAAa,UAAUE;AAAA,IAE3B;AAAA,IACA,CAACH,GAAUC,CAAY;AAAA,EAAA;AAE3B;"}

package/dist/hooks.d.ts

@@ -1,5 +1,4 @@
 import { ForwardedRef } from 'react';
-import { MutableRefObject } from 'react';
 import { RefCallback } from 'react';
 import { RefObject } from 'react';
 
@@ -37,7 +36,6 @@ declare type ProtonPalette = {
     };
     PRIMARY: ProtonColorScale;
     SECONDARY: ProtonColorScale;
-    GRAYSCALE: ProtonColorScale;
 };
 
 export declare function useBreakpoint(breakpoint: Breakpoint, direction?: BreakpointDirection): boolean;
@@ -80,7 +78,7 @@ export declare function useLockBodyScroll(isActive?: boolean): void;
  * Combines a local ref (for instance access inside the component) with the ref
  * passed into `forwardRef` (object ref or callback ref).
  */
-export declare function useMergedRef<T>(localRef: MutableRefObject<T | null>, forwardedRef: ForwardedRef<T>): RefCallback<T>;
+export declare function useMergedRef<T>(localRef: RefObject<T | null>, forwardedRef: ForwardedRef<T>): RefCallback<T>;
 
 /**
  * Generates a palette based on a background image or theme.

package/dist/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./components/ActionMenu/ActionMenu.cjs.js"),t=require("./components/Badge/Badge.cjs.js"),r=require("./components/Banner/Banner.cjs.js"),e=require("./components/Button/Button.cjs.js"),i=require("./components/ButtonGroup/ButtonGroup.cjs.js"),l=require("./components/ButtonWithSelect/ButtonWithSelect.cjs.js"),c=require("./components/Checkbox/CheckboxInput/CheckboxInput.cjs.js"),s=require("./components/Checkbox/CheckboxRadioGroup/CheckboxRadioGroup.cjs.js"),T=require("./components/Table/DataTable/DataTable.cjs.js"),b=require("./components/Table/DataTable/DataTableRow.cjs.js"),d=require("./components/Input/CopyInput/CopyInput.cjs.js"),p=require("./components/Overlay/Overlay.cjs.js"),q=require("./components/Elevation/Elevation.cjs.js"),B=require("./components/ImageBackground/ImageBackground.cjs.js"),h=require("./components/Input/BaseInput/Input.cjs.js"),I=require("./components/Input/OTPInput/OTPInput.cjs.js"),R=require("./components/Menu/MenuTrigger.cjs.js"),o=require("./components/Modal/Modal.cjs.js"),v=require("./components/Popover/Popover.cjs.js"),C=require("./components/Input/SearchInput/SearchInput.cjs.js"),S=require("./components/ScreenOverlay/ScreenOverlay.cjs.js"),m=require("./components/Select/Select.cjs.js"),g=require("./components/Switch/Switch.cjs.js"),w=require("./components/Text/TextCountdown/TextCountdown.cjs.js"),x=require("./components/Table/BaseTable/Table.cjs.js"),y=require("./components/Table/BaseTable/elements/TableRow.cjs.js"),A=require("./components/Table/BaseTable/elements/TableCell.cjs.js"),E=require("./components/Table/BaseTable/elements/TableRoot.cjs.js"),M=require("./components/Table/BaseTable/elements/TableHeader.cjs.js"),O=require("./components/Table/BaseTable/elements/TableHeaderRow.cjs.js"),P=require("./components/Table/BaseTable/elements/TableHeaderCell.cjs.js"),k=require("./components/Table/BaseTable/elements/TableBody.cjs.js"),n=require("./components/Table/BaseTable/Collection/useTableCollection.cjs.js"),H=require("./components/Text/TextEllipsis/TextEllipsis.cjs.js"),V=require("./components/Text/TextEmphasis/TextEmphasis.cjs.js"),a=require("./components/ThemeProvider.cjs.js"),D=require("./components/Tombstone/Tombstone.cjs.js"),G=require("./components/Tooltip/ResponsiveTooltip.cjs.js"),N=require("./components/Waveform/Waveform.cjs.js");exports.ActionMenu=u.ActionMenu;exports.Badge=t.Badge;exports.BadgeVariants=t.BadgeVariants;exports.BANNER_VARIANTS=r.BANNER_VARIANTS;exports.Banner=r.Banner;exports.Button=e.Button;exports.ButtonSizes=e.ButtonSizes;exports.ButtonVariants=e.ButtonVariants;exports.ButtonGroup=i.ButtonGroup;exports.ButtonWithSelect=l.ButtonWithSelect;exports.CheckboxInput=c.CheckboxInput;exports.CheckboxRadioGroup=s.CheckboxRadioGroup;exports.DataTable=T.DataTable;exports.DataTableRow=b.DataTableRow;exports.CopyInput=d.CopyInput;exports.Overlay=p.Overlay;exports.Elevation=q.Elevation;exports.ImageBackground=B.ImageBackground;exports.Input=h.Input;exports.OTPInput=I.OTPInput;exports.MenuTrigger=R.MenuTrigger;exports.Modal=o.Modal;exports.widthVariants=o.widthVariants;exports.Popover=v.Popover;exports.SearchInput=C.SearchInput;exports.ScreenOverlay=S.ScreenOverlay;exports.Select=m.Select;exports.Switch=g.Switch;exports.TextCountdown=w.TextCountdown;exports.Table=x.Table;exports.TableRow=y.TableRow;exports.TableCell=A.TableCell;exports.TableRoot=E.TableRoot;exports.TableHeader=M.TableHeader;exports.TableHeaderRow=O.TableHeaderRow;exports.TableHeaderCell=P.TableHeaderCell;exports.TableBody=k.TableBody;exports.calculateAriaColumnIndex=n.calculateAriaColumnIndex;exports.calculateAriaRowIndex=n.calculateAriaRowIndex;exports.TextEllipsis=H.TextEllipsis;exports.TextEmphasis=V.TextEmphasis;exports.ThemeProvider=a.ThemeProvider;exports.useTheme=a.useTheme;exports.Tombstone=D.Tombstone;exports.Tooltip=G.ResponsiveTooltip;exports.Waveform=N.Waveform;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./components/ActionMenu/ActionMenu.cjs.js"),o=require("./components/Badge/Badge.cjs.js"),r=require("./components/Banner/Banner.cjs.js"),e=require("./components/Button/Button.cjs.js"),u=require("./components/ButtonGroup/ButtonGroup.cjs.js"),i=require("./components/ButtonWithSelect/ButtonWithSelect.cjs.js"),l=require("./components/Checkbox/CheckboxInput/CheckboxInput.cjs.js"),c=require("./components/Checkbox/CheckboxRadioGroup/CheckboxRadioGroup.cjs.js"),s=require("./components/Table/DataTable/DataTable.cjs.js"),T=require("./components/Table/DataTable/DataTableRow.cjs.js"),b=require("./components/Input/CopyInput/CopyInput.cjs.js"),p=require("./components/Overlay/Overlay.cjs.js"),q=require("./components/Elevation/Elevation.cjs.js"),d=require("./components/ImageBackground/ImageBackground.cjs.js"),B=require("./components/Input/BaseInput/Input.cjs.js"),I=require("./components/Input/OTPInput/OTPInput.cjs.js"),h=require("./components/Menu/MenuTrigger.cjs.js"),R=require("./components/Modal/Modal.cjs.js"),v=require("./components/Popover/Popover.cjs.js"),C=require("./components/Input/SearchInput/SearchInput.cjs.js"),S=require("./components/ScreenOverlay/ScreenOverlay.cjs.js"),m=require("./components/Select/Select.cjs.js"),g=require("./components/Switch/Switch.cjs.js"),x=require("./components/Text/TextCountdown/TextCountdown.cjs.js"),w=require("./components/Table/BaseTable/Table.cjs.js"),y=require("./components/Table/BaseTable/elements/TableRow.cjs.js"),A=require("./components/Table/BaseTable/elements/TableCell.cjs.js"),E=require("./components/Table/BaseTable/elements/TableRoot.cjs.js"),M=require("./components/Table/BaseTable/elements/TableHeader.cjs.js"),O=require("./components/Table/BaseTable/elements/TableHeaderRow.cjs.js"),P=require("./components/Table/BaseTable/elements/TableHeaderCell.cjs.js"),k=require("./components/Table/BaseTable/elements/TableBody.cjs.js"),t=require("./components/Table/BaseTable/Collection/useTableCollection.cjs.js"),H=require("./components/Text/TextEllipsis/TextEllipsis.cjs.js"),D=require("./components/Text/TextEmphasis/TextEmphasis.cjs.js"),n=require("./components/ThemeProvider.cjs.js"),G=require("./components/Tombstone/Tombstone.cjs.js"),N=require("./components/Tooltip/ResponsiveTooltip.cjs.js"),V=require("./components/Waveform/Waveform.cjs.js");exports.ActionMenu=a.ActionMenu;exports.Badge=o.Badge;exports.BadgeVariants=o.BadgeVariants;exports.BANNER_VARIANTS=r.BANNER_VARIANTS;exports.Banner=r.Banner;exports.Button=e.Button;exports.ButtonSizes=e.ButtonSizes;exports.ButtonVariants=e.ButtonVariants;exports.ButtonGroup=u.ButtonGroup;exports.ButtonWithSelect=i.ButtonWithSelect;exports.CheckboxInput=l.CheckboxInput;exports.CheckboxRadioGroup=c.CheckboxRadioGroup;exports.DataTable=s.DataTable;exports.DataTableRow=T.DataTableRow;exports.CopyInput=b.CopyInput;exports.Overlay=p.Overlay;exports.Elevation=q.Elevation;exports.ImageBackground=d.ImageBackground;exports.Input=B.Input;exports.OTPInput=I.OTPInput;exports.MenuTrigger=h.MenuTrigger;exports.Modal=R.Modal;exports.Popover=v.Popover;exports.SearchInput=C.SearchInput;exports.ScreenOverlay=S.ScreenOverlay;exports.Select=m.Select;exports.Switch=g.Switch;exports.TextCountdown=x.TextCountdown;exports.Table=w.Table;exports.TableRow=y.TableRow;exports.TableCell=A.TableCell;exports.TableRoot=E.TableRoot;exports.TableHeader=M.TableHeader;exports.TableHeaderRow=O.TableHeaderRow;exports.TableHeaderCell=P.TableHeaderCell;exports.TableBody=k.TableBody;exports.calculateAriaColumnIndex=t.calculateAriaColumnIndex;exports.calculateAriaRowIndex=t.calculateAriaRowIndex;exports.TextEllipsis=H.TextEllipsis;exports.TextEmphasis=D.TextEmphasis;exports.ThemeProvider=n.ThemeProvider;exports.useTheme=n.useTheme;exports.Tombstone=G.Tombstone;exports.Tooltip=N.ResponsiveTooltip;exports.Waveform=V.Waveform;
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.d.ts

@@ -174,7 +174,7 @@ declare interface BannerIconProps {
      */
     icon?: boolean | ReactNode;
     /**
-     * The data-testid to display within the banner.
+     * The data-testid for the banner icon.
      */
     "data-testid"?: string;
 }
@@ -190,7 +190,7 @@ declare interface BannerProps extends BannerIconProps {
      */
     children: ReactNode;
     /**
-     * The data-testid to display within the banner.
+     * The data-testid for the banner.
      */
     "data-testid"?: string;
     /**
@@ -415,7 +415,7 @@ declare interface ButtonProps {
      */
     fullWidth?: boolean;
     /** The prefix to display within the button */
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     /** Should the button be non-interactive? */
     isDisabled?: boolean;
     /** The URL that the button should link to. Turns the element into an `a` tag. If the URL is external, you should pass the entire URL to the `to` prop (e.g. `https://example.com`). */
@@ -429,7 +429,7 @@ declare interface ButtonProps {
     /** The test ID for the button */
     "data-testid"?: string;
     /** The content to display within the button */
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
 
 export declare type ButtonSize = "small" | "medium" | "large" | "xlarge" | "2xlarge";
@@ -502,7 +502,7 @@ declare interface CheckboxInputProps {
     error?: ReactNode | string;
     /** The description attribute of the checkbox input. */
     description?: ReactNode | string;
-    /** The test id attribute of the checkbox input. */
+    /** The test id attribute of the checkbox `input` element. */
     "data-testid"?: string;
     /**
      * Callback fired when the checkbox state changes.
@@ -616,7 +616,7 @@ declare interface CheckboxRadioGroupProps {
      */
     round?: boolean;
     /**
-     * Test ID for the group.
+     * Test ID for the group elemnt `RadixRadioGroup.Root`
      */
     "data-testid"?: string;
 }
@@ -802,7 +802,7 @@ export declare interface MenuTriggerProps {
     setIsOpen: (isOpen: boolean) => void;
 }
 
-export declare const Modal: (({ isOpen, onClose, title, subtitle, body, children, isOverlay, width, "data-testid": dataTestId, }: ModalProps) => JSX.Element | null) & {
+export declare const Modal: (({ isOpen, onClose, title, subtitle, body, children, isOverlay, "data-testid": dataTestId, }: ModalProps) => JSX.Element | null) & {
     /**
      * Renders a h2 styled title
      * */
@@ -868,12 +868,6 @@ declare interface ModalProps {
      * Optional title text for the modal header
      * */
     title?: string;
-    /**
-     * Optional width variant for the modal
-     * - type {@link WidthVariant}
-     * @default "full"
-     * */
-    width?: WidthVariant;
 }
 
 /**
@@ -885,7 +879,12 @@ declare interface ModalProps {
 export declare const OTPInput: ForwardRefExoticComponent<OTPInputProps & RefAttributes<HTMLDivElement>>;
 
 declare interface OTPInputProps {
-    /** Test ID for digit inputs */
+    /** Test ID for digit inputs
+     * @important The test id is applied to each digit as:
+     * ```
+     * ${dataTestId}-digit-${index + 1}
+     * ```
+     */
     "data-testid"?: string;
     /** Default value when uncontrolled. */
     defaultValue?: string;
@@ -988,7 +987,7 @@ declare interface PopoverProps {
      */
     onOpenChange?: (open: boolean) => void;
     /**
-     * The trigger element for the popover.
+     * The trigger element for the `Popover.Content`.
      */
     trigger: ReactNode;
     /**
@@ -1025,7 +1024,6 @@ declare type ProtonPalette = {
     };
     PRIMARY: ProtonColorScale;
     SECONDARY: ProtonColorScale;
-    GRAYSCALE: ProtonColorScale;
 };
 
 declare interface ProtonStyleSheet {
@@ -1080,7 +1078,7 @@ declare interface ResponsiveTooltipProps extends Omit<TooltipProps, "placement">
      * Placement/side of the tooltip/popover.
      * @default "top"
      */
-    placement?: TooltipPlacement;
+    placement?: RadixSide;
     /**
      * Force a specific component type.
      * @default "auto"
@@ -1615,7 +1613,7 @@ declare interface TextEllipsisProps {
      */
     title?: string;
     /**
-     * A test ID.
+     * Test id for the component.
      */
     "data-testid"?: string;
 }
@@ -1829,13 +1827,4 @@ declare interface WaveformProps {
     totalDuration: number;
 }
 
-/**
- * Width variant for the modal (will be standardized in future release)
- *  - medium: 650px  (standard modal width on client)
- *  - full: 86vw  (default modal width)
- */
-export declare type WidthVariant = "medium" | "full";
-
-export declare const widthVariants: Record<WidthVariant, string>;
-
 export { }

package/dist/index.es.js

@@ -1,41 +1,41 @@
 import { ActionMenu as e } from "./components/ActionMenu/ActionMenu.es.js";
 import { Badge as p, BadgeVariants as m } from "./components/Badge/Badge.es.js";
 import { BANNER_VARIANTS as a, Banner as f } from "./components/Banner/Banner.es.js";
-import { Button as n, ButtonSizes as T, ButtonVariants as i } from "./components/Button/Button.es.js";
-import { ButtonGroup as d } from "./components/ButtonGroup/ButtonGroup.es.js";
-import { ButtonWithSelect as c } from "./components/ButtonWithSelect/ButtonWithSelect.es.js";
+import { Button as n, ButtonSizes as T, ButtonVariants as u } from "./components/Button/Button.es.js";
+import { ButtonGroup as b } from "./components/ButtonGroup/ButtonGroup.es.js";
+import { ButtonWithSelect as d } from "./components/ButtonWithSelect/ButtonWithSelect.es.js";
 import { CheckboxInput as B } from "./components/Checkbox/CheckboxInput/CheckboxInput.es.js";
-import { CheckboxRadioGroup as I } from "./components/Checkbox/CheckboxRadioGroup/CheckboxRadioGroup.es.js";
+import { CheckboxRadioGroup as R } from "./components/Checkbox/CheckboxRadioGroup/CheckboxRadioGroup.es.js";
 import { DataTable as v } from "./components/Table/DataTable/DataTable.es.js";
-import { DataTableRow as C } from "./components/Table/DataTable/DataTableRow.es.js";
-import { CopyInput as g } from "./components/Input/CopyInput/CopyInput.es.js";
+import { DataTableRow as S } from "./components/Table/DataTable/DataTableRow.es.js";
+import { CopyInput as w } from "./components/Input/CopyInput/CopyInput.es.js";
 import { Overlay as y } from "./components/Overlay/Overlay.es.js";
-import { Elevation as V } from "./components/Elevation/Elevation.es.js";
-import { ImageBackground as H } from "./components/ImageBackground/ImageBackground.es.js";
-import { Input as N } from "./components/Input/BaseInput/Input.es.js";
-import { OTPInput as P } from "./components/Input/OTPInput/OTPInput.es.js";
+import { Elevation as k } from "./components/Elevation/Elevation.es.js";
+import { ImageBackground as M } from "./components/ImageBackground/ImageBackground.es.js";
+import { Input as O } from "./components/Input/BaseInput/Input.es.js";
+import { OTPInput as V } from "./components/Input/OTPInput/OTPInput.es.js";
 import { MenuTrigger as G } from "./components/Menu/MenuTrigger.es.js";
-import { Modal as z, widthVariants as _ } from "./components/Modal/Modal.es.js";
-import { Popover as q } from "./components/Popover/Popover.es.js";
-import { SearchInput as J } from "./components/Input/SearchInput/SearchInput.es.js";
-import { ScreenOverlay as L } from "./components/ScreenOverlay/ScreenOverlay.es.js";
-import { Select as U } from "./components/Select/Select.es.js";
-import { Switch as Y } from "./components/Switch/Switch.es.js";
-import { TextCountdown as $ } from "./components/Text/TextCountdown/TextCountdown.es.js";
-import { Table as ro } from "./components/Table/BaseTable/Table.es.js";
-import { TableRow as to } from "./components/Table/BaseTable/elements/TableRow.es.js";
-import { TableCell as mo } from "./components/Table/BaseTable/elements/TableCell.es.js";
-import { TableRoot as ao } from "./components/Table/BaseTable/elements/TableRoot.es.js";
-import { TableHeader as lo } from "./components/Table/BaseTable/elements/TableHeader.es.js";
-import { TableHeaderRow as To } from "./components/Table/BaseTable/elements/TableHeaderRow.es.js";
+import { Modal as z } from "./components/Modal/Modal.es.js";
+import { Popover as j } from "./components/Popover/Popover.es.js";
+import { SearchInput as F } from "./components/Input/SearchInput/SearchInput.es.js";
+import { ScreenOverlay as K } from "./components/ScreenOverlay/ScreenOverlay.es.js";
+import { Select as Q } from "./components/Select/Select.es.js";
+import { Switch as X } from "./components/Switch/Switch.es.js";
+import { TextCountdown as Z } from "./components/Text/TextCountdown/TextCountdown.es.js";
+import { Table as oo } from "./components/Table/BaseTable/Table.es.js";
+import { TableRow as eo } from "./components/Table/BaseTable/elements/TableRow.es.js";
+import { TableCell as po } from "./components/Table/BaseTable/elements/TableCell.es.js";
+import { TableRoot as xo } from "./components/Table/BaseTable/elements/TableRoot.es.js";
+import { TableHeader as fo } from "./components/Table/BaseTable/elements/TableHeader.es.js";
+import { TableHeaderRow as no } from "./components/Table/BaseTable/elements/TableHeaderRow.es.js";
 import { TableHeaderCell as uo } from "./components/Table/BaseTable/elements/TableHeaderCell.es.js";
-import { TableBody as co } from "./components/Table/BaseTable/elements/TableBody.es.js";
-import { calculateAriaColumnIndex as Bo, calculateAriaRowIndex as ho } from "./components/Table/BaseTable/Collection/useTableCollection.es.js";
+import { TableBody as bo } from "./components/Table/BaseTable/elements/TableBody.es.js";
+import { calculateAriaColumnIndex as so, calculateAriaRowIndex as Bo } from "./components/Table/BaseTable/Collection/useTableCollection.es.js";
 import { TextEllipsis as Ro } from "./components/Text/TextEllipsis/TextEllipsis.es.js";
-import { TextEmphasis as wo } from "./components/Text/TextEmphasis/TextEmphasis.es.js";
+import { TextEmphasis as vo } from "./components/Text/TextEmphasis/TextEmphasis.es.js";
 import { ThemeProvider as So, useTheme as go } from "./components/ThemeProvider.es.js";
-import { Tombstone as yo } from "./components/Tombstone/Tombstone.es.js";
-import { ResponsiveTooltip as Vo } from "./components/Tooltip/ResponsiveTooltip.es.js";
+import { Tombstone as Ao } from "./components/Tombstone/Tombstone.es.js";
+import { ResponsiveTooltip as Eo } from "./components/Tooltip/ResponsiveTooltip.es.js";
 import { Waveform as Ho } from "./components/Waveform/Waveform.es.js";
 export {
   e as ActionMenu,
@@ -44,45 +44,44 @@ export {
   m as BadgeVariants,
   f as Banner,
   n as Button,
-  d as ButtonGroup,
+  b as ButtonGroup,
   T as ButtonSizes,
-  i as ButtonVariants,
-  c as ButtonWithSelect,
+  u as ButtonVariants,
+  d as ButtonWithSelect,
   B as CheckboxInput,
-  I as CheckboxRadioGroup,
-  g as CopyInput,
+  R as CheckboxRadioGroup,
+  w as CopyInput,
   v as DataTable,
-  C as DataTableRow,
-  V as Elevation,
-  H as ImageBackground,
-  N as Input,
+  S as DataTableRow,
+  k as Elevation,
+  M as ImageBackground,
+  O as Input,
   G as MenuTrigger,
   z as Modal,
-  P as OTPInput,
+  V as OTPInput,
   y as Overlay,
-  q as Popover,
-  L as ScreenOverlay,
-  J as SearchInput,
-  U as Select,
-  Y as Switch,
-  ro as Table,
-  co as TableBody,
-  mo as TableCell,
-  lo as TableHeader,
+  j as Popover,
+  K as ScreenOverlay,
+  F as SearchInput,
+  Q as Select,
+  X as Switch,
+  oo as Table,
+  bo as TableBody,
+  po as TableCell,
+  fo as TableHeader,
   uo as TableHeaderCell,
-  To as TableHeaderRow,
-  ao as TableRoot,
-  to as TableRow,
-  $ as TextCountdown,
+  no as TableHeaderRow,
+  xo as TableRoot,
+  eo as TableRow,
+  Z as TextCountdown,
   Ro as TextEllipsis,
-  wo as TextEmphasis,
+  vo as TextEmphasis,
   So as ThemeProvider,
-  yo as Tombstone,
-  Vo as Tooltip,
+  Ao as Tombstone,
+  Eo as Tooltip,
   Ho as Waveform,
-  Bo as calculateAriaColumnIndex,
-  ho as calculateAriaRowIndex,
-  go as useTheme,
-  _ as widthVariants
+  so as calculateAriaColumnIndex,
+  Bo as calculateAriaRowIndex,
+  go as useTheme
 };
 //# sourceMappingURL=index.es.js.map

package/dist/light.d.ts

@@ -33,7 +33,6 @@ declare type ProtonPalette = {
     };
     PRIMARY: ProtonColorScale;
     SECONDARY: ProtonColorScale;
-    GRAYSCALE: ProtonColorScale;
 };
 
 declare interface ProtonStyleSheet {