@protonradio/proton-ui 0.11.34 → 0.12.1

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

@@ -1 +1 @@
-{"version":3,"file":"stylesheet.es.js","sources":["../../../src/design/darkTheme/stylesheet.ts"],"sourcesContent":["import { transparentize } from \"../../utils/color2k\";\nimport { BORDER, DARK_GRAYSCALE, ELEVATION } from \"./colors\";\nimport { DANGER, WARNING, SUCCESS, BRAND } from \"../colors\";\nimport type { ProtonStyleSheet } from \"../types\";\n\nexport const DARK_STYLESHEET: ProtonStyleSheet = {\n  // Control/component colors\n  \"--proton-control__background-color\": DARK_GRAYSCALE.DARK,\n  \"--proton-control__background-color-light\": ELEVATION,\n  \"--proton-control__text-color\": DARK_GRAYSCALE.WHITE,\n  \"--proton-control__title-color\": \"#FFFFFF\",\n  \"--proton-control__border-color\": BORDER,\n  \"--proton-control__hover-color\": DARK_GRAYSCALE.MEDIUM,\n  \"--proton-control__shadow-color\": transparentize(\n    DARK_GRAYSCALE.LIGHTEST,\n    0.5\n  ),\n  \"--proton-control__border-radius\": \"4px\",\n  \"--proton-control__interactive-color\": BRAND.PRIMARY_LIGHT,\n\n  // Brand colors\n  \"--proton-color__primary\": BRAND.PRIMARY,\n  \"--proton-color__primary-light\": BRAND.PRIMARY_LIGHT,\n  \"--proton-color__primary-super-light\": BRAND.PRIMARY_SUPER_LIGHT,\n  \"--proton-color__secondary\": BRAND.SECONDARY,\n  \"--proton-color__secondary-light\": BRAND.SECONDARY_LIGHT,\n  \"--proton-color__secondary-super-light\": BRAND.SECONDARY_SUPER_LIGHT,\n\n  // Semantic colors\n  \"--proton-color__danger-super-dark\": DANGER.SUPER_DARK,\n  \"--proton-color__danger-dark\": DANGER.DARK,\n  \"--proton-color__danger-medium\": DANGER.MEDIUM,\n  \"--proton-color__danger-light\": DANGER.LIGHT,\n  \"--proton-color__danger-super-light\": DANGER.SUPER_LIGHT,\n  \"--proton-color__warning-dark\": WARNING.DARK,\n  \"--proton-color__warning-medium\": WARNING.MEDIUM,\n  \"--proton-color__warning-light\": WARNING.LIGHT,\n  \"--proton-color__warning-super-light\": WARNING.SUPER_LIGHT,\n  \"--proton-color__success-dark\": SUCCESS.DARK,\n  \"--proton-color__success-medium\": SUCCESS.MEDIUM,\n  \"--proton-color__success-light\": SUCCESS.LIGHT,\n  \"--proton-color__success-super-light\": SUCCESS.SUPER_LIGHT,\n\n  // Grayscale colors\n  \"--proton-color__gray-super-dark\": DARK_GRAYSCALE.SUPER_DARK,\n  \"--proton-color__gray-dark\": DARK_GRAYSCALE.DARK,\n  \"--proton-color__gray-medium\": DARK_GRAYSCALE.MEDIUM,\n  \"--proton-color__gray-medium-light\": DARK_GRAYSCALE.MEDIUM_LIGHT,\n  \"--proton-color__gray-light\": DARK_GRAYSCALE.LIGHT,\n  \"--proton-color__gray-lightest\": DARK_GRAYSCALE.LIGHTEST,\n  \"--proton-color__gray-super-light\": DARK_GRAYSCALE.SUPER_LIGHT,\n  \"--proton-color__white\": DARK_GRAYSCALE.WHITE,\n};\n"],"names":["DARK_STYLESHEET","DARK_GRAYSCALE","ELEVATION","BORDER","transparentize","BRAND","DANGER","WARNING","SUCCESS"],"mappings":";;;AAKO,MAAMA,IAAoC;AAAA;AAAA,EAE/C,sCAAsCC,EAAe;AAAA,EACrD,4CAA4CC;AAAA,EAC5C,gCAAgCD,EAAe;AAAA,EAC/C,iCAAiC;AAAA,EACjC,kCAAkCE;AAAA,EAClC,iCAAiCF,EAAe;AAAA,EAChD,kCAAkCG;AAAA,IAChCH,EAAe;AAAA,IACf;AAAA,EACF;AAAA,EACA,mCAAmC;AAAA,EACnC,uCAAuCI,EAAM;AAAA;AAAA,EAG7C,2BAA2BA,EAAM;AAAA,EACjC,iCAAiCA,EAAM;AAAA,EACvC,uCAAuCA,EAAM;AAAA,EAC7C,6BAA6BA,EAAM;AAAA,EACnC,mCAAmCA,EAAM;AAAA,EACzC,yCAAyCA,EAAM;AAAA;AAAA,EAG/C,qCAAqCC,EAAO;AAAA,EAC5C,+BAA+BA,EAAO;AAAA,EACtC,iCAAiCA,EAAO;AAAA,EACxC,gCAAgCA,EAAO;AAAA,EACvC,sCAAsCA,EAAO;AAAA,EAC7C,gCAAgCC,EAAQ;AAAA,EACxC,kCAAkCA,EAAQ;AAAA,EAC1C,iCAAiCA,EAAQ;AAAA,EACzC,uCAAuCA,EAAQ;AAAA,EAC/C,gCAAgCC,EAAQ;AAAA,EACxC,kCAAkCA,EAAQ;AAAA,EAC1C,iCAAiCA,EAAQ;AAAA,EACzC,uCAAuCA,EAAQ;AAAA;AAAA,EAG/C,mCAAmCP,EAAe;AAAA,EAClD,6BAA6BA,EAAe;AAAA,EAC5C,+BAA+BA,EAAe;AAAA,EAC9C,qCAAqCA,EAAe;AAAA,EACpD,8BAA8BA,EAAe;AAAA,EAC7C,iCAAiCA,EAAe;AAAA,EAChD,oCAAoCA,EAAe;AAAA,EACnD,yBAAyBA,EAAe;AAC1C;"}
+{"version":3,"file":"stylesheet.es.js","sources":["../../../src/design/darkTheme/stylesheet.ts"],"sourcesContent":["import { transparentize } from \"../../utils/color2k\";\nimport { BORDER, DARK_GRAYSCALE, ELEVATION } from \"./colors\";\nimport { DANGER, WARNING, SUCCESS, BRAND } from \"../colors\";\nimport type { ProtonStyleSheet } from \"../types\";\n\nexport const DARK_STYLESHEET: ProtonStyleSheet = {\n  // Control/component colors\n  \"--proton-control__background-color\": DARK_GRAYSCALE.DARK,\n  \"--proton-control__background-color-light\": ELEVATION,\n  \"--proton-control__elevation-color\": ELEVATION,\n  \"--proton-control__text-color\": DARK_GRAYSCALE.WHITE,\n  \"--proton-control__title-color\": \"#FFFFFF\",\n  \"--proton-control__border-color\": transparentize(BORDER, 0.6),\n  \"--proton-control__hover-color\": transparentize(\n    DARK_GRAYSCALE.SUPER_LIGHT,\n    0.65,\n  ),\n  \"--proton-control__shadow-color\": transparentize(\n    DARK_GRAYSCALE.SUPER_LIGHT,\n    0.54,\n  ),\n  \"--proton-control__border-radius\": \"4px\",\n\n  // Brand colors\n  \"--proton-color__primary\": BRAND.PRIMARY,\n  \"--proton-color__primary-light\": BRAND.PRIMARY_LIGHT,\n  \"--proton-color__primary-super-light\": BRAND.PRIMARY_SUPER_LIGHT,\n  \"--proton-color__secondary\": BRAND.SECONDARY,\n  \"--proton-color__secondary-light\": BRAND.SECONDARY_LIGHT,\n  \"--proton-color__secondary-super-light\": BRAND.SECONDARY_SUPER_LIGHT,\n\n  // Semantic colors\n  \"--proton-color__danger-super-dark\": DANGER.SUPER_DARK,\n  \"--proton-color__danger-dark\": DANGER.DARK,\n  \"--proton-color__danger-medium\": DANGER.MEDIUM,\n  \"--proton-color__danger-light\": DANGER.LIGHT,\n  \"--proton-color__danger-super-light\": DANGER.SUPER_LIGHT,\n  \"--proton-color__warning-dark\": WARNING.DARK,\n  \"--proton-color__warning-medium\": WARNING.MEDIUM,\n  \"--proton-color__warning-light\": WARNING.LIGHT,\n  \"--proton-color__warning-super-light\": WARNING.SUPER_LIGHT,\n  \"--proton-color__success-dark\": SUCCESS.DARK,\n  \"--proton-color__success-medium\": SUCCESS.MEDIUM,\n  \"--proton-color__success-light\": SUCCESS.LIGHT,\n  \"--proton-color__success-super-light\": SUCCESS.SUPER_LIGHT,\n\n  // Grayscale colors\n  \"--proton-color__gray-super-dark\": DARK_GRAYSCALE.SUPER_DARK,\n  \"--proton-color__gray-dark\": DARK_GRAYSCALE.DARK,\n  \"--proton-color__gray-medium\": DARK_GRAYSCALE.MEDIUM,\n  \"--proton-color__gray-medium-light\": DARK_GRAYSCALE.MEDIUM_LIGHT,\n  \"--proton-color__gray-light\": DARK_GRAYSCALE.LIGHT,\n  \"--proton-color__gray-lightest\": DARK_GRAYSCALE.LIGHTEST,\n  \"--proton-color__gray-super-light\": DARK_GRAYSCALE.SUPER_LIGHT,\n  \"--proton-color__white\": DARK_GRAYSCALE.WHITE,\n};\n"],"names":["DARK_STYLESHEET","DARK_GRAYSCALE","ELEVATION","transparentize","BORDER","BRAND","DANGER","WARNING","SUCCESS"],"mappings":";;;AAKO,MAAMA,IAAoC;AAAA;AAAA,EAE/C,sCAAsCC,EAAe;AAAA,EACrD,4CAA4CC;AAAA,EAC5C,qCAAqCA;AAAA,EACrC,gCAAgCD,EAAe;AAAA,EAC/C,iCAAiC;AAAA,EACjC,kCAAkCE,EAAeC,GAAQ,GAAG;AAAA,EAC5D,iCAAiCD;AAAA,IAC/BF,EAAe;AAAA,IACf;AAAA,EAAA;AAAA,EAEF,kCAAkCE;AAAA,IAChCF,EAAe;AAAA,IACf;AAAA,EAAA;AAAA,EAEF,mCAAmC;AAAA;AAAA,EAGnC,2BAA2BI,EAAM;AAAA,EACjC,iCAAiCA,EAAM;AAAA,EACvC,uCAAuCA,EAAM;AAAA,EAC7C,6BAA6BA,EAAM;AAAA,EACnC,mCAAmCA,EAAM;AAAA,EACzC,yCAAyCA,EAAM;AAAA;AAAA,EAG/C,qCAAqCC,EAAO;AAAA,EAC5C,+BAA+BA,EAAO;AAAA,EACtC,iCAAiCA,EAAO;AAAA,EACxC,gCAAgCA,EAAO;AAAA,EACvC,sCAAsCA,EAAO;AAAA,EAC7C,gCAAgCC,EAAQ;AAAA,EACxC,kCAAkCA,EAAQ;AAAA,EAC1C,iCAAiCA,EAAQ;AAAA,EACzC,uCAAuCA,EAAQ;AAAA,EAC/C,gCAAgCC,EAAQ;AAAA,EACxC,kCAAkCA,EAAQ;AAAA,EAC1C,iCAAiCA,EAAQ;AAAA,EACzC,uCAAuCA,EAAQ;AAAA;AAAA,EAG/C,mCAAmCP,EAAe;AAAA,EAClD,6BAA6BA,EAAe;AAAA,EAC5C,+BAA+BA,EAAe;AAAA,EAC9C,qCAAqCA,EAAe;AAAA,EACpD,8BAA8BA,EAAe;AAAA,EAC7C,iCAAiCA,EAAe;AAAA,EAChD,oCAAoCA,EAAe;AAAA,EACnD,yBAAyBA,EAAe;AAC1C;"}

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,CACL,MAAAM,EAAaC,EAAyBP,CAAO,EAC5C,MAAA,CACL,GAAGE,EACH,GAAGI,CAAA,CAEP,CAEO,OAAAJ,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    //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"}

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":";;;AAMa,MAAAA,IAAqB,CAChCC,GACAC,MACqB;AACrB,QAAMC,IACJD,MAAUE,EAAO,OAAOC,IAAkBC;AAE5C,MAAIL,GAAS;AACL,UAAAM,IAAaC,EAAyBP,CAAO;AAC5C,WAAA;AAAA,MACL,GAAGE;AAAA,MACH,GAAGI;AAAA,IAAA;AAAA,EAEP;AAEO,SAAAJ;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    //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;"}

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,EAAY,YAAA,MAAA,MACxBC,EAAA,MACA,UAAWJ,EACX,QAASK,EAAA,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  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"}

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

@@ -1,4 +1,4 @@
-import { BACKGROUNDS as E, BRAND as A, BRAND_PRIMARY_SCALE as R } from "../colors.es.js";
+import { BRAND_PRIMARY_SCALE as E, BRAND as A, BACKGROUNDS as R } from "../colors.es.js";
 const D = "#DDDDDD", G = D, I = "#F7F8F9", T = {
   SUPER_DARK: "#141211",
   DARK: "#4D4D4D",
@@ -18,10 +18,10 @@ const D = "#DDDDDD", G = D, I = "#F7F8F9", T = {
   SUPER_LIGHT: "#C8DFFF",
   WHITE: "#f5f9ff"
 }, H = {
-  BASE_COLOR: E.WHITE,
+  BASE_COLOR: R.WHITE,
   BRAND: A,
   GRAYSCALE: T,
-  PRIMARY: R,
+  PRIMARY: E,
   SECONDARY: L
 };
 export {

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("../../utils/color2k.cjs.js"),o=require("../colors.cjs.js"),r=require("./colors.cjs.js"),t={"--proton-control__background-color":o.BACKGROUNDS.WHITE,"--proton-control__background-color-light":r.ELEVATION,"--proton-control__text-color":r.LIGHT_GRAYSCALE.DARK,"--proton-control__title-color":r.LIGHT_GRAYSCALE.SUPER_DARK,"--proton-control__border-color":r.BORDER,"--proton-control__hover-color":r.LIGHT_GRAYSCALE.SUPER_LIGHT,"--proton-control__shadow-color":_.transparentize(r.LIGHT_GRAYSCALE.SUPER_DARK,.9),"--proton-control__border-radius":"4px","--proton-control__interactive-color":o.BRAND.PRIMARY_LIGHT,"--proton-color__primary":o.BRAND.PRIMARY,"--proton-color__primary-light":o.BRAND.PRIMARY_LIGHT,"--proton-color__primary-super-light":o.BRAND.PRIMARY_SUPER_LIGHT,"--proton-color__secondary":o.BRAND.SECONDARY,"--proton-color__secondary-light":o.BRAND.SECONDARY_LIGHT,"--proton-color__secondary-super-light":o.BRAND.SECONDARY_SUPER_LIGHT,"--proton-color__danger-super-dark":o.DANGER.SUPER_DARK,"--proton-color__danger-dark":o.DANGER.DARK,"--proton-color__danger-medium":o.DANGER.MEDIUM,"--proton-color__danger-light":o.DANGER.LIGHT,"--proton-color__danger-super-light":o.DANGER.SUPER_LIGHT,"--proton-color__warning-dark":o.WARNING.DARK,"--proton-color__warning-medium":o.WARNING.MEDIUM,"--proton-color__warning-light":o.WARNING.LIGHT,"--proton-color__warning-super-light":o.WARNING.SUPER_LIGHT,"--proton-color__success-dark":o.SUCCESS.DARK,"--proton-color__success-medium":o.SUCCESS.MEDIUM,"--proton-color__success-light":o.SUCCESS.LIGHT,"--proton-color__success-super-light":o.SUCCESS.SUPER_LIGHT,"--proton-color__gray-super-dark":r.LIGHT_GRAYSCALE.SUPER_DARK,"--proton-color__gray-dark":r.LIGHT_GRAYSCALE.DARK,"--proton-color__gray-medium":r.LIGHT_GRAYSCALE.MEDIUM,"--proton-color__gray-medium-light":r.LIGHT_GRAYSCALE.MEDIUM_LIGHT,"--proton-color__gray-light":r.LIGHT_GRAYSCALE.LIGHT,"--proton-color__gray-lightest":r.LIGHT_GRAYSCALE.LIGHTEST,"--proton-color__gray-super-light":r.LIGHT_GRAYSCALE.SUPER_LIGHT,"--proton-color__white":r.LIGHT_GRAYSCALE.WHITE};exports.LIGHT_STYLESHEET=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("../../utils/color2k.cjs.js"),o=require("../colors.cjs.js"),r=require("./colors.cjs.js"),t={"--proton-control__background-color":o.BACKGROUNDS.WHITE,"--proton-control__background-color-light":o.BACKGROUNDS.WHITE,"--proton-control__elevation-color":r.ELEVATION,"--proton-control__text-color":r.LIGHT_GRAYSCALE.DARK,"--proton-control__title-color":r.LIGHT_GRAYSCALE.SUPER_DARK,"--proton-control__border-color":r.BORDER,"--proton-control__hover-color":r.LIGHT_GRAYSCALE.SUPER_LIGHT,"--proton-control__shadow-color":_.transparentize(r.LIGHT_GRAYSCALE.SUPER_DARK,.875),"--proton-control__border-radius":"4px","--proton-color__primary":o.BRAND.PRIMARY,"--proton-color__primary-light":o.BRAND.PRIMARY_LIGHT,"--proton-color__primary-super-light":o.BRAND.PRIMARY_SUPER_LIGHT,"--proton-color__secondary":o.BRAND.SECONDARY,"--proton-color__secondary-light":o.BRAND.SECONDARY_LIGHT,"--proton-color__secondary-super-light":o.BRAND.SECONDARY_SUPER_LIGHT,"--proton-color__danger-super-dark":o.DANGER.SUPER_DARK,"--proton-color__danger-dark":o.DANGER.DARK,"--proton-color__danger-medium":o.DANGER.MEDIUM,"--proton-color__danger-light":o.DANGER.LIGHT,"--proton-color__danger-super-light":o.DANGER.SUPER_LIGHT,"--proton-color__warning-dark":o.WARNING.DARK,"--proton-color__warning-medium":o.WARNING.MEDIUM,"--proton-color__warning-light":o.WARNING.LIGHT,"--proton-color__warning-super-light":o.WARNING.SUPER_LIGHT,"--proton-color__success-dark":o.SUCCESS.DARK,"--proton-color__success-medium":o.SUCCESS.MEDIUM,"--proton-color__success-light":o.SUCCESS.LIGHT,"--proton-color__success-super-light":o.SUCCESS.SUPER_LIGHT,"--proton-color__gray-super-dark":r.LIGHT_GRAYSCALE.SUPER_DARK,"--proton-color__gray-dark":r.LIGHT_GRAYSCALE.DARK,"--proton-color__gray-medium":r.LIGHT_GRAYSCALE.MEDIUM,"--proton-color__gray-medium-light":r.LIGHT_GRAYSCALE.MEDIUM_LIGHT,"--proton-color__gray-light":r.LIGHT_GRAYSCALE.LIGHT,"--proton-color__gray-lightest":r.LIGHT_GRAYSCALE.LIGHTEST,"--proton-color__gray-super-light":r.LIGHT_GRAYSCALE.SUPER_LIGHT,"--proton-color__white":r.LIGHT_GRAYSCALE.WHITE};exports.LIGHT_STYLESHEET=t;
 //# sourceMappingURL=stylesheet.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"stylesheet.cjs.js","sources":["../../../src/design/lightTheme/stylesheet.ts"],"sourcesContent":["import { transparentize } from \"../../utils/color2k\";\nimport { BACKGROUNDS, BRAND, DANGER, WARNING, SUCCESS } from \"../colors\";\nimport { ELEVATION, LIGHT_GRAYSCALE } from \"./colors\";\nimport { BORDER } from \"./colors\";\nimport type { ProtonStyleSheet } from \"../types\";\n\nexport const LIGHT_STYLESHEET: ProtonStyleSheet = {\n  // Control/component colors\n  \"--proton-control__background-color\": BACKGROUNDS.WHITE,\n  \"--proton-control__background-color-light\": ELEVATION,\n  \"--proton-control__text-color\": LIGHT_GRAYSCALE.DARK,\n  \"--proton-control__title-color\": LIGHT_GRAYSCALE.SUPER_DARK,\n  \"--proton-control__border-color\": BORDER,\n  \"--proton-control__hover-color\": LIGHT_GRAYSCALE.SUPER_LIGHT,\n  \"--proton-control__shadow-color\": transparentize(\n    LIGHT_GRAYSCALE.SUPER_DARK,\n    0.9\n  ),\n  \"--proton-control__border-radius\": \"4px\",\n  \"--proton-control__interactive-color\": BRAND.PRIMARY_LIGHT,\n\n  // Brand colors\n  \"--proton-color__primary\": BRAND.PRIMARY,\n  \"--proton-color__primary-light\": BRAND.PRIMARY_LIGHT,\n  \"--proton-color__primary-super-light\": BRAND.PRIMARY_SUPER_LIGHT,\n  \"--proton-color__secondary\": BRAND.SECONDARY,\n  \"--proton-color__secondary-light\": BRAND.SECONDARY_LIGHT,\n  \"--proton-color__secondary-super-light\": BRAND.SECONDARY_SUPER_LIGHT,\n\n  // Semantic colors\n  \"--proton-color__danger-super-dark\": DANGER.SUPER_DARK,\n  \"--proton-color__danger-dark\": DANGER.DARK,\n  \"--proton-color__danger-medium\": DANGER.MEDIUM,\n  \"--proton-color__danger-light\": DANGER.LIGHT,\n  \"--proton-color__danger-super-light\": DANGER.SUPER_LIGHT,\n  \"--proton-color__warning-dark\": WARNING.DARK,\n  \"--proton-color__warning-medium\": WARNING.MEDIUM,\n  \"--proton-color__warning-light\": WARNING.LIGHT,\n  \"--proton-color__warning-super-light\": WARNING.SUPER_LIGHT,\n  \"--proton-color__success-dark\": SUCCESS.DARK,\n  \"--proton-color__success-medium\": SUCCESS.MEDIUM,\n  \"--proton-color__success-light\": SUCCESS.LIGHT,\n  \"--proton-color__success-super-light\": SUCCESS.SUPER_LIGHT,\n\n  // Grayscale colors\n  \"--proton-color__gray-super-dark\": LIGHT_GRAYSCALE.SUPER_DARK,\n  \"--proton-color__gray-dark\": LIGHT_GRAYSCALE.DARK,\n  \"--proton-color__gray-medium\": LIGHT_GRAYSCALE.MEDIUM,\n  \"--proton-color__gray-medium-light\": LIGHT_GRAYSCALE.MEDIUM_LIGHT,\n  \"--proton-color__gray-light\": LIGHT_GRAYSCALE.LIGHT,\n  \"--proton-color__gray-lightest\": LIGHT_GRAYSCALE.LIGHTEST,\n  \"--proton-color__gray-super-light\": LIGHT_GRAYSCALE.SUPER_LIGHT,\n  \"--proton-color__white\": LIGHT_GRAYSCALE.WHITE,\n};\n"],"names":["LIGHT_STYLESHEET","BACKGROUNDS","ELEVATION","LIGHT_GRAYSCALE","BORDER","transparentize","BRAND","DANGER","WARNING","SUCCESS"],"mappings":"yLAMaA,EAAqC,CAEhD,qCAAsCC,EAAY,YAAA,MAClD,2CAA4CC,EAAA,UAC5C,+BAAgCC,EAAgB,gBAAA,KAChD,gCAAiCA,EAAgB,gBAAA,WACjD,iCAAkCC,EAAA,OAClC,gCAAiCD,EAAgB,gBAAA,YACjD,iCAAkCE,EAAA,eAChCF,EAAAA,gBAAgB,WAChB,EACF,EACA,kCAAmC,MACnC,sCAAuCG,EAAM,MAAA,cAG7C,0BAA2BA,EAAM,MAAA,QACjC,gCAAiCA,EAAM,MAAA,cACvC,sCAAuCA,EAAM,MAAA,oBAC7C,4BAA6BA,EAAM,MAAA,UACnC,kCAAmCA,EAAM,MAAA,gBACzC,wCAAyCA,EAAM,MAAA,sBAG/C,oCAAqCC,EAAO,OAAA,WAC5C,8BAA+BA,EAAO,OAAA,KACtC,gCAAiCA,EAAO,OAAA,OACxC,+BAAgCA,EAAO,OAAA,MACvC,qCAAsCA,EAAO,OAAA,YAC7C,+BAAgCC,EAAQ,QAAA,KACxC,iCAAkCA,EAAQ,QAAA,OAC1C,gCAAiCA,EAAQ,QAAA,MACzC,sCAAuCA,EAAQ,QAAA,YAC/C,+BAAgCC,EAAQ,QAAA,KACxC,iCAAkCA,EAAQ,QAAA,OAC1C,gCAAiCA,EAAQ,QAAA,MACzC,sCAAuCA,EAAQ,QAAA,YAG/C,kCAAmCN,EAAgB,gBAAA,WACnD,4BAA6BA,EAAgB,gBAAA,KAC7C,8BAA+BA,EAAgB,gBAAA,OAC/C,oCAAqCA,EAAgB,gBAAA,aACrD,6BAA8BA,EAAgB,gBAAA,MAC9C,gCAAiCA,EAAgB,gBAAA,SACjD,mCAAoCA,EAAgB,gBAAA,YACpD,wBAAyBA,EAAgB,gBAAA,KAC3C"}
+{"version":3,"file":"stylesheet.cjs.js","sources":["../../../src/design/lightTheme/stylesheet.ts"],"sourcesContent":["import { transparentize } from \"../../utils/color2k\";\nimport { BACKGROUNDS, BRAND, DANGER, WARNING, SUCCESS } from \"../colors\";\nimport { ELEVATION, LIGHT_GRAYSCALE } from \"./colors\";\nimport { BORDER } from \"./colors\";\nimport type { ProtonStyleSheet } from \"../types\";\n\nexport const LIGHT_STYLESHEET: ProtonStyleSheet = {\n  // Control/component colors\n  \"--proton-control__background-color\": BACKGROUNDS.WHITE,\n  \"--proton-control__background-color-light\": BACKGROUNDS.WHITE,\n  \"--proton-control__elevation-color\": ELEVATION,\n  \"--proton-control__text-color\": LIGHT_GRAYSCALE.DARK,\n  \"--proton-control__title-color\": LIGHT_GRAYSCALE.SUPER_DARK,\n  \"--proton-control__border-color\": BORDER,\n  \"--proton-control__hover-color\": LIGHT_GRAYSCALE.SUPER_LIGHT,\n  \"--proton-control__shadow-color\": transparentize(\n    LIGHT_GRAYSCALE.SUPER_DARK,\n    0.875,\n  ),\n  \"--proton-control__border-radius\": \"4px\",\n\n  // Brand colors\n  \"--proton-color__primary\": BRAND.PRIMARY,\n  \"--proton-color__primary-light\": BRAND.PRIMARY_LIGHT,\n  \"--proton-color__primary-super-light\": BRAND.PRIMARY_SUPER_LIGHT,\n  \"--proton-color__secondary\": BRAND.SECONDARY,\n  \"--proton-color__secondary-light\": BRAND.SECONDARY_LIGHT,\n  \"--proton-color__secondary-super-light\": BRAND.SECONDARY_SUPER_LIGHT,\n\n  // Semantic colors\n  \"--proton-color__danger-super-dark\": DANGER.SUPER_DARK,\n  \"--proton-color__danger-dark\": DANGER.DARK,\n  \"--proton-color__danger-medium\": DANGER.MEDIUM,\n  \"--proton-color__danger-light\": DANGER.LIGHT,\n  \"--proton-color__danger-super-light\": DANGER.SUPER_LIGHT,\n  \"--proton-color__warning-dark\": WARNING.DARK,\n  \"--proton-color__warning-medium\": WARNING.MEDIUM,\n  \"--proton-color__warning-light\": WARNING.LIGHT,\n  \"--proton-color__warning-super-light\": WARNING.SUPER_LIGHT,\n  \"--proton-color__success-dark\": SUCCESS.DARK,\n  \"--proton-color__success-medium\": SUCCESS.MEDIUM,\n  \"--proton-color__success-light\": SUCCESS.LIGHT,\n  \"--proton-color__success-super-light\": SUCCESS.SUPER_LIGHT,\n\n  // Grayscale colors\n  \"--proton-color__gray-super-dark\": LIGHT_GRAYSCALE.SUPER_DARK,\n  \"--proton-color__gray-dark\": LIGHT_GRAYSCALE.DARK,\n  \"--proton-color__gray-medium\": LIGHT_GRAYSCALE.MEDIUM,\n  \"--proton-color__gray-medium-light\": LIGHT_GRAYSCALE.MEDIUM_LIGHT,\n  \"--proton-color__gray-light\": LIGHT_GRAYSCALE.LIGHT,\n  \"--proton-color__gray-lightest\": LIGHT_GRAYSCALE.LIGHTEST,\n  \"--proton-color__gray-super-light\": LIGHT_GRAYSCALE.SUPER_LIGHT,\n  \"--proton-color__white\": LIGHT_GRAYSCALE.WHITE,\n};\n"],"names":["LIGHT_STYLESHEET","BACKGROUNDS","ELEVATION","LIGHT_GRAYSCALE","BORDER","transparentize","BRAND","DANGER","WARNING","SUCCESS"],"mappings":"yLAMaA,EAAqC,CAEhD,qCAAsCC,EAAAA,YAAY,MAClD,2CAA4CA,EAAAA,YAAY,MACxD,oCAAqCC,EAAAA,UACrC,+BAAgCC,EAAAA,gBAAgB,KAChD,gCAAiCA,EAAAA,gBAAgB,WACjD,iCAAkCC,EAAAA,OAClC,gCAAiCD,EAAAA,gBAAgB,YACjD,iCAAkCE,EAAAA,eAChCF,EAAAA,gBAAgB,WAChB,IAAA,EAEF,kCAAmC,MAGnC,0BAA2BG,EAAAA,MAAM,QACjC,gCAAiCA,EAAAA,MAAM,cACvC,sCAAuCA,EAAAA,MAAM,oBAC7C,4BAA6BA,EAAAA,MAAM,UACnC,kCAAmCA,EAAAA,MAAM,gBACzC,wCAAyCA,EAAAA,MAAM,sBAG/C,oCAAqCC,EAAAA,OAAO,WAC5C,8BAA+BA,EAAAA,OAAO,KACtC,gCAAiCA,EAAAA,OAAO,OACxC,+BAAgCA,EAAAA,OAAO,MACvC,qCAAsCA,EAAAA,OAAO,YAC7C,+BAAgCC,EAAAA,QAAQ,KACxC,iCAAkCA,EAAAA,QAAQ,OAC1C,gCAAiCA,EAAAA,QAAQ,MACzC,sCAAuCA,EAAAA,QAAQ,YAC/C,+BAAgCC,EAAAA,QAAQ,KACxC,iCAAkCA,EAAAA,QAAQ,OAC1C,gCAAiCA,EAAAA,QAAQ,MACzC,sCAAuCA,EAAAA,QAAQ,YAG/C,kCAAmCN,EAAAA,gBAAgB,WACnD,4BAA6BA,EAAAA,gBAAgB,KAC7C,8BAA+BA,EAAAA,gBAAgB,OAC/C,oCAAqCA,EAAAA,gBAAgB,aACrD,6BAA8BA,EAAAA,gBAAgB,MAC9C,gCAAiCA,EAAAA,gBAAgB,SACjD,mCAAoCA,EAAAA,gBAAgB,YACpD,wBAAyBA,EAAAA,gBAAgB,KAC3C"}

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

@@ -1,20 +1,20 @@
-import { transparentize as l } from "../../utils/color2k.es.js";
-import { BACKGROUNDS as c, BRAND as r, DANGER as _, WARNING as t, SUCCESS as n } from "../colors.es.js";
-import { ELEVATION as p, LIGHT_GRAYSCALE as o, BORDER as R } from "./colors.es.js";
+import { transparentize as c } from "../../utils/color2k.es.js";
+import { SUCCESS as t, WARNING as n, DANGER as _, BRAND as r, BACKGROUNDS as l } from "../colors.es.js";
+import { LIGHT_GRAYSCALE as o, BORDER as p, ELEVATION as e } from "./colors.es.js";
 const g = {
   // Control/component colors
-  "--proton-control__background-color": c.WHITE,
-  "--proton-control__background-color-light": p,
+  "--proton-control__background-color": l.WHITE,
+  "--proton-control__background-color-light": l.WHITE,
+  "--proton-control__elevation-color": e,
   "--proton-control__text-color": o.DARK,
   "--proton-control__title-color": o.SUPER_DARK,
-  "--proton-control__border-color": R,
+  "--proton-control__border-color": p,
   "--proton-control__hover-color": o.SUPER_LIGHT,
-  "--proton-control__shadow-color": l(
+  "--proton-control__shadow-color": c(
     o.SUPER_DARK,
-    0.9
+    0.875
   ),
   "--proton-control__border-radius": "4px",
-  "--proton-control__interactive-color": r.PRIMARY_LIGHT,
   // Brand colors
   "--proton-color__primary": r.PRIMARY,
   "--proton-color__primary-light": r.PRIMARY_LIGHT,
@@ -28,14 +28,14 @@ const g = {
   "--proton-color__danger-medium": _.MEDIUM,
   "--proton-color__danger-light": _.LIGHT,
   "--proton-color__danger-super-light": _.SUPER_LIGHT,
-  "--proton-color__warning-dark": t.DARK,
-  "--proton-color__warning-medium": t.MEDIUM,
-  "--proton-color__warning-light": t.LIGHT,
-  "--proton-color__warning-super-light": t.SUPER_LIGHT,
-  "--proton-color__success-dark": n.DARK,
-  "--proton-color__success-medium": n.MEDIUM,
-  "--proton-color__success-light": n.LIGHT,
-  "--proton-color__success-super-light": n.SUPER_LIGHT,
+  "--proton-color__warning-dark": n.DARK,
+  "--proton-color__warning-medium": n.MEDIUM,
+  "--proton-color__warning-light": n.LIGHT,
+  "--proton-color__warning-super-light": n.SUPER_LIGHT,
+  "--proton-color__success-dark": t.DARK,
+  "--proton-color__success-medium": t.MEDIUM,
+  "--proton-color__success-light": t.LIGHT,
+  "--proton-color__success-super-light": t.SUPER_LIGHT,
   // Grayscale colors
   "--proton-color__gray-super-dark": o.SUPER_DARK,
   "--proton-color__gray-dark": o.DARK,

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

@@ -1 +1 @@
-{"version":3,"file":"stylesheet.es.js","sources":["../../../src/design/lightTheme/stylesheet.ts"],"sourcesContent":["import { transparentize } from \"../../utils/color2k\";\nimport { BACKGROUNDS, BRAND, DANGER, WARNING, SUCCESS } from \"../colors\";\nimport { ELEVATION, LIGHT_GRAYSCALE } from \"./colors\";\nimport { BORDER } from \"./colors\";\nimport type { ProtonStyleSheet } from \"../types\";\n\nexport const LIGHT_STYLESHEET: ProtonStyleSheet = {\n  // Control/component colors\n  \"--proton-control__background-color\": BACKGROUNDS.WHITE,\n  \"--proton-control__background-color-light\": ELEVATION,\n  \"--proton-control__text-color\": LIGHT_GRAYSCALE.DARK,\n  \"--proton-control__title-color\": LIGHT_GRAYSCALE.SUPER_DARK,\n  \"--proton-control__border-color\": BORDER,\n  \"--proton-control__hover-color\": LIGHT_GRAYSCALE.SUPER_LIGHT,\n  \"--proton-control__shadow-color\": transparentize(\n    LIGHT_GRAYSCALE.SUPER_DARK,\n    0.9\n  ),\n  \"--proton-control__border-radius\": \"4px\",\n  \"--proton-control__interactive-color\": BRAND.PRIMARY_LIGHT,\n\n  // Brand colors\n  \"--proton-color__primary\": BRAND.PRIMARY,\n  \"--proton-color__primary-light\": BRAND.PRIMARY_LIGHT,\n  \"--proton-color__primary-super-light\": BRAND.PRIMARY_SUPER_LIGHT,\n  \"--proton-color__secondary\": BRAND.SECONDARY,\n  \"--proton-color__secondary-light\": BRAND.SECONDARY_LIGHT,\n  \"--proton-color__secondary-super-light\": BRAND.SECONDARY_SUPER_LIGHT,\n\n  // Semantic colors\n  \"--proton-color__danger-super-dark\": DANGER.SUPER_DARK,\n  \"--proton-color__danger-dark\": DANGER.DARK,\n  \"--proton-color__danger-medium\": DANGER.MEDIUM,\n  \"--proton-color__danger-light\": DANGER.LIGHT,\n  \"--proton-color__danger-super-light\": DANGER.SUPER_LIGHT,\n  \"--proton-color__warning-dark\": WARNING.DARK,\n  \"--proton-color__warning-medium\": WARNING.MEDIUM,\n  \"--proton-color__warning-light\": WARNING.LIGHT,\n  \"--proton-color__warning-super-light\": WARNING.SUPER_LIGHT,\n  \"--proton-color__success-dark\": SUCCESS.DARK,\n  \"--proton-color__success-medium\": SUCCESS.MEDIUM,\n  \"--proton-color__success-light\": SUCCESS.LIGHT,\n  \"--proton-color__success-super-light\": SUCCESS.SUPER_LIGHT,\n\n  // Grayscale colors\n  \"--proton-color__gray-super-dark\": LIGHT_GRAYSCALE.SUPER_DARK,\n  \"--proton-color__gray-dark\": LIGHT_GRAYSCALE.DARK,\n  \"--proton-color__gray-medium\": LIGHT_GRAYSCALE.MEDIUM,\n  \"--proton-color__gray-medium-light\": LIGHT_GRAYSCALE.MEDIUM_LIGHT,\n  \"--proton-color__gray-light\": LIGHT_GRAYSCALE.LIGHT,\n  \"--proton-color__gray-lightest\": LIGHT_GRAYSCALE.LIGHTEST,\n  \"--proton-color__gray-super-light\": LIGHT_GRAYSCALE.SUPER_LIGHT,\n  \"--proton-color__white\": LIGHT_GRAYSCALE.WHITE,\n};\n"],"names":["LIGHT_STYLESHEET","BACKGROUNDS","ELEVATION","LIGHT_GRAYSCALE","BORDER","transparentize","BRAND","DANGER","WARNING","SUCCESS"],"mappings":";;;AAMO,MAAMA,IAAqC;AAAA;AAAA,EAEhD,sCAAsCC,EAAY;AAAA,EAClD,4CAA4CC;AAAA,EAC5C,gCAAgCC,EAAgB;AAAA,EAChD,iCAAiCA,EAAgB;AAAA,EACjD,kCAAkCC;AAAA,EAClC,iCAAiCD,EAAgB;AAAA,EACjD,kCAAkCE;AAAA,IAChCF,EAAgB;AAAA,IAChB;AAAA,EACF;AAAA,EACA,mCAAmC;AAAA,EACnC,uCAAuCG,EAAM;AAAA;AAAA,EAG7C,2BAA2BA,EAAM;AAAA,EACjC,iCAAiCA,EAAM;AAAA,EACvC,uCAAuCA,EAAM;AAAA,EAC7C,6BAA6BA,EAAM;AAAA,EACnC,mCAAmCA,EAAM;AAAA,EACzC,yCAAyCA,EAAM;AAAA;AAAA,EAG/C,qCAAqCC,EAAO;AAAA,EAC5C,+BAA+BA,EAAO;AAAA,EACtC,iCAAiCA,EAAO;AAAA,EACxC,gCAAgCA,EAAO;AAAA,EACvC,sCAAsCA,EAAO;AAAA,EAC7C,gCAAgCC,EAAQ;AAAA,EACxC,kCAAkCA,EAAQ;AAAA,EAC1C,iCAAiCA,EAAQ;AAAA,EACzC,uCAAuCA,EAAQ;AAAA,EAC/C,gCAAgCC,EAAQ;AAAA,EACxC,kCAAkCA,EAAQ;AAAA,EAC1C,iCAAiCA,EAAQ;AAAA,EACzC,uCAAuCA,EAAQ;AAAA;AAAA,EAG/C,mCAAmCN,EAAgB;AAAA,EACnD,6BAA6BA,EAAgB;AAAA,EAC7C,+BAA+BA,EAAgB;AAAA,EAC/C,qCAAqCA,EAAgB;AAAA,EACrD,8BAA8BA,EAAgB;AAAA,EAC9C,iCAAiCA,EAAgB;AAAA,EACjD,oCAAoCA,EAAgB;AAAA,EACpD,yBAAyBA,EAAgB;AAC3C;"}
+{"version":3,"file":"stylesheet.es.js","sources":["../../../src/design/lightTheme/stylesheet.ts"],"sourcesContent":["import { transparentize } from \"../../utils/color2k\";\nimport { BACKGROUNDS, BRAND, DANGER, WARNING, SUCCESS } from \"../colors\";\nimport { ELEVATION, LIGHT_GRAYSCALE } from \"./colors\";\nimport { BORDER } from \"./colors\";\nimport type { ProtonStyleSheet } from \"../types\";\n\nexport const LIGHT_STYLESHEET: ProtonStyleSheet = {\n  // Control/component colors\n  \"--proton-control__background-color\": BACKGROUNDS.WHITE,\n  \"--proton-control__background-color-light\": BACKGROUNDS.WHITE,\n  \"--proton-control__elevation-color\": ELEVATION,\n  \"--proton-control__text-color\": LIGHT_GRAYSCALE.DARK,\n  \"--proton-control__title-color\": LIGHT_GRAYSCALE.SUPER_DARK,\n  \"--proton-control__border-color\": BORDER,\n  \"--proton-control__hover-color\": LIGHT_GRAYSCALE.SUPER_LIGHT,\n  \"--proton-control__shadow-color\": transparentize(\n    LIGHT_GRAYSCALE.SUPER_DARK,\n    0.875,\n  ),\n  \"--proton-control__border-radius\": \"4px\",\n\n  // Brand colors\n  \"--proton-color__primary\": BRAND.PRIMARY,\n  \"--proton-color__primary-light\": BRAND.PRIMARY_LIGHT,\n  \"--proton-color__primary-super-light\": BRAND.PRIMARY_SUPER_LIGHT,\n  \"--proton-color__secondary\": BRAND.SECONDARY,\n  \"--proton-color__secondary-light\": BRAND.SECONDARY_LIGHT,\n  \"--proton-color__secondary-super-light\": BRAND.SECONDARY_SUPER_LIGHT,\n\n  // Semantic colors\n  \"--proton-color__danger-super-dark\": DANGER.SUPER_DARK,\n  \"--proton-color__danger-dark\": DANGER.DARK,\n  \"--proton-color__danger-medium\": DANGER.MEDIUM,\n  \"--proton-color__danger-light\": DANGER.LIGHT,\n  \"--proton-color__danger-super-light\": DANGER.SUPER_LIGHT,\n  \"--proton-color__warning-dark\": WARNING.DARK,\n  \"--proton-color__warning-medium\": WARNING.MEDIUM,\n  \"--proton-color__warning-light\": WARNING.LIGHT,\n  \"--proton-color__warning-super-light\": WARNING.SUPER_LIGHT,\n  \"--proton-color__success-dark\": SUCCESS.DARK,\n  \"--proton-color__success-medium\": SUCCESS.MEDIUM,\n  \"--proton-color__success-light\": SUCCESS.LIGHT,\n  \"--proton-color__success-super-light\": SUCCESS.SUPER_LIGHT,\n\n  // Grayscale colors\n  \"--proton-color__gray-super-dark\": LIGHT_GRAYSCALE.SUPER_DARK,\n  \"--proton-color__gray-dark\": LIGHT_GRAYSCALE.DARK,\n  \"--proton-color__gray-medium\": LIGHT_GRAYSCALE.MEDIUM,\n  \"--proton-color__gray-medium-light\": LIGHT_GRAYSCALE.MEDIUM_LIGHT,\n  \"--proton-color__gray-light\": LIGHT_GRAYSCALE.LIGHT,\n  \"--proton-color__gray-lightest\": LIGHT_GRAYSCALE.LIGHTEST,\n  \"--proton-color__gray-super-light\": LIGHT_GRAYSCALE.SUPER_LIGHT,\n  \"--proton-color__white\": LIGHT_GRAYSCALE.WHITE,\n};\n"],"names":["LIGHT_STYLESHEET","BACKGROUNDS","ELEVATION","LIGHT_GRAYSCALE","BORDER","transparentize","BRAND","DANGER","WARNING","SUCCESS"],"mappings":";;;AAMO,MAAMA,IAAqC;AAAA;AAAA,EAEhD,sCAAsCC,EAAY;AAAA,EAClD,4CAA4CA,EAAY;AAAA,EACxD,qCAAqCC;AAAA,EACrC,gCAAgCC,EAAgB;AAAA,EAChD,iCAAiCA,EAAgB;AAAA,EACjD,kCAAkCC;AAAA,EAClC,iCAAiCD,EAAgB;AAAA,EACjD,kCAAkCE;AAAA,IAChCF,EAAgB;AAAA,IAChB;AAAA,EAAA;AAAA,EAEF,mCAAmC;AAAA;AAAA,EAGnC,2BAA2BG,EAAM;AAAA,EACjC,iCAAiCA,EAAM;AAAA,EACvC,uCAAuCA,EAAM;AAAA,EAC7C,6BAA6BA,EAAM;AAAA,EACnC,mCAAmCA,EAAM;AAAA,EACzC,yCAAyCA,EAAM;AAAA;AAAA,EAG/C,qCAAqCC,EAAO;AAAA,EAC5C,+BAA+BA,EAAO;AAAA,EACtC,iCAAiCA,EAAO;AAAA,EACxC,gCAAgCA,EAAO;AAAA,EACvC,sCAAsCA,EAAO;AAAA,EAC7C,gCAAgCC,EAAQ;AAAA,EACxC,kCAAkCA,EAAQ;AAAA,EAC1C,iCAAiCA,EAAQ;AAAA,EACzC,uCAAuCA,EAAQ;AAAA,EAC/C,gCAAgCC,EAAQ;AAAA,EACxC,kCAAkCA,EAAQ;AAAA,EAC1C,iCAAiCA,EAAQ;AAAA,EACzC,uCAAuCA,EAAQ;AAAA;AAAA,EAG/C,mCAAmCN,EAAgB;AAAA,EACnD,6BAA6BA,EAAgB;AAAA,EAC7C,+BAA+BA,EAAgB;AAAA,EAC/C,qCAAqCA,EAAgB;AAAA,EACrD,8BAA8BA,EAAgB;AAAA,EAC9C,iCAAiCA,EAAgB;AAAA,EACjD,oCAAoCA,EAAgB;AAAA,EACpD,yBAAyBA,EAAgB;AAC3C;"}

package/dist/hooks/useBreakpoint.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react");function c(t,d="down"){const e=d==="down"?`(max-width: ${t}px)`:`(min-width: ${t}px)`,[o,r]=a.useState(()=>typeof window<"u"?window.matchMedia(e).matches:!1);return a.useEffect(()=>{if(typeof window>"u")return;const n=window.matchMedia(e),i=s=>{r(s.matches)};return n.addEventListener("change",i),()=>n.removeEventListener("change",i)},[e]),o}exports.useBreakpoint=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react");function i(n,r="down"){const e=r==="down"?`(max-width: ${n}px)`:`(min-width: ${n}px)`,a=t.useCallback(s=>{const o=window.matchMedia(e);return o.addEventListener("change",s),()=>o.removeEventListener("change",s)},[e]),u=t.useCallback(()=>window.matchMedia(e).matches,[e]);return t.useSyncExternalStore(a,u,()=>r==="up")}exports.useBreakpoint=i;
 //# sourceMappingURL=useBreakpoint.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.cjs.js","sources":["../../src/hooks/useBreakpoint.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { useEffect } from \"react\";\nimport { Breakpoint } from \"../constants\";\n\ntype BreakpointDirection = \"up\" | \"down\";\n\nexport function useBreakpoint(\n  breakpoint: Breakpoint,\n  direction: BreakpointDirection = \"down\"\n) {\n  const query =\n    direction === \"down\"\n      ? `(max-width: ${breakpoint}px)`\n      : `(min-width: ${breakpoint}px)`;\n\n  const [matches, setMatches] = useState(() =>\n    typeof window !== \"undefined\" ? window.matchMedia(query).matches : false\n  );\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n\n    const mediaQuery = window.matchMedia(query);\n    const handler = (event: MediaQueryListEvent) => {\n      setMatches(event.matches);\n    };\n\n    mediaQuery.addEventListener(\"change\", handler);\n    return () => mediaQuery.removeEventListener(\"change\", handler);\n  }, [query]);\n\n  return matches;\n}\n"],"names":["useBreakpoint","breakpoint","direction","query","matches","setMatches","useState","useEffect","mediaQuery","handler","event"],"mappings":"yGAOgB,SAAAA,EACdC,EACAC,EAAiC,OACjC,CACA,MAAMC,EACJD,IAAc,OACV,eAAeD,CAAU,MACzB,eAAeA,CAAU,MAEzB,CAACG,EAASC,CAAU,EAAIC,EAAA,SAAS,IACrC,OAAO,OAAW,IAAc,OAAO,WAAWH,CAAK,EAAE,QAAU,EAAA,EAGrEI,OAAAA,EAAAA,UAAU,IAAM,CACV,GAAA,OAAO,OAAW,IAAa,OAE7B,MAAAC,EAAa,OAAO,WAAWL,CAAK,EACpCM,EAAWC,GAA+B,CAC9CL,EAAWK,EAAM,OAAO,CAAA,EAGf,OAAAF,EAAA,iBAAiB,SAAUC,CAAO,EACtC,IAAMD,EAAW,oBAAoB,SAAUC,CAAO,CAAA,EAC5D,CAACN,CAAK,CAAC,EAEHC,CACT"}
+{"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"}

package/dist/hooks/useBreakpoint.es.js

@@ -1,17 +1,18 @@
-import { useState as s, useEffect as c } from "react";
-function h(t, i = "down") {
-  const e = i === "down" ? `(max-width: ${t}px)` : `(min-width: ${t}px)`, [o, a] = s(
-    () => typeof window < "u" ? window.matchMedia(e).matches : !1
+import { useCallback as s, useSyncExternalStore as i } from "react";
+function m(n, t = "down") {
+  const e = t === "down" ? `(max-width: ${n}px)` : `(min-width: ${n}px)`, a = s(
+    (o) => {
+      const r = window.matchMedia(e);
+      return r.addEventListener("change", o), () => r.removeEventListener("change", o);
+    },
+    [e]
+  ), c = s(
+    () => window.matchMedia(e).matches,
+    [e]
   );
-  return c(() => {
-    if (typeof window > "u") return;
-    const n = window.matchMedia(e), d = (r) => {
-      a(r.matches);
-    };
-    return n.addEventListener("change", d), () => n.removeEventListener("change", d);
-  }, [e]), o;
+  return i(a, c, () => t === "up");
 }
 export {
-  h as useBreakpoint
+  m as useBreakpoint
 };
 //# sourceMappingURL=useBreakpoint.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.es.js","sources":["../../src/hooks/useBreakpoint.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { useEffect } from \"react\";\nimport { Breakpoint } from \"../constants\";\n\ntype BreakpointDirection = \"up\" | \"down\";\n\nexport function useBreakpoint(\n  breakpoint: Breakpoint,\n  direction: BreakpointDirection = \"down\"\n) {\n  const query =\n    direction === \"down\"\n      ? `(max-width: ${breakpoint}px)`\n      : `(min-width: ${breakpoint}px)`;\n\n  const [matches, setMatches] = useState(() =>\n    typeof window !== \"undefined\" ? window.matchMedia(query).matches : false\n  );\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n\n    const mediaQuery = window.matchMedia(query);\n    const handler = (event: MediaQueryListEvent) => {\n      setMatches(event.matches);\n    };\n\n    mediaQuery.addEventListener(\"change\", handler);\n    return () => mediaQuery.removeEventListener(\"change\", handler);\n  }, [query]);\n\n  return matches;\n}\n"],"names":["useBreakpoint","breakpoint","direction","query","matches","setMatches","useState","useEffect","mediaQuery","handler","event"],"mappings":";AAOgB,SAAAA,EACdC,GACAC,IAAiC,QACjC;AACA,QAAMC,IACJD,MAAc,SACV,eAAeD,CAAU,QACzB,eAAeA,CAAU,OAEzB,CAACG,GAASC,CAAU,IAAIC;AAAA,IAAS,MACrC,OAAO,SAAW,MAAc,OAAO,WAAWH,CAAK,EAAE,UAAU;AAAA,EAAA;AAGrE,SAAAI,EAAU,MAAM;AACV,QAAA,OAAO,SAAW,IAAa;AAE7B,UAAAC,IAAa,OAAO,WAAWL,CAAK,GACpCM,IAAU,CAACC,MAA+B;AAC9C,MAAAL,EAAWK,EAAM,OAAO;AAAA,IAAA;AAGf,WAAAF,EAAA,iBAAiB,UAAUC,CAAO,GACtC,MAAMD,EAAW,oBAAoB,UAAUC,CAAO;AAAA,EAAA,GAC5D,CAACN,CAAK,CAAC,GAEHC;AACT;"}
+{"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;"}

package/dist/hooks/useIsClosing.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react");function d({duration:i=200,onClose:t,overlayRef:e}){const[r,c]=s.useState(!1),[u,n]=s.useState(),a=s.useCallback(()=>{if(i<=0){console.warn("useIsClosing: Duration must be positive. Executing onClose immediately."),t==null||t();return}c(!0),e!=null&&e.current&&e.current.classList.add("proton-ScreenOverlay__fade-out");const g=setTimeout(()=>{t==null||t(),c(!1)},i);n(g)},[i,t,e]);return s.useEffect(()=>()=>{u&&clearTimeout(u)},[u]),{isClosing:r,handleClose:a}}exports.useIsClosing=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react");function g({duration:i=200,onClose:t,overlayRef:e}){const[r,c]=s.useState(!1),[u,n]=s.useState(),a=s.useCallback(()=>{if(i<=0){console.warn("useIsClosing: Duration must be positive. Executing onClose immediately."),t==null||t();return}c(!0),e!=null&&e.current&&e.current.classList.add("proton-ScreenOverlay__fade-out");const d=setTimeout(()=>{t==null||t(),c(!1)},i);n(d)},[i,t,e]);return s.useEffect(()=>()=>{u&&clearTimeout(u)},[u]),{isClosing:r,handleClose:a}}exports.useIsClosing=g;
 //# sourceMappingURL=useIsClosing.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useIsClosing.cjs.js","sources":["../../src/hooks/useIsClosing.tsx"],"sourcesContent":["import { useState, useCallback, RefObject, useEffect } from \"react\";\n\ninterface UseIsClosingOptions {\n  /**\n   * Duration of the closing animation in milliseconds\n   * @default 200\n   */\n  duration?: number;\n  /**\n   * Callback to run after the closing animation completes\n   */\n  onClose?: () => void;\n  /**\n   * When passed, the fade-out class will be added to @ScreenOverlay on close\n   */\n  overlayRef?: RefObject<HTMLElement>;\n}\n\n/**\n * Hook to manage the closing animation state of a component\n * @interface UseIsClosingOptions\n * @returns Object containing isClosing state and handleClose function\n */\nexport function useIsClosing({\n  duration = 200,\n  onClose,\n  overlayRef,\n}: UseIsClosingOptions) {\n  const [isClosing, setIsClosing] = useState(false);\n  const [timeoutId, setTimeoutId] = useState<number>();\n\n  const handleClose = useCallback(() => {\n    if (duration <= 0) {\n      console.warn(\n        \"useIsClosing: Duration must be positive. Executing onClose immediately.\"\n      );\n      onClose?.();\n      return;\n    }\n\n    setIsClosing(true);\n\n    if (overlayRef?.current) {\n      overlayRef.current.classList.add(\"proton-ScreenOverlay__fade-out\");\n    }\n\n    const id = setTimeout(() => {\n      onClose?.();\n      setIsClosing(false);\n    }, duration);\n\n    setTimeoutId(id);\n  }, [duration, onClose, overlayRef]);\n\n  useEffect(() => {\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [timeoutId]);\n\n  return {\n    isClosing,\n    handleClose,\n  };\n}\n"],"names":["useIsClosing","duration","onClose","overlayRef","isClosing","setIsClosing","useState","timeoutId","setTimeoutId","handleClose","useCallback","id","useEffect"],"mappings":"yGAuBO,SAASA,EAAa,CAC3B,SAAAC,EAAW,IACX,QAAAC,EACA,WAAAC,CACF,EAAwB,CACtB,KAAM,CAACC,EAAWC,CAAY,EAAIC,WAAS,EAAK,EAC1C,CAACC,EAAWC,CAAY,EAAIF,EAAiB,SAAA,EAE7CG,EAAcC,EAAAA,YAAY,IAAM,CACpC,GAAIT,GAAY,EAAG,CACT,QAAA,KACN,yEAAA,EAEQC,GAAA,MAAAA,IACV,MACF,CAEAG,EAAa,EAAI,EAEbF,GAAA,MAAAA,EAAY,SACHA,EAAA,QAAQ,UAAU,IAAI,gCAAgC,EAG7D,MAAAQ,EAAK,WAAW,IAAM,CAChBT,GAAA,MAAAA,IACVG,EAAa,EAAK,GACjBJ,CAAQ,EAEXO,EAAaG,CAAE,CACd,EAAA,CAACV,EAAUC,EAASC,CAAU,CAAC,EAElCS,OAAAA,EAAAA,UAAU,IACD,IAAM,CACPL,GACF,aAAaA,CAAS,CACxB,EAED,CAACA,CAAS,CAAC,EAEP,CACL,UAAAH,EACA,YAAAK,CAAA,CAEJ"}
+{"version":3,"file":"useIsClosing.cjs.js","sources":["../../src/hooks/useIsClosing.tsx"],"sourcesContent":["import { useState, useCallback, RefObject, useEffect } from \"react\";\n\ninterface UseIsClosingOptions {\n  /**\n   * Duration of the closing animation in milliseconds\n   * @default 200\n   */\n  duration?: number;\n  /**\n   * Callback to run after the closing animation completes\n   */\n  onClose?: () => void;\n  /**\n   * When passed, the fade-out class will be added to @ScreenOverlay on close\n   */\n  overlayRef?: RefObject<HTMLElement | null>;\n}\n\n/**\n * Hook to manage the closing animation state of a component\n * @interface UseIsClosingOptions\n * @returns Object containing isClosing state and handleClose function\n */\nexport function useIsClosing({\n  duration = 200,\n  onClose,\n  overlayRef,\n}: UseIsClosingOptions) {\n  const [isClosing, setIsClosing] = useState(false);\n  const [timeoutId, setTimeoutId] = useState<number>();\n\n  const handleClose = useCallback(() => {\n    if (duration <= 0) {\n      console.warn(\n        \"useIsClosing: Duration must be positive. Executing onClose immediately.\"\n      );\n      onClose?.();\n      return;\n    }\n\n    setIsClosing(true);\n\n    if (overlayRef?.current) {\n      overlayRef.current.classList.add(\"proton-ScreenOverlay__fade-out\");\n    }\n\n    const id = setTimeout(() => {\n      onClose?.();\n      setIsClosing(false);\n    }, duration);\n\n    setTimeoutId(id);\n  }, [duration, onClose, overlayRef]);\n\n  useEffect(() => {\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [timeoutId]);\n\n  return {\n    isClosing,\n    handleClose,\n  };\n}\n"],"names":["useIsClosing","duration","onClose","overlayRef","isClosing","setIsClosing","useState","timeoutId","setTimeoutId","handleClose","useCallback","id","useEffect"],"mappings":"yGAuBO,SAASA,EAAa,CAC3B,SAAAC,EAAW,IACX,QAAAC,EACA,WAAAC,CACF,EAAwB,CACtB,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAK,EAC1C,CAACC,EAAWC,CAAY,EAAIF,WAAA,EAE5BG,EAAcC,EAAAA,YAAY,IAAM,CACpC,GAAIT,GAAY,EAAG,CACjB,QAAQ,KACN,yEAAA,EAEFC,GAAA,MAAAA,IACA,MACF,CAEAG,EAAa,EAAI,EAEbF,GAAA,MAAAA,EAAY,SACdA,EAAW,QAAQ,UAAU,IAAI,gCAAgC,EAGnE,MAAMQ,EAAK,WAAW,IAAM,CAC1BT,GAAA,MAAAA,IACAG,EAAa,EAAK,CACpB,EAAGJ,CAAQ,EAEXO,EAAaG,CAAE,CACjB,EAAG,CAACV,EAAUC,EAASC,CAAU,CAAC,EAElCS,OAAAA,EAAAA,UAAU,IACD,IAAM,CACPL,GACF,aAAaA,CAAS,CAE1B,EACC,CAACA,CAAS,CAAC,EAEP,CACL,UAAAH,EACA,YAAAK,CAAA,CAEJ"}

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

@@ -1 +1 @@
-{"version":3,"file":"useIsClosing.es.js","sources":["../../src/hooks/useIsClosing.tsx"],"sourcesContent":["import { useState, useCallback, RefObject, useEffect } from \"react\";\n\ninterface UseIsClosingOptions {\n  /**\n   * Duration of the closing animation in milliseconds\n   * @default 200\n   */\n  duration?: number;\n  /**\n   * Callback to run after the closing animation completes\n   */\n  onClose?: () => void;\n  /**\n   * When passed, the fade-out class will be added to @ScreenOverlay on close\n   */\n  overlayRef?: RefObject<HTMLElement>;\n}\n\n/**\n * Hook to manage the closing animation state of a component\n * @interface UseIsClosingOptions\n * @returns Object containing isClosing state and handleClose function\n */\nexport function useIsClosing({\n  duration = 200,\n  onClose,\n  overlayRef,\n}: UseIsClosingOptions) {\n  const [isClosing, setIsClosing] = useState(false);\n  const [timeoutId, setTimeoutId] = useState<number>();\n\n  const handleClose = useCallback(() => {\n    if (duration <= 0) {\n      console.warn(\n        \"useIsClosing: Duration must be positive. Executing onClose immediately.\"\n      );\n      onClose?.();\n      return;\n    }\n\n    setIsClosing(true);\n\n    if (overlayRef?.current) {\n      overlayRef.current.classList.add(\"proton-ScreenOverlay__fade-out\");\n    }\n\n    const id = setTimeout(() => {\n      onClose?.();\n      setIsClosing(false);\n    }, duration);\n\n    setTimeoutId(id);\n  }, [duration, onClose, overlayRef]);\n\n  useEffect(() => {\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [timeoutId]);\n\n  return {\n    isClosing,\n    handleClose,\n  };\n}\n"],"names":["useIsClosing","duration","onClose","overlayRef","isClosing","setIsClosing","useState","timeoutId","setTimeoutId","handleClose","useCallback","id","useEffect"],"mappings":";AAuBO,SAASA,EAAa;AAAA,EAC3B,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,YAAAC;AACF,GAAwB;AACtB,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAWC,CAAY,IAAIF,EAAiB,GAE7CG,IAAcC,EAAY,MAAM;AACpC,QAAIT,KAAY,GAAG;AACT,cAAA;AAAA,QACN;AAAA,MAAA,GAEQC,KAAA,QAAAA;AACV;AAAA,IACF;AAEA,IAAAG,EAAa,EAAI,GAEbF,KAAA,QAAAA,EAAY,WACHA,EAAA,QAAQ,UAAU,IAAI,gCAAgC;AAG7D,UAAAQ,IAAK,WAAW,MAAM;AAChB,MAAAT,KAAA,QAAAA,KACVG,EAAa,EAAK;AAAA,OACjBJ,CAAQ;AAEX,IAAAO,EAAaG,CAAE;AAAA,EACd,GAAA,CAACV,GAAUC,GAASC,CAAU,CAAC;AAElC,SAAAS,EAAU,MACD,MAAM;AACX,IAAIL,KACF,aAAaA,CAAS;AAAA,EACxB,GAED,CAACA,CAAS,CAAC,GAEP;AAAA,IACL,WAAAH;AAAA,IACA,aAAAK;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useIsClosing.es.js","sources":["../../src/hooks/useIsClosing.tsx"],"sourcesContent":["import { useState, useCallback, RefObject, useEffect } from \"react\";\n\ninterface UseIsClosingOptions {\n  /**\n   * Duration of the closing animation in milliseconds\n   * @default 200\n   */\n  duration?: number;\n  /**\n   * Callback to run after the closing animation completes\n   */\n  onClose?: () => void;\n  /**\n   * When passed, the fade-out class will be added to @ScreenOverlay on close\n   */\n  overlayRef?: RefObject<HTMLElement | null>;\n}\n\n/**\n * Hook to manage the closing animation state of a component\n * @interface UseIsClosingOptions\n * @returns Object containing isClosing state and handleClose function\n */\nexport function useIsClosing({\n  duration = 200,\n  onClose,\n  overlayRef,\n}: UseIsClosingOptions) {\n  const [isClosing, setIsClosing] = useState(false);\n  const [timeoutId, setTimeoutId] = useState<number>();\n\n  const handleClose = useCallback(() => {\n    if (duration <= 0) {\n      console.warn(\n        \"useIsClosing: Duration must be positive. Executing onClose immediately.\"\n      );\n      onClose?.();\n      return;\n    }\n\n    setIsClosing(true);\n\n    if (overlayRef?.current) {\n      overlayRef.current.classList.add(\"proton-ScreenOverlay__fade-out\");\n    }\n\n    const id = setTimeout(() => {\n      onClose?.();\n      setIsClosing(false);\n    }, duration);\n\n    setTimeoutId(id);\n  }, [duration, onClose, overlayRef]);\n\n  useEffect(() => {\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [timeoutId]);\n\n  return {\n    isClosing,\n    handleClose,\n  };\n}\n"],"names":["useIsClosing","duration","onClose","overlayRef","isClosing","setIsClosing","useState","timeoutId","setTimeoutId","handleClose","useCallback","id","useEffect"],"mappings":";AAuBO,SAASA,EAAa;AAAA,EAC3B,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,YAAAC;AACF,GAAwB;AACtB,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAWC,CAAY,IAAIF,EAAA,GAE5BG,IAAcC,EAAY,MAAM;AACpC,QAAIT,KAAY,GAAG;AACjB,cAAQ;AAAA,QACN;AAAA,MAAA,GAEFC,KAAA,QAAAA;AACA;AAAA,IACF;AAEA,IAAAG,EAAa,EAAI,GAEbF,KAAA,QAAAA,EAAY,WACdA,EAAW,QAAQ,UAAU,IAAI,gCAAgC;AAGnE,UAAMQ,IAAK,WAAW,MAAM;AAC1B,MAAAT,KAAA,QAAAA,KACAG,EAAa,EAAK;AAAA,IACpB,GAAGJ,CAAQ;AAEX,IAAAO,EAAaG,CAAE;AAAA,EACjB,GAAG,CAACV,GAAUC,GAASC,CAAU,CAAC;AAElC,SAAAS,EAAU,MACD,MAAM;AACX,IAAIL,KACF,aAAaA,CAAS;AAAA,EAE1B,GACC,CAACA,CAAS,CAAC,GAEP;AAAA,IACL,WAAAH;AAAA,IACA,aAAAK;AAAA,EAAA;AAEJ;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useLockBodyScroll.cjs.js","sources":["../../src/hooks/useLockBodyScroll.tsx"],"sourcesContent":["import { useLayoutEffect } from \"react\";\n\n/**\n * A React hook that prevents body scrolling while a component is mounted.\n * Useful for modals, overlays, and other components that should prevent background scrolling.\n */\nexport function useLockBodyScroll(isActive: boolean = true) {\n  useLayoutEffect(() => {\n    if (!isActive) return;\n\n    // Get original body overflow\n    const originalStyle = window.getComputedStyle(document.body).overflow;\n    // Prevent scrolling on mount\n    document.body.style.overflow = \"hidden\";\n    // Re-enable scrolling when component unmounts\n    return () => {\n      document.body.style.overflow = originalStyle;\n    };\n  }, [isActive]); // Empty array ensures effect is only run on mount and unmount\n}\n"],"names":["useLockBodyScroll","isActive","useLayoutEffect","originalStyle"],"mappings":"yGAMgB,SAAAA,EAAkBC,EAAoB,GAAM,CAC1DC,EAAAA,gBAAgB,IAAM,CACpB,GAAI,CAACD,EAAU,OAGf,MAAME,EAAgB,OAAO,iBAAiB,SAAS,IAAI,EAAE,SAEpD,gBAAA,KAAK,MAAM,SAAW,SAExB,IAAM,CACF,SAAA,KAAK,MAAM,SAAWA,CAAA,CACjC,EACC,CAACF,CAAQ,CAAC,CACf"}
+{"version":3,"file":"useLockBodyScroll.cjs.js","sources":["../../src/hooks/useLockBodyScroll.tsx"],"sourcesContent":["import { useLayoutEffect } from \"react\";\n\n/**\n * A React hook that prevents body scrolling while a component is mounted.\n * Useful for modals, overlays, and other components that should prevent background scrolling.\n * \n * @note use this hook if you can't use CSS to disable document scroll, otherwise use the data-disable-document-scroll attribute\n*/\nexport function useLockBodyScroll(isActive: boolean = true) {\n  useLayoutEffect(() => {\n    if (!isActive) return;\n\n    // Get original body overflow\n    const originalStyle = window.getComputedStyle(document.body).overflow;\n    // Prevent scrolling on mount\n    document.body.style.overflow = \"hidden\";\n    // Re-enable scrolling when component unmounts\n    return () => {\n      document.body.style.overflow = originalStyle;\n    };\n  }, [isActive]); // Empty array ensures effect is only run on mount and unmount\n}\n"],"names":["useLockBodyScroll","isActive","useLayoutEffect","originalStyle"],"mappings":"yGAQO,SAASA,EAAkBC,EAAoB,GAAM,CAC1DC,EAAAA,gBAAgB,IAAM,CACpB,GAAI,CAACD,EAAU,OAGf,MAAME,EAAgB,OAAO,iBAAiB,SAAS,IAAI,EAAE,SAE7D,gBAAS,KAAK,MAAM,SAAW,SAExB,IAAM,CACX,SAAS,KAAK,MAAM,SAAWA,CACjC,CACF,EAAG,CAACF,CAAQ,CAAC,CACf"}

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

@@ -1 +1 @@
-{"version":3,"file":"useLockBodyScroll.es.js","sources":["../../src/hooks/useLockBodyScroll.tsx"],"sourcesContent":["import { useLayoutEffect } from \"react\";\n\n/**\n * A React hook that prevents body scrolling while a component is mounted.\n * Useful for modals, overlays, and other components that should prevent background scrolling.\n */\nexport function useLockBodyScroll(isActive: boolean = true) {\n  useLayoutEffect(() => {\n    if (!isActive) return;\n\n    // Get original body overflow\n    const originalStyle = window.getComputedStyle(document.body).overflow;\n    // Prevent scrolling on mount\n    document.body.style.overflow = \"hidden\";\n    // Re-enable scrolling when component unmounts\n    return () => {\n      document.body.style.overflow = originalStyle;\n    };\n  }, [isActive]); // Empty array ensures effect is only run on mount and unmount\n}\n"],"names":["useLockBodyScroll","isActive","useLayoutEffect","originalStyle"],"mappings":";AAMgB,SAAAA,EAAkBC,IAAoB,IAAM;AAC1D,EAAAC,EAAgB,MAAM;AACpB,QAAI,CAACD,EAAU;AAGf,UAAME,IAAgB,OAAO,iBAAiB,SAAS,IAAI,EAAE;AAEpD,oBAAA,KAAK,MAAM,WAAW,UAExB,MAAM;AACF,eAAA,KAAK,MAAM,WAAWA;AAAA,IAAA;AAAA,EACjC,GACC,CAACF,CAAQ,CAAC;AACf;"}
+{"version":3,"file":"useLockBodyScroll.es.js","sources":["../../src/hooks/useLockBodyScroll.tsx"],"sourcesContent":["import { useLayoutEffect } from \"react\";\n\n/**\n * A React hook that prevents body scrolling while a component is mounted.\n * Useful for modals, overlays, and other components that should prevent background scrolling.\n * \n * @note use this hook if you can't use CSS to disable document scroll, otherwise use the data-disable-document-scroll attribute\n*/\nexport function useLockBodyScroll(isActive: boolean = true) {\n  useLayoutEffect(() => {\n    if (!isActive) return;\n\n    // Get original body overflow\n    const originalStyle = window.getComputedStyle(document.body).overflow;\n    // Prevent scrolling on mount\n    document.body.style.overflow = \"hidden\";\n    // Re-enable scrolling when component unmounts\n    return () => {\n      document.body.style.overflow = originalStyle;\n    };\n  }, [isActive]); // Empty array ensures effect is only run on mount and unmount\n}\n"],"names":["useLockBodyScroll","isActive","useLayoutEffect","originalStyle"],"mappings":";AAQO,SAASA,EAAkBC,IAAoB,IAAM;AAC1D,EAAAC,EAAgB,MAAM;AACpB,QAAI,CAACD,EAAU;AAGf,UAAME,IAAgB,OAAO,iBAAiB,SAAS,IAAI,EAAE;AAE7D,oBAAS,KAAK,MAAM,WAAW,UAExB,MAAM;AACX,eAAS,KAAK,MAAM,WAAWA;AAAA,IACjC;AAAA,EACF,GAAG,CAACF,CAAQ,CAAC;AACf;"}

package/dist/hooks/useMergedRef.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react");function i(t,e){return r.useCallback(u=>{t.current=u,typeof e=="function"?e(u):e!=null&&(e.current=u)},[t,e])}exports.useMergedRef=i;
+//# sourceMappingURL=useMergedRef.cjs.js.map

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

@@ -0,0 +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"}

package/dist/hooks/useMergedRef.es.js

@@ -0,0 +1,13 @@
+import { useCallback as i } from "react";
+function p(n, u) {
+  return i(
+    (t) => {
+      n.current = t, typeof u == "function" ? u(t) : u != null && (u.current = t);
+    },
+    [n, u]
+  );
+}
+export {
+  p as useMergedRef
+};
+//# sourceMappingURL=useMergedRef.es.js.map

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

@@ -0,0 +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;"}

package/dist/hooks/usePalette.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../design/darkTheme/colors.cjs.js"),r=require("../design/lightTheme/colors.cjs.js"),o=require("react"),u=require("../utils/image.cjs.js"),P=require("../utils/palette.cjs.js"),T=require("../design/theme.cjs.js"),E=(e,n)=>{const[a,s]=o.useState(r.LIGHT_PALETTE),l=o.useCallback(async()=>{if(!e)return r.LIGHT_PALETTE;try{const t=await u.getDominantColor(e);return P.generatePalette(t)}catch(t){return console.error("Failed to generate palette:",t),r.LIGHT_PALETTE}},[e]);return o.useEffect(()=>{(async()=>{if(e){const c=await l();s(c);return}if(n===T.THEMES.DARK){s(i.DARK_PALETTE);return}s(r.LIGHT_PALETTE)})()},[e,n,l]),o.useMemo(()=>a,[a])};exports.usePalette=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../design/darkTheme/colors.cjs.js"),r=require("../design/lightTheme/colors.cjs.js"),o=require("react"),u=require("../utils/image.cjs.js"),P=require("../utils/palette.cjs.js"),T=require("../design/theme.cjs.js"),E=(e,n)=>{const[l,s]=o.useState(r.LIGHT_PALETTE),a=o.useCallback(async()=>{if(!e)return r.LIGHT_PALETTE;try{const t=await u.getDominantColor(e);return P.generatePalette(t)}catch(t){return console.error("Failed to generate palette:",t),r.LIGHT_PALETTE}},[e]);return o.useEffect(()=>{(async()=>{if(e){const c=await a();s(c);return}if(n===T.THEMES.DARK){s(i.DARK_PALETTE);return}s(r.LIGHT_PALETTE)})()},[e,n,a]),o.useMemo(()=>l,[l])};exports.usePalette=E;
 //# sourceMappingURL=usePalette.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"usePalette.cjs.js","sources":["../../src/hooks/usePalette.tsx"],"sourcesContent":["import { THEMES } from \"../design\";\nimport { DARK_PALETTE } from \"../design/darkTheme/colors\";\nimport { LIGHT_PALETTE } from \"../design/lightTheme/colors\";\nimport { generatePalette, getDominantColor } from \"../utils\";\nimport { ProtonPalette } from \"../design/types\";\nimport { useEffect, useState, useCallback, useMemo } from \"react\";\n\n/**\n * Generates a palette based on a background image or theme.\n * @param backgroundImage - The URL of the background image to generate a palette from.\n * @param theme - The theme to generate a palette for.\n * @returns A Palette object containing the generated palette.\n */\nexport const usePalette = (\n  backgroundImage: HTMLImageElement | string | null,\n  theme: string\n): ProtonPalette => {\n  const [palette, setPalette] = useState<ProtonPalette>(LIGHT_PALETTE);\n\n  const getPalette = useCallback(async () => {\n    if (!backgroundImage) return LIGHT_PALETTE;\n\n    try {\n      const baseColor = await getDominantColor(\n        backgroundImage as HTMLImageElement & string\n      );\n      const newPalette = generatePalette(baseColor);\n\n      return newPalette;\n    } catch (error) {\n      console.error(\"Failed to generate palette:\", error);\n      return LIGHT_PALETTE;\n    }\n  }, [backgroundImage]);\n\n  useEffect(() => {\n    const fetchPalette = async () => {\n      if (backgroundImage) {\n        const newPalette = await getPalette();\n        setPalette(newPalette);\n        return;\n      }\n\n      if (theme === THEMES.DARK) {\n        setPalette(DARK_PALETTE);\n        return;\n      }\n\n      setPalette(LIGHT_PALETTE);\n    };\n\n    fetchPalette();\n  }, [backgroundImage, theme, getPalette]);\n\n  return useMemo(() => palette, [palette]);\n};\n"],"names":["usePalette","backgroundImage","theme","palette","setPalette","useState","LIGHT_PALETTE","getPalette","useCallback","baseColor","getDominantColor","generatePalette","error","useEffect","newPalette","THEMES","DARK_PALETTE","useMemo"],"mappings":"oTAaaA,EAAa,CACxBC,EACAC,IACkB,CAClB,KAAM,CAACC,EAASC,CAAU,EAAIC,WAAwBC,EAAa,aAAA,EAE7DC,EAAaC,EAAAA,YAAY,SAAY,CACrC,GAAA,CAACP,EAAwB,OAAAK,gBAEzB,GAAA,CACF,MAAMG,EAAY,MAAMC,EAAA,iBACtBT,CAAA,EAIK,OAFYU,kBAAgBF,CAAS,QAGrCG,EAAO,CACN,eAAA,MAAM,8BAA+BA,CAAK,EAC3CN,eACT,CAAA,EACC,CAACL,CAAe,CAAC,EAEpBY,OAAAA,EAAAA,UAAU,IAAM,EACO,SAAY,CAC/B,GAAIZ,EAAiB,CACb,MAAAa,EAAa,MAAMP,IACzBH,EAAWU,CAAU,EACrB,MACF,CAEI,GAAAZ,IAAUa,SAAO,KAAM,CACzBX,EAAWY,EAAY,YAAA,EACvB,MACF,CAEAZ,EAAWE,EAAa,aAAA,CAAA,IAIzB,EAAA,CAACL,EAAiBC,EAAOK,CAAU,CAAC,EAEhCU,EAAQ,QAAA,IAAMd,EAAS,CAACA,CAAO,CAAC,CACzC"}
+{"version":3,"file":"usePalette.cjs.js","sources":["../../src/hooks/usePalette.tsx"],"sourcesContent":["import { THEMES } from \"../design\";\nimport { DARK_PALETTE } from \"../design/darkTheme/colors\";\nimport { LIGHT_PALETTE } from \"../design/lightTheme/colors\";\nimport { generatePalette, getDominantColor } from \"../utils\";\nimport { ProtonPalette } from \"../design/types\";\nimport { useEffect, useState, useCallback, useMemo } from \"react\";\n\n/**\n * Generates a palette based on a background image or theme.\n * @param backgroundImage - The URL of the background image to generate a palette from.\n * @param theme - The theme to generate a palette for.\n * @returns A Palette object containing the generated palette.\n */\nexport const usePalette = (\n  backgroundImage: HTMLImageElement | string | null,\n  theme: string\n): ProtonPalette => {\n  const [palette, setPalette] = useState<ProtonPalette>(LIGHT_PALETTE);\n\n  const getPalette = useCallback(async () => {\n    if (!backgroundImage) return LIGHT_PALETTE;\n\n    try {\n      const baseColor = await getDominantColor(\n        backgroundImage as HTMLImageElement & string\n      );\n      const newPalette = generatePalette(baseColor);\n\n      return newPalette;\n    } catch (error) {\n      console.error(\"Failed to generate palette:\", error);\n      return LIGHT_PALETTE;\n    }\n  }, [backgroundImage]);\n\n  useEffect(() => {\n    const fetchPalette = async () => {\n      if (backgroundImage) {\n        const newPalette = await getPalette();\n        setPalette(newPalette);\n        return;\n      }\n\n      if (theme === THEMES.DARK) {\n        setPalette(DARK_PALETTE);\n        return;\n      }\n\n      setPalette(LIGHT_PALETTE);\n    };\n\n    fetchPalette();\n  }, [backgroundImage, theme, getPalette]);\n\n  return useMemo(() => palette, [palette]);\n};\n"],"names":["usePalette","backgroundImage","theme","palette","setPalette","useState","LIGHT_PALETTE","getPalette","useCallback","baseColor","getDominantColor","generatePalette","error","useEffect","newPalette","THEMES","DARK_PALETTE","useMemo"],"mappings":"oTAaaA,EAAa,CACxBC,EACAC,IACkB,CAClB,KAAM,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAAwBC,EAAAA,aAAa,EAE7DC,EAAaC,EAAAA,YAAY,SAAY,CACzC,GAAI,CAACP,EAAiB,OAAOK,EAAAA,cAE7B,GAAI,CACF,MAAMG,EAAY,MAAMC,EAAAA,iBACtBT,CAAA,EAIF,OAFmBU,EAAAA,gBAAgBF,CAAS,CAG9C,OAASG,EAAO,CACd,eAAQ,MAAM,8BAA+BA,CAAK,EAC3CN,EAAAA,aACT,CACF,EAAG,CAACL,CAAe,CAAC,EAEpBY,OAAAA,EAAAA,UAAU,IAAM,EACO,SAAY,CAC/B,GAAIZ,EAAiB,CACnB,MAAMa,EAAa,MAAMP,EAAA,EACzBH,EAAWU,CAAU,EACrB,MACF,CAEA,GAAIZ,IAAUa,EAAAA,OAAO,KAAM,CACzBX,EAAWY,EAAAA,YAAY,EACvB,MACF,CAEAZ,EAAWE,EAAAA,aAAa,CAC1B,GAEA,CACF,EAAG,CAACL,EAAiBC,EAAOK,CAAU,CAAC,EAEhCU,UAAQ,IAAMd,EAAS,CAACA,CAAO,CAAC,CACzC"}

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

@@ -1 +1 @@
-{"version":3,"file":"usePalette.es.js","sources":["../../src/hooks/usePalette.tsx"],"sourcesContent":["import { THEMES } from \"../design\";\nimport { DARK_PALETTE } from \"../design/darkTheme/colors\";\nimport { LIGHT_PALETTE } from \"../design/lightTheme/colors\";\nimport { generatePalette, getDominantColor } from \"../utils\";\nimport { ProtonPalette } from \"../design/types\";\nimport { useEffect, useState, useCallback, useMemo } from \"react\";\n\n/**\n * Generates a palette based on a background image or theme.\n * @param backgroundImage - The URL of the background image to generate a palette from.\n * @param theme - The theme to generate a palette for.\n * @returns A Palette object containing the generated palette.\n */\nexport const usePalette = (\n  backgroundImage: HTMLImageElement | string | null,\n  theme: string\n): ProtonPalette => {\n  const [palette, setPalette] = useState<ProtonPalette>(LIGHT_PALETTE);\n\n  const getPalette = useCallback(async () => {\n    if (!backgroundImage) return LIGHT_PALETTE;\n\n    try {\n      const baseColor = await getDominantColor(\n        backgroundImage as HTMLImageElement & string\n      );\n      const newPalette = generatePalette(baseColor);\n\n      return newPalette;\n    } catch (error) {\n      console.error(\"Failed to generate palette:\", error);\n      return LIGHT_PALETTE;\n    }\n  }, [backgroundImage]);\n\n  useEffect(() => {\n    const fetchPalette = async () => {\n      if (backgroundImage) {\n        const newPalette = await getPalette();\n        setPalette(newPalette);\n        return;\n      }\n\n      if (theme === THEMES.DARK) {\n        setPalette(DARK_PALETTE);\n        return;\n      }\n\n      setPalette(LIGHT_PALETTE);\n    };\n\n    fetchPalette();\n  }, [backgroundImage, theme, getPalette]);\n\n  return useMemo(() => palette, [palette]);\n};\n"],"names":["usePalette","backgroundImage","theme","palette","setPalette","useState","LIGHT_PALETTE","getPalette","useCallback","baseColor","getDominantColor","generatePalette","error","useEffect","newPalette","THEMES","DARK_PALETTE","useMemo"],"mappings":";;;;;;AAaa,MAAAA,IAAa,CACxBC,GACAC,MACkB;AAClB,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAwBC,CAAa,GAE7DC,IAAaC,EAAY,YAAY;AACrC,QAAA,CAACP,EAAwB,QAAAK;AAEzB,QAAA;AACF,YAAMG,IAAY,MAAMC;AAAA,QACtBT;AAAA,MAAA;AAIK,aAFYU,EAAgBF,CAAS;AAAA,aAGrCG,GAAO;AACN,qBAAA,MAAM,+BAA+BA,CAAK,GAC3CN;AAAA,IACT;AAAA,EAAA,GACC,CAACL,CAAe,CAAC;AAEpB,SAAAY,EAAU,MAAM;AAgBD,KAfQ,YAAY;AAC/B,UAAIZ,GAAiB;AACb,cAAAa,IAAa,MAAMP;AACzB,QAAAH,EAAWU,CAAU;AACrB;AAAA,MACF;AAEI,UAAAZ,MAAUa,EAAO,MAAM;AACzB,QAAAX,EAAWY,CAAY;AACvB;AAAA,MACF;AAEA,MAAAZ,EAAWE,CAAa;AAAA,IAAA;EAIzB,GAAA,CAACL,GAAiBC,GAAOK,CAAU,CAAC,GAEhCU,EAAQ,MAAMd,GAAS,CAACA,CAAO,CAAC;AACzC;"}
+{"version":3,"file":"usePalette.es.js","sources":["../../src/hooks/usePalette.tsx"],"sourcesContent":["import { THEMES } from \"../design\";\nimport { DARK_PALETTE } from \"../design/darkTheme/colors\";\nimport { LIGHT_PALETTE } from \"../design/lightTheme/colors\";\nimport { generatePalette, getDominantColor } from \"../utils\";\nimport { ProtonPalette } from \"../design/types\";\nimport { useEffect, useState, useCallback, useMemo } from \"react\";\n\n/**\n * Generates a palette based on a background image or theme.\n * @param backgroundImage - The URL of the background image to generate a palette from.\n * @param theme - The theme to generate a palette for.\n * @returns A Palette object containing the generated palette.\n */\nexport const usePalette = (\n  backgroundImage: HTMLImageElement | string | null,\n  theme: string\n): ProtonPalette => {\n  const [palette, setPalette] = useState<ProtonPalette>(LIGHT_PALETTE);\n\n  const getPalette = useCallback(async () => {\n    if (!backgroundImage) return LIGHT_PALETTE;\n\n    try {\n      const baseColor = await getDominantColor(\n        backgroundImage as HTMLImageElement & string\n      );\n      const newPalette = generatePalette(baseColor);\n\n      return newPalette;\n    } catch (error) {\n      console.error(\"Failed to generate palette:\", error);\n      return LIGHT_PALETTE;\n    }\n  }, [backgroundImage]);\n\n  useEffect(() => {\n    const fetchPalette = async () => {\n      if (backgroundImage) {\n        const newPalette = await getPalette();\n        setPalette(newPalette);\n        return;\n      }\n\n      if (theme === THEMES.DARK) {\n        setPalette(DARK_PALETTE);\n        return;\n      }\n\n      setPalette(LIGHT_PALETTE);\n    };\n\n    fetchPalette();\n  }, [backgroundImage, theme, getPalette]);\n\n  return useMemo(() => palette, [palette]);\n};\n"],"names":["usePalette","backgroundImage","theme","palette","setPalette","useState","LIGHT_PALETTE","getPalette","useCallback","baseColor","getDominantColor","generatePalette","error","useEffect","newPalette","THEMES","DARK_PALETTE","useMemo"],"mappings":";;;;;;AAaO,MAAMA,IAAa,CACxBC,GACAC,MACkB;AAClB,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAwBC,CAAa,GAE7DC,IAAaC,EAAY,YAAY;AACzC,QAAI,CAACP,EAAiB,QAAOK;AAE7B,QAAI;AACF,YAAMG,IAAY,MAAMC;AAAA,QACtBT;AAAA,MAAA;AAIF,aAFmBU,EAAgBF,CAAS;AAAA,IAG9C,SAASG,GAAO;AACd,qBAAQ,MAAM,+BAA+BA,CAAK,GAC3CN;AAAA,IACT;AAAA,EACF,GAAG,CAACL,CAAe,CAAC;AAEpB,SAAAY,EAAU,MAAM;AAgBd,KAfqB,YAAY;AAC/B,UAAIZ,GAAiB;AACnB,cAAMa,IAAa,MAAMP,EAAA;AACzB,QAAAH,EAAWU,CAAU;AACrB;AAAA,MACF;AAEA,UAAIZ,MAAUa,EAAO,MAAM;AACzB,QAAAX,EAAWY,CAAY;AACvB;AAAA,MACF;AAEA,MAAAZ,EAAWE,CAAa;AAAA,IAC1B,GAEA;AAAA,EACF,GAAG,CAACL,GAAiBC,GAAOK,CAAU,CAAC,GAEhCU,EAAQ,MAAMd,GAAS,CAACA,CAAO,CAAC;AACzC;"}

package/dist/hooks.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./hooks/useLockBodyScroll.cjs.js"),s=require("./hooks/useIsClosing.cjs.js"),o=require("./hooks/useBreakpoint.cjs.js"),t=require("./hooks/usePalette.cjs.js");exports.useLockBodyScroll=e.useLockBodyScroll;exports.useIsClosing=s.useIsClosing;exports.useBreakpoint=o.useBreakpoint;exports.usePalette=t.usePalette;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./hooks/useLockBodyScroll.cjs.js"),s=require("./hooks/useIsClosing.cjs.js"),o=require("./hooks/useBreakpoint.cjs.js"),r=require("./hooks/usePalette.cjs.js"),u=require("./hooks/useMergedRef.cjs.js");exports.useLockBodyScroll=e.useLockBodyScroll;exports.useIsClosing=s.useIsClosing;exports.useBreakpoint=o.useBreakpoint;exports.usePalette=r.usePalette;exports.useMergedRef=u.useMergedRef;
 //# sourceMappingURL=hooks.cjs.js.map

package/dist/hooks.d.ts

@@ -1,3 +1,6 @@
+import { ForwardedRef } from 'react';
+import { MutableRefObject } from 'react';
+import { RefCallback } from 'react';
 import { RefObject } from 'react';
 
 declare type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];
@@ -62,15 +65,23 @@ declare interface UseIsClosingOptions {
     /**
      * When passed, the fade-out class will be added to @ScreenOverlay on close
      */
-    overlayRef?: RefObject<HTMLElement>;
+    overlayRef?: RefObject<HTMLElement | null>;
 }
 
 /**
  * A React hook that prevents body scrolling while a component is mounted.
  * Useful for modals, overlays, and other components that should prevent background scrolling.
+ *
+ * @note use this hook if you can't use CSS to disable document scroll, otherwise use the data-disable-document-scroll attribute
  */
 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>;
+
 /**
  * Generates a palette based on a background image or theme.
  * @param backgroundImage - The URL of the background image to generate a palette from.

package/dist/hooks.es.js

@@ -1,11 +1,13 @@
 import { useLockBodyScroll as r } from "./hooks/useLockBodyScroll.es.js";
 import { useIsClosing as s } from "./hooks/useIsClosing.es.js";
-import { useBreakpoint as f } from "./hooks/useBreakpoint.es.js";
-import { usePalette as m } from "./hooks/usePalette.es.js";
+import { useBreakpoint as p } from "./hooks/useBreakpoint.es.js";
+import { usePalette as u } from "./hooks/usePalette.es.js";
+import { useMergedRef as l } from "./hooks/useMergedRef.es.js";
 export {
-  f as useBreakpoint,
+  p as useBreakpoint,
   s as useIsClosing,
   r as useLockBodyScroll,
-  m as usePalette
+  l as useMergedRef,
+  u as usePalette
 };
 //# sourceMappingURL=hooks.es.js.map

package/dist/hooks.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"hooks.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}