@protonradio/proton-ui 0.11.34 → 0.12.1

package/dist/components/Icon/IconComponents/XTwitterLogo.es.js

@@ -1,27 +1,27 @@
 import { j as o } from "../../../node_modules/react/jsx-runtime.es.js";
-import { DEFAULT_SVG_XMLNS as i, getBrandColor as a, getDefaultIconTestId as d } from "../IconProps.es.js";
-function s({
+import { DEFAULT_ARIA_PROPS as L, DEFAULT_SVG_XMLNS as a, getDefaultIconTestId as d, getBrandColor as s } from "../IconProps.es.js";
+function l({
   size: t = 16,
   color: e,
-  "data-testid": r
+  "data-testid": r,
+  ariaProps: i = L
 }) {
   return /* @__PURE__ */ o.jsx(
     "svg",
     {
-      xmlns: i,
+      xmlns: a,
       viewBox: "0 0 512 512",
       width: t,
       height: t,
-      fill: a("x-twitter-logo", e),
-      "aria-hidden": "true",
-      focusable: "false",
+      ...i,
+      fill: e || s("x-twitter-logo"),
       "data-testid": r || d("x-twitter-logo"),
       children: /* @__PURE__ */ o.jsx("path", { d: "M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" })
     }
   );
 }
-s.displayName = "ProtonUIXTwitterLogo";
+l.displayName = "ProtonUIXTwitterLogo";
 export {
-  s as XTwitterLogo
+  l as XTwitterLogo
 };
 //# sourceMappingURL=XTwitterLogo.es.js.map

package/dist/components/Icon/IconComponents/XTwitterLogo.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"XTwitterLogo.es.js","sources":["../../../../src/components/Icon/IconComponents/XTwitterLogo.tsx"],"sourcesContent":["import {\n  type IconProps,\n  DEFAULT_SVG_XMLNS,\n  getDefaultIconTestId,\n  getBrandColor,\n} from \"../IconProps\";\n\n/** X (Twitter) brand logo. {@link IconProps} */\nexport function XTwitterLogo({\n  size = 16,\n  color,\n  \"data-testid\": dataTestId,\n}: IconProps) {\n  return (\n    <svg\n      xmlns={DEFAULT_SVG_XMLNS}\n      viewBox=\"0 0 512 512\"\n      width={size}\n      height={size}\n      fill={getBrandColor(\"x-twitter-logo\", color)}\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      data-testid={dataTestId || getDefaultIconTestId(\"x-twitter-logo\")}\n    >\n      <path d=\"M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z\" />\n    </svg>\n  );\n}\n\nXTwitterLogo.displayName = \"ProtonUIXTwitterLogo\";\n"],"names":["XTwitterLogo","size","color","dataTestId","jsx","DEFAULT_SVG_XMLNS","getBrandColor","getDefaultIconTestId"],"mappings":";;AAQO,SAASA,EAAa;AAAA,EAC3B,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,eAAeC;AACjB,GAAc;AAEV,SAAAC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAOC;AAAA,MACP,SAAQ;AAAA,MACR,OAAOJ;AAAA,MACP,QAAQA;AAAA,MACR,MAAMK,EAAc,kBAAkBJ,CAAK;AAAA,MAC3C,eAAY;AAAA,MACZ,WAAU;AAAA,MACV,eAAaC,KAAcI,EAAqB,gBAAgB;AAAA,MAEhE,UAAAH,gBAAAA,EAAAA,IAAC,QAAK,EAAA,GAAE,+JAA+J,CAAA;AAAA,IAAA;AAAA,EAAA;AAG7K;AAEAJ,EAAa,cAAc;"}
+{"version":3,"file":"XTwitterLogo.es.js","sources":["../../../../src/components/Icon/IconComponents/XTwitterLogo.tsx"],"sourcesContent":["import {\n  type IconProps,\n  DEFAULT_ARIA_PROPS,\n  DEFAULT_SVG_XMLNS,\n  getDefaultIconTestId,\n  getBrandColor,\n} from \"../IconProps\";\n\n/** X (Twitter) brand logo. {@link IconProps} */\nexport function XTwitterLogo({\n  size = 16,\n  color,\n  \"data-testid\": dataTestId,\n  ariaProps = DEFAULT_ARIA_PROPS,\n}: IconProps) {\n  return (\n    <svg\n      xmlns={DEFAULT_SVG_XMLNS}\n      viewBox=\"0 0 512 512\"\n      width={size}\n      height={size}\n      {...ariaProps}\n      fill={color || getBrandColor(\"x-twitter-logo\")}\n      data-testid={dataTestId || getDefaultIconTestId(\"x-twitter-logo\")}\n    >\n      <path d=\"M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z\" />\n    </svg>\n  );\n}\n\nXTwitterLogo.displayName = \"ProtonUIXTwitterLogo\";\n"],"names":["XTwitterLogo","size","color","dataTestId","ariaProps","DEFAULT_ARIA_PROPS","jsx","DEFAULT_SVG_XMLNS","getBrandColor","getDefaultIconTestId"],"mappings":";;AASO,SAASA,EAAa;AAAA,EAC3B,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,eAAeC;AAAA,EACf,WAAAC,IAAYC;AACd,GAAc;AACZ,SACEC,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAOC;AAAA,MACP,SAAQ;AAAA,MACR,OAAON;AAAA,MACP,QAAQA;AAAA,MACP,GAAGG;AAAA,MACJ,MAAMF,KAASM,EAAc,gBAAgB;AAAA,MAC7C,eAAaL,KAAcM,EAAqB,gBAAgB;AAAA,MAEhE,UAAAH,gBAAAA,EAAAA,IAAC,QAAA,EAAK,GAAE,+JAAA,CAA+J;AAAA,IAAA;AAAA,EAAA;AAG7K;AAEAN,EAAa,cAAc;"}

package/dist/components/Icon/IconComponents/YandexLogo.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../node_modules/react/jsx-runtime.cjs.js"),l=require("../IconProps.cjs.js");function o({size:e=16,color:n,"data-testid":a}){return t.jsxRuntimeExports.jsx("svg",{xmlns:l.DEFAULT_SVG_XMLNS,width:e,height:e,viewBox:"0 0 1000 999.9941406",style:{enableBackground:"new 0 0 1000 999.9941406"},"aria-hidden":"true",focusable:"false","data-testid":a||l.getDefaultIconTestId("yandex-logo"),children:t.jsxRuntimeExports.jsx("path",{fill:l.getBrandColor("yandex-logo",n),d:"M990.5263062,381.161499l-3.9005737-19.3916931l-164.9055176-28.8068542l95.8240356-129.6425323  l-11.1403198-12.1870575l-140.9465332,67.5902405l17.8244629-179.5018616l-14.4853516-8.3040466L683.001709,216.0630493  L586.6281128,0h-16.7133179l22.8419189,208.8642578L350.4190063,14.9589682l-20.6139221,6.0935392l186.6246033,234.3495026  L147.0751495,132.4085846l-16.7133484,18.8361511l329.8051147,187.8175812L5.0116663,376.7229309L0,404.9859009  l472.9796448,51.5201721L78.5492401,782.8198853l16.7133484,22.7133179l469.6347046-255.3961792l-93.0286865,449.8571167h28.4150391  l179.9404297-423.2665405l109.7478638,331.302124l19.5028687-14.9589233l-45.1283569-336.8401489l171.0282593,193.9052734  l11.1461792-17.730835L815.5976562,491.9620667l182.7298584,67.5902405L1000,539.0553589L836.2114868,418.2782898  l154.3208008-37.1167297L990.5263062,381.161499z"})})}o.displayName="ProtonUIYandexLogo";exports.YandexLogo=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../node_modules/react/jsx-runtime.cjs.js"),l=require("../IconProps.cjs.js");function o({size:e=16,color:n,"data-testid":a,ariaProps:d=l.DEFAULT_ARIA_PROPS}){return t.jsxRuntimeExports.jsx("svg",{xmlns:l.DEFAULT_SVG_XMLNS,width:e,height:e,viewBox:"0 0 1000 999.9941406",style:{enableBackground:"new 0 0 1000 999.9941406"},...d,"data-testid":a||l.getDefaultIconTestId("yandex-logo"),children:t.jsxRuntimeExports.jsx("path",{fill:n||l.getBrandColor("yandex-logo"),d:"M990.5263062,381.161499l-3.9005737-19.3916931l-164.9055176-28.8068542l95.8240356-129.6425323  l-11.1403198-12.1870575l-140.9465332,67.5902405l17.8244629-179.5018616l-14.4853516-8.3040466L683.001709,216.0630493  L586.6281128,0h-16.7133179l22.8419189,208.8642578L350.4190063,14.9589682l-20.6139221,6.0935392l186.6246033,234.3495026  L147.0751495,132.4085846l-16.7133484,18.8361511l329.8051147,187.8175812L5.0116663,376.7229309L0,404.9859009  l472.9796448,51.5201721L78.5492401,782.8198853l16.7133484,22.7133179l469.6347046-255.3961792l-93.0286865,449.8571167h28.4150391  l179.9404297-423.2665405l109.7478638,331.302124l19.5028687-14.9589233l-45.1283569-336.8401489l171.0282593,193.9052734  l11.1461792-17.730835L815.5976562,491.9620667l182.7298584,67.5902405L1000,539.0553589L836.2114868,418.2782898  l154.3208008-37.1167297L990.5263062,381.161499z"})})}o.displayName="ProtonUIYandexLogo";exports.YandexLogo=o;
 //# sourceMappingURL=YandexLogo.cjs.js.map

package/dist/components/Icon/IconComponents/YandexLogo.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"YandexLogo.cjs.js","sources":["../../../../src/components/Icon/IconComponents/YandexLogo.tsx"],"sourcesContent":["import {\n  type IconProps,\n  DEFAULT_SVG_XMLNS,\n  getBrandColor,\n  getDefaultIconTestId,\n} from \"../IconProps\";\n\n/** Yandex brand logo. {@link IconProps} */\nexport function YandexLogo({\n  size = 16,\n  color,\n  \"data-testid\": dataTestId,\n}: IconProps) {\n  return (\n    <svg\n      xmlns={DEFAULT_SVG_XMLNS}\n      width={size}\n      height={size}\n      viewBox=\"0 0 1000 999.9941406\"\n      // @ts-ignore\n      style={{ enableBackground: \"new 0 0 1000 999.9941406\" }}\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      data-testid={dataTestId || getDefaultIconTestId(\"yandex-logo\")}\n    >\n      <path\n        fill={getBrandColor(\"yandex-logo\", color)}\n        d=\"M990.5263062,381.161499l-3.9005737-19.3916931l-164.9055176-28.8068542l95.8240356-129.6425323  l-11.1403198-12.1870575l-140.9465332,67.5902405l17.8244629-179.5018616l-14.4853516-8.3040466L683.001709,216.0630493  L586.6281128,0h-16.7133179l22.8419189,208.8642578L350.4190063,14.9589682l-20.6139221,6.0935392l186.6246033,234.3495026  L147.0751495,132.4085846l-16.7133484,18.8361511l329.8051147,187.8175812L5.0116663,376.7229309L0,404.9859009  l472.9796448,51.5201721L78.5492401,782.8198853l16.7133484,22.7133179l469.6347046-255.3961792l-93.0286865,449.8571167h28.4150391  l179.9404297-423.2665405l109.7478638,331.302124l19.5028687-14.9589233l-45.1283569-336.8401489l171.0282593,193.9052734  l11.1461792-17.730835L815.5976562,491.9620667l182.7298584,67.5902405L1000,539.0553589L836.2114868,418.2782898  l154.3208008-37.1167297L990.5263062,381.161499z\"\n      />\n    </svg>\n  );\n}\n\nYandexLogo.displayName = \"ProtonUIYandexLogo\";\n"],"names":["YandexLogo","size","color","dataTestId","jsx","DEFAULT_SVG_XMLNS","getDefaultIconTestId","getBrandColor"],"mappings":"mLAQO,SAASA,EAAW,CACzB,KAAAC,EAAO,GACP,MAAAC,EACA,cAAeC,CACjB,EAAc,CAEV,OAAAC,EAAA,kBAAA,IAAC,MAAA,CACC,MAAOC,EAAA,kBACP,MAAOJ,EACP,OAAQA,EACR,QAAQ,uBAER,MAAO,CAAE,iBAAkB,0BAA2B,EACtD,cAAY,OACZ,UAAU,QACV,cAAaE,GAAcG,EAAA,qBAAqB,aAAa,EAE7D,SAAAF,EAAA,kBAAA,IAAC,OAAA,CACC,KAAMG,EAAAA,cAAc,cAAeL,CAAK,EACxC,EAAE,g1BAAA,CACJ,CAAA,CAAA,CAGN,CAEAF,EAAW,YAAc"}
+{"version":3,"file":"YandexLogo.cjs.js","sources":["../../../../src/components/Icon/IconComponents/YandexLogo.tsx"],"sourcesContent":["import {\n  type IconProps,\n  DEFAULT_ARIA_PROPS,\n  DEFAULT_SVG_XMLNS,\n  getBrandColor,\n  getDefaultIconTestId,\n} from \"../IconProps\";\n\n/** Yandex brand logo. {@link IconProps} */\nexport function YandexLogo({\n  size = 16,\n  color,\n  \"data-testid\": dataTestId,\n  ariaProps = DEFAULT_ARIA_PROPS,\n}: IconProps) {\n  return (\n    <svg\n      xmlns={DEFAULT_SVG_XMLNS}\n      width={size}\n      height={size}\n      viewBox=\"0 0 1000 999.9941406\"\n      // @ts-ignore\n      style={{ enableBackground: \"new 0 0 1000 999.9941406\" }}\n      {...ariaProps}\n      data-testid={dataTestId || getDefaultIconTestId(\"yandex-logo\")}\n    >\n      <path\n        fill={color || getBrandColor(\"yandex-logo\")}\n        d=\"M990.5263062,381.161499l-3.9005737-19.3916931l-164.9055176-28.8068542l95.8240356-129.6425323  l-11.1403198-12.1870575l-140.9465332,67.5902405l17.8244629-179.5018616l-14.4853516-8.3040466L683.001709,216.0630493  L586.6281128,0h-16.7133179l22.8419189,208.8642578L350.4190063,14.9589682l-20.6139221,6.0935392l186.6246033,234.3495026  L147.0751495,132.4085846l-16.7133484,18.8361511l329.8051147,187.8175812L5.0116663,376.7229309L0,404.9859009  l472.9796448,51.5201721L78.5492401,782.8198853l16.7133484,22.7133179l469.6347046-255.3961792l-93.0286865,449.8571167h28.4150391  l179.9404297-423.2665405l109.7478638,331.302124l19.5028687-14.9589233l-45.1283569-336.8401489l171.0282593,193.9052734  l11.1461792-17.730835L815.5976562,491.9620667l182.7298584,67.5902405L1000,539.0553589L836.2114868,418.2782898  l154.3208008-37.1167297L990.5263062,381.161499z\"\n      />\n    </svg>\n  );\n}\n\nYandexLogo.displayName = \"ProtonUIYandexLogo\";\n"],"names":["YandexLogo","size","color","dataTestId","ariaProps","DEFAULT_ARIA_PROPS","jsx","DEFAULT_SVG_XMLNS","getDefaultIconTestId","getBrandColor"],"mappings":"mLASO,SAASA,EAAW,CACzB,KAAAC,EAAO,GACP,MAAAC,EACA,cAAeC,EACf,UAAAC,EAAYC,EAAAA,kBACd,EAAc,CACZ,OACEC,EAAAA,kBAAAA,IAAC,MAAA,CACC,MAAOC,EAAAA,kBACP,MAAON,EACP,OAAQA,EACR,QAAQ,uBAER,MAAO,CAAE,iBAAkB,0BAAA,EAC1B,GAAGG,EACJ,cAAaD,GAAcK,EAAAA,qBAAqB,aAAa,EAE7D,SAAAF,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAMJ,GAASO,EAAAA,cAAc,aAAa,EAC1C,EAAE,g1BAAA,CAAA,CACJ,CAAA,CAGN,CAEAT,EAAW,YAAc"}

package/dist/components/Icon/IconComponents/YandexLogo.es.js

@@ -1,33 +1,33 @@
-import { j as e } from "../../../node_modules/react/jsx-runtime.es.js";
-import { DEFAULT_SVG_XMLNS as a, getDefaultIconTestId as d, getBrandColor as n } from "../IconProps.es.js";
-function r({
+import { j as o } from "../../../node_modules/react/jsx-runtime.es.js";
+import { DEFAULT_ARIA_PROPS as n, DEFAULT_SVG_XMLNS as L, getBrandColor as d, getDefaultIconTestId as r } from "../IconProps.es.js";
+function i({
   size: l = 16,
-  color: o,
-  "data-testid": t
+  color: t,
+  "data-testid": e,
+  ariaProps: a = n
 }) {
-  return /* @__PURE__ */ e.jsx(
+  return /* @__PURE__ */ o.jsx(
     "svg",
     {
-      xmlns: a,
+      xmlns: L,
       width: l,
       height: l,
       viewBox: "0 0 1000 999.9941406",
       style: { enableBackground: "new 0 0 1000 999.9941406" },
-      "aria-hidden": "true",
-      focusable: "false",
-      "data-testid": t || d("yandex-logo"),
-      children: /* @__PURE__ */ e.jsx(
+      ...a,
+      "data-testid": e || r("yandex-logo"),
+      children: /* @__PURE__ */ o.jsx(
         "path",
         {
-          fill: n("yandex-logo", o),
+          fill: t || d("yandex-logo"),
           d: "M990.5263062,381.161499l-3.9005737-19.3916931l-164.9055176-28.8068542l95.8240356-129.6425323  l-11.1403198-12.1870575l-140.9465332,67.5902405l17.8244629-179.5018616l-14.4853516-8.3040466L683.001709,216.0630493  L586.6281128,0h-16.7133179l22.8419189,208.8642578L350.4190063,14.9589682l-20.6139221,6.0935392l186.6246033,234.3495026  L147.0751495,132.4085846l-16.7133484,18.8361511l329.8051147,187.8175812L5.0116663,376.7229309L0,404.9859009  l472.9796448,51.5201721L78.5492401,782.8198853l16.7133484,22.7133179l469.6347046-255.3961792l-93.0286865,449.8571167h28.4150391  l179.9404297-423.2665405l109.7478638,331.302124l19.5028687-14.9589233l-45.1283569-336.8401489l171.0282593,193.9052734  l11.1461792-17.730835L815.5976562,491.9620667l182.7298584,67.5902405L1000,539.0553589L836.2114868,418.2782898  l154.3208008-37.1167297L990.5263062,381.161499z"
         }
       )
     }
   );
 }
-r.displayName = "ProtonUIYandexLogo";
+i.displayName = "ProtonUIYandexLogo";
 export {
-  r as YandexLogo
+  i as YandexLogo
 };
 //# sourceMappingURL=YandexLogo.es.js.map

package/dist/components/Icon/IconComponents/YandexLogo.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"YandexLogo.es.js","sources":["../../../../src/components/Icon/IconComponents/YandexLogo.tsx"],"sourcesContent":["import {\n  type IconProps,\n  DEFAULT_SVG_XMLNS,\n  getBrandColor,\n  getDefaultIconTestId,\n} from \"../IconProps\";\n\n/** Yandex brand logo. {@link IconProps} */\nexport function YandexLogo({\n  size = 16,\n  color,\n  \"data-testid\": dataTestId,\n}: IconProps) {\n  return (\n    <svg\n      xmlns={DEFAULT_SVG_XMLNS}\n      width={size}\n      height={size}\n      viewBox=\"0 0 1000 999.9941406\"\n      // @ts-ignore\n      style={{ enableBackground: \"new 0 0 1000 999.9941406\" }}\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      data-testid={dataTestId || getDefaultIconTestId(\"yandex-logo\")}\n    >\n      <path\n        fill={getBrandColor(\"yandex-logo\", color)}\n        d=\"M990.5263062,381.161499l-3.9005737-19.3916931l-164.9055176-28.8068542l95.8240356-129.6425323  l-11.1403198-12.1870575l-140.9465332,67.5902405l17.8244629-179.5018616l-14.4853516-8.3040466L683.001709,216.0630493  L586.6281128,0h-16.7133179l22.8419189,208.8642578L350.4190063,14.9589682l-20.6139221,6.0935392l186.6246033,234.3495026  L147.0751495,132.4085846l-16.7133484,18.8361511l329.8051147,187.8175812L5.0116663,376.7229309L0,404.9859009  l472.9796448,51.5201721L78.5492401,782.8198853l16.7133484,22.7133179l469.6347046-255.3961792l-93.0286865,449.8571167h28.4150391  l179.9404297-423.2665405l109.7478638,331.302124l19.5028687-14.9589233l-45.1283569-336.8401489l171.0282593,193.9052734  l11.1461792-17.730835L815.5976562,491.9620667l182.7298584,67.5902405L1000,539.0553589L836.2114868,418.2782898  l154.3208008-37.1167297L990.5263062,381.161499z\"\n      />\n    </svg>\n  );\n}\n\nYandexLogo.displayName = \"ProtonUIYandexLogo\";\n"],"names":["YandexLogo","size","color","dataTestId","jsx","DEFAULT_SVG_XMLNS","getDefaultIconTestId","getBrandColor"],"mappings":";;AAQO,SAASA,EAAW;AAAA,EACzB,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,eAAeC;AACjB,GAAc;AAEV,SAAAC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAOC;AAAA,MACP,OAAOJ;AAAA,MACP,QAAQA;AAAA,MACR,SAAQ;AAAA,MAER,OAAO,EAAE,kBAAkB,2BAA2B;AAAA,MACtD,eAAY;AAAA,MACZ,WAAU;AAAA,MACV,eAAaE,KAAcG,EAAqB,aAAa;AAAA,MAE7D,UAAAF,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAMG,EAAc,eAAeL,CAAK;AAAA,UACxC,GAAE;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAF,EAAW,cAAc;"}
+{"version":3,"file":"YandexLogo.es.js","sources":["../../../../src/components/Icon/IconComponents/YandexLogo.tsx"],"sourcesContent":["import {\n  type IconProps,\n  DEFAULT_ARIA_PROPS,\n  DEFAULT_SVG_XMLNS,\n  getBrandColor,\n  getDefaultIconTestId,\n} from \"../IconProps\";\n\n/** Yandex brand logo. {@link IconProps} */\nexport function YandexLogo({\n  size = 16,\n  color,\n  \"data-testid\": dataTestId,\n  ariaProps = DEFAULT_ARIA_PROPS,\n}: IconProps) {\n  return (\n    <svg\n      xmlns={DEFAULT_SVG_XMLNS}\n      width={size}\n      height={size}\n      viewBox=\"0 0 1000 999.9941406\"\n      // @ts-ignore\n      style={{ enableBackground: \"new 0 0 1000 999.9941406\" }}\n      {...ariaProps}\n      data-testid={dataTestId || getDefaultIconTestId(\"yandex-logo\")}\n    >\n      <path\n        fill={color || getBrandColor(\"yandex-logo\")}\n        d=\"M990.5263062,381.161499l-3.9005737-19.3916931l-164.9055176-28.8068542l95.8240356-129.6425323  l-11.1403198-12.1870575l-140.9465332,67.5902405l17.8244629-179.5018616l-14.4853516-8.3040466L683.001709,216.0630493  L586.6281128,0h-16.7133179l22.8419189,208.8642578L350.4190063,14.9589682l-20.6139221,6.0935392l186.6246033,234.3495026  L147.0751495,132.4085846l-16.7133484,18.8361511l329.8051147,187.8175812L5.0116663,376.7229309L0,404.9859009  l472.9796448,51.5201721L78.5492401,782.8198853l16.7133484,22.7133179l469.6347046-255.3961792l-93.0286865,449.8571167h28.4150391  l179.9404297-423.2665405l109.7478638,331.302124l19.5028687-14.9589233l-45.1283569-336.8401489l171.0282593,193.9052734  l11.1461792-17.730835L815.5976562,491.9620667l182.7298584,67.5902405L1000,539.0553589L836.2114868,418.2782898  l154.3208008-37.1167297L990.5263062,381.161499z\"\n      />\n    </svg>\n  );\n}\n\nYandexLogo.displayName = \"ProtonUIYandexLogo\";\n"],"names":["YandexLogo","size","color","dataTestId","ariaProps","DEFAULT_ARIA_PROPS","jsx","DEFAULT_SVG_XMLNS","getDefaultIconTestId","getBrandColor"],"mappings":";;AASO,SAASA,EAAW;AAAA,EACzB,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,eAAeC;AAAA,EACf,WAAAC,IAAYC;AACd,GAAc;AACZ,SACEC,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAOC;AAAA,MACP,OAAON;AAAA,MACP,QAAQA;AAAA,MACR,SAAQ;AAAA,MAER,OAAO,EAAE,kBAAkB,2BAAA;AAAA,MAC1B,GAAGG;AAAA,MACJ,eAAaD,KAAcK,EAAqB,aAAa;AAAA,MAE7D,UAAAF,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAMJ,KAASO,EAAc,aAAa;AAAA,UAC1C,GAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGN;AAEAT,EAAW,cAAc;"}

package/dist/components/Icon/IconComponents/YoutubeLogo.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../node_modules/react/jsx-runtime.cjs.js"),e=require("../IconProps.cjs.js");function s({size:o=16,color:u,"data-testid":i}){return t.jsxRuntimeExports.jsxs("svg",{xmlns:e.DEFAULT_SVG_XMLNS,viewBox:"0 0 256 180",width:o,height:o,"aria-hidden":"true",focusable:"false","data-testid":i||e.getDefaultIconTestId("youtube-logo"),children:[t.jsxRuntimeExports.jsx("path",{fill:e.getBrandColor("youtube-logo",u),d:"M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134"}),t.jsxRuntimeExports.jsx("path",{fill:"#fff",d:"m102.421 128.06l66.328-38.418l-66.328-38.418z"})]})}s.displayName="ProtonUIYoutubeLogo";exports.YoutubeLogo=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../../node_modules/react/jsx-runtime.cjs.js"),t=require("../IconProps.cjs.js");function s({size:e=16,color:u,"data-testid":i,ariaProps:r=t.DEFAULT_ARIA_PROPS}){return o.jsxRuntimeExports.jsxs("svg",{xmlns:t.DEFAULT_SVG_XMLNS,viewBox:"0 0 256 180",width:e,height:e,...r,"data-testid":i||t.getDefaultIconTestId("youtube-logo"),children:[o.jsxRuntimeExports.jsx("path",{fill:u||t.getBrandColor("youtube-logo"),d:"M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134"}),o.jsxRuntimeExports.jsx("path",{fill:"#fff",d:"m102.421 128.06l66.328-38.418l-66.328-38.418z"})]})}s.displayName="ProtonUIYoutubeLogo";exports.YoutubeLogo=s;
 //# sourceMappingURL=YoutubeLogo.cjs.js.map

package/dist/components/Icon/IconComponents/YoutubeLogo.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"YoutubeLogo.cjs.js","sources":["../../../../src/components/Icon/IconComponents/YoutubeLogo.tsx"],"sourcesContent":["import {\n  type IconProps,\n  DEFAULT_SVG_XMLNS,\n  getDefaultIconTestId,\n  getBrandColor,\n} from \"../IconProps\";\n\n/** YouTube brand logo. {@link IconProps} */\nexport function YoutubeLogo({\n  size = 16,\n  color,\n  \"data-testid\": dataTestId,\n}: IconProps) {\n  return (\n    <svg\n      xmlns={DEFAULT_SVG_XMLNS}\n      viewBox=\"0 0 256 180\"\n      width={size}\n      height={size}\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      data-testid={dataTestId || getDefaultIconTestId(\"youtube-logo\")}\n    >\n      <path\n        fill={getBrandColor(\"youtube-logo\", color)}\n        d=\"M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134\"\n      />\n      <path fill=\"#fff\" d=\"m102.421 128.06l66.328-38.418l-66.328-38.418z\" />\n    </svg>\n  );\n}\n\nYoutubeLogo.displayName = \"ProtonUIYoutubeLogo\";\n"],"names":["YoutubeLogo","size","color","dataTestId","jsxs","DEFAULT_SVG_XMLNS","getDefaultIconTestId","jsx","getBrandColor"],"mappings":"mLAQO,SAASA,EAAY,CAC1B,KAAAC,EAAO,GACP,MAAAC,EACA,cAAeC,CACjB,EAAc,CAEV,OAAAC,EAAA,kBAAA,KAAC,MAAA,CACC,MAAOC,EAAA,kBACP,QAAQ,cACR,MAAOJ,EACP,OAAQA,EACR,cAAY,OACZ,UAAU,QACV,cAAaE,GAAcG,EAAA,qBAAqB,cAAc,EAE9D,SAAA,CAAAC,EAAA,kBAAA,IAAC,OAAA,CACC,KAAMC,EAAAA,cAAc,eAAgBN,CAAK,EACzC,EAAE,uUAAA,CACJ,EACCK,EAAA,kBAAA,IAAA,OAAA,CAAK,KAAK,OAAO,EAAE,gDAAgD,CAAA,CAAA,CAAA,CAG1E,CAEAP,EAAY,YAAc"}
+{"version":3,"file":"YoutubeLogo.cjs.js","sources":["../../../../src/components/Icon/IconComponents/YoutubeLogo.tsx"],"sourcesContent":["import {\n  type IconProps,\n  DEFAULT_ARIA_PROPS,\n  DEFAULT_SVG_XMLNS,\n  getDefaultIconTestId,\n  getBrandColor,\n} from \"../IconProps\";\n\n/** YouTube brand logo. {@link IconProps} */\nexport function YoutubeLogo({\n  size = 16,\n  color,\n  \"data-testid\": dataTestId,\n  ariaProps = DEFAULT_ARIA_PROPS,\n}: IconProps) {\n  return (\n    <svg\n      xmlns={DEFAULT_SVG_XMLNS}\n      viewBox=\"0 0 256 180\"\n      width={size}\n      height={size}\n      {...ariaProps}\n      data-testid={dataTestId || getDefaultIconTestId(\"youtube-logo\")}\n    >\n      <path\n        fill={color || getBrandColor(\"youtube-logo\")}\n        d=\"M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134\"\n      />\n      <path fill=\"#fff\" d=\"m102.421 128.06l66.328-38.418l-66.328-38.418z\" />\n    </svg>\n  );\n}\n\nYoutubeLogo.displayName = \"ProtonUIYoutubeLogo\";\n"],"names":["YoutubeLogo","size","color","dataTestId","ariaProps","DEFAULT_ARIA_PROPS","jsxs","DEFAULT_SVG_XMLNS","getDefaultIconTestId","jsx","getBrandColor"],"mappings":"mLASO,SAASA,EAAY,CAC1B,KAAAC,EAAO,GACP,MAAAC,EACA,cAAeC,EACf,UAAAC,EAAYC,EAAAA,kBACd,EAAc,CACZ,OACEC,EAAAA,kBAAAA,KAAC,MAAA,CACC,MAAOC,EAAAA,kBACP,QAAQ,cACR,MAAON,EACP,OAAQA,EACP,GAAGG,EACJ,cAAaD,GAAcK,EAAAA,qBAAqB,cAAc,EAE9D,SAAA,CAAAC,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAMP,GAASQ,EAAAA,cAAc,cAAc,EAC3C,EAAE,uUAAA,CAAA,EAEJD,EAAAA,kBAAAA,IAAC,OAAA,CAAK,KAAK,OAAO,EAAE,+CAAA,CAAgD,CAAA,CAAA,CAAA,CAG1E,CAEAT,EAAY,YAAc"}

package/dist/components/Icon/IconComponents/YoutubeLogo.es.js

@@ -1,25 +1,25 @@
 import { j as t } from "../../../node_modules/react/jsx-runtime.es.js";
-import { DEFAULT_SVG_XMLNS as l, getDefaultIconTestId as s, getBrandColor as i } from "../IconProps.es.js";
-function r({
+import { DEFAULT_ARIA_PROPS as s, DEFAULT_SVG_XMLNS as i, getBrandColor as r, getDefaultIconTestId as u } from "../IconProps.es.js";
+function d({
   size: o = 16,
   color: e,
-  "data-testid": a
+  "data-testid": a,
+  ariaProps: l = s
 }) {
   return /* @__PURE__ */ t.jsxs(
     "svg",
     {
-      xmlns: l,
+      xmlns: i,
       viewBox: "0 0 256 180",
       width: o,
       height: o,
-      "aria-hidden": "true",
-      focusable: "false",
-      "data-testid": a || s("youtube-logo"),
+      ...l,
+      "data-testid": a || u("youtube-logo"),
       children: [
         /* @__PURE__ */ t.jsx(
           "path",
           {
-            fill: i("youtube-logo", e),
+            fill: e || r("youtube-logo"),
             d: "M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134"
           }
         ),
@@ -28,8 +28,8 @@ function r({
     }
   );
 }
-r.displayName = "ProtonUIYoutubeLogo";
+d.displayName = "ProtonUIYoutubeLogo";
 export {
-  r as YoutubeLogo
+  d as YoutubeLogo
 };
 //# sourceMappingURL=YoutubeLogo.es.js.map

package/dist/components/Icon/IconComponents/YoutubeLogo.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"YoutubeLogo.es.js","sources":["../../../../src/components/Icon/IconComponents/YoutubeLogo.tsx"],"sourcesContent":["import {\n  type IconProps,\n  DEFAULT_SVG_XMLNS,\n  getDefaultIconTestId,\n  getBrandColor,\n} from \"../IconProps\";\n\n/** YouTube brand logo. {@link IconProps} */\nexport function YoutubeLogo({\n  size = 16,\n  color,\n  \"data-testid\": dataTestId,\n}: IconProps) {\n  return (\n    <svg\n      xmlns={DEFAULT_SVG_XMLNS}\n      viewBox=\"0 0 256 180\"\n      width={size}\n      height={size}\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      data-testid={dataTestId || getDefaultIconTestId(\"youtube-logo\")}\n    >\n      <path\n        fill={getBrandColor(\"youtube-logo\", color)}\n        d=\"M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134\"\n      />\n      <path fill=\"#fff\" d=\"m102.421 128.06l66.328-38.418l-66.328-38.418z\" />\n    </svg>\n  );\n}\n\nYoutubeLogo.displayName = \"ProtonUIYoutubeLogo\";\n"],"names":["YoutubeLogo","size","color","dataTestId","jsxs","DEFAULT_SVG_XMLNS","getDefaultIconTestId","jsx","getBrandColor"],"mappings":";;AAQO,SAASA,EAAY;AAAA,EAC1B,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,eAAeC;AACjB,GAAc;AAEV,SAAAC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAOC;AAAA,MACP,SAAQ;AAAA,MACR,OAAOJ;AAAA,MACP,QAAQA;AAAA,MACR,eAAY;AAAA,MACZ,WAAU;AAAA,MACV,eAAaE,KAAcG,EAAqB,cAAc;AAAA,MAE9D,UAAA;AAAA,QAAAC,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAMC,EAAc,gBAAgBN,CAAK;AAAA,YACzC,GAAE;AAAA,UAAA;AAAA,QACJ;AAAA,QACCK,gBAAAA,EAAA,IAAA,QAAA,EAAK,MAAK,QAAO,GAAE,iDAAgD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1E;AAEAP,EAAY,cAAc;"}
+{"version":3,"file":"YoutubeLogo.es.js","sources":["../../../../src/components/Icon/IconComponents/YoutubeLogo.tsx"],"sourcesContent":["import {\n  type IconProps,\n  DEFAULT_ARIA_PROPS,\n  DEFAULT_SVG_XMLNS,\n  getDefaultIconTestId,\n  getBrandColor,\n} from \"../IconProps\";\n\n/** YouTube brand logo. {@link IconProps} */\nexport function YoutubeLogo({\n  size = 16,\n  color,\n  \"data-testid\": dataTestId,\n  ariaProps = DEFAULT_ARIA_PROPS,\n}: IconProps) {\n  return (\n    <svg\n      xmlns={DEFAULT_SVG_XMLNS}\n      viewBox=\"0 0 256 180\"\n      width={size}\n      height={size}\n      {...ariaProps}\n      data-testid={dataTestId || getDefaultIconTestId(\"youtube-logo\")}\n    >\n      <path\n        fill={color || getBrandColor(\"youtube-logo\")}\n        d=\"M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134\"\n      />\n      <path fill=\"#fff\" d=\"m102.421 128.06l66.328-38.418l-66.328-38.418z\" />\n    </svg>\n  );\n}\n\nYoutubeLogo.displayName = \"ProtonUIYoutubeLogo\";\n"],"names":["YoutubeLogo","size","color","dataTestId","ariaProps","DEFAULT_ARIA_PROPS","jsxs","DEFAULT_SVG_XMLNS","getDefaultIconTestId","jsx","getBrandColor"],"mappings":";;AASO,SAASA,EAAY;AAAA,EAC1B,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,eAAeC;AAAA,EACf,WAAAC,IAAYC;AACd,GAAc;AACZ,SACEC,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAOC;AAAA,MACP,SAAQ;AAAA,MACR,OAAON;AAAA,MACP,QAAQA;AAAA,MACP,GAAGG;AAAA,MACJ,eAAaD,KAAcK,EAAqB,cAAc;AAAA,MAE9D,UAAA;AAAA,QAAAC,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAMP,KAASQ,EAAc,cAAc;AAAA,YAC3C,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJD,gBAAAA,EAAAA,IAAC,QAAA,EAAK,MAAK,QAAO,GAAE,gDAAA,CAAgD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1E;AAEAT,EAAY,cAAc;"}

package/dist/components/Icon/IconProps.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g="http://www.w3.org/2000/svg",t={"apple-music-logo":"#ff2d55","amazon-music-logo":"#19CDD5","bandcamp-logo":"#1D8FB6","beatport-logo":"#01FF95","traxsource-logo":"#40a0ff","spotify-logo":"#1ed760","soundcloud-logo":"#ff8800","proton-logo":"#e26014","youtube-logo":"#ff0000","whatsapp-logo-thick":"#25d366","whatsapp-logo-thin":"#25d366","telegram-logo":"#0088cc","facebook-logo":"#1877f2","messenger-logo":"#0088cc","x-twitter-logo":"#1da1f2","intercom-logo":"#120D0C","tiktok-logo":"#010101","deezer-logo":"#8F00FF","instagram-logo":"#000000","yandex-logo":"#FED42B"};function l(o){return`icon:${o}`}function r(o,e){return e||t[o]||"currentColor"}exports.DEFAULT_BRAND_COLORS=t;exports.DEFAULT_SVG_XMLNS=g;exports.getBrandColor=r;exports.getDefaultIconTestId=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="http://www.w3.org/2000/svg",t={"apple-music-logo":"#ff2d55","amazon-music-logo":"#19CDD5","bandcamp-logo":"#1D8FB6","beatport-logo":"#01FF95","traxsource-logo":"#40a0ff","spotify-logo":"#1ed760","soundcloud-logo":"#ff8800","proton-logo":"#e26014","youtube-logo":"#ff0000","whatsapp-logo-thick":"#25d366","whatsapp-logo-thin":"#25d366","telegram-logo":"#0088cc","facebook-logo":"#1877f2","messenger-logo":"#0088cc","x-twitter-logo":"#1da1f2","intercom-logo":"#120D0C","tiktok-logo":"#010101","deezer-logo":"#8F00FF","instagram-logo":"#000000","yandex-logo":"#FED42B"},l={"aria-hidden":"true",focusable:"false"};function g(o){return`icon:${o}`}function a(o){return t[o]||"currentColor"}exports.DEFAULT_ARIA_PROPS=l;exports.DEFAULT_BRAND_COLORS=t;exports.DEFAULT_SVG_XMLNS=e;exports.getBrandColor=a;exports.getDefaultIconTestId=g;
 //# sourceMappingURL=IconProps.cjs.js.map

package/dist/components/Icon/IconProps.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconProps.cjs.js","sources":["../../../src/components/Icon/IconProps.ts"],"sourcesContent":["import { ProtonStyleSheet } from \"../../design\";\n\nexport type ProtonColorVariable = Extract<\n  keyof ProtonStyleSheet,\n  `--proton-color__${string}`\n>;\n/** Prefer these for icon color so they respect theme. */\nexport type ProtonIconColor = `var(${ProtonColorVariable})`;\n\nexport const DEFAULT_SVG_XMLNS = \"http://www.w3.org/2000/svg\";\n\nexport const DEFAULT_BRAND_COLORS: Record<string, string> = {\n  \"apple-music-logo\": \"#ff2d55\",\n  \"amazon-music-logo\": \"#19CDD5\",\n  \"bandcamp-logo\": \"#1D8FB6\",\n  \"beatport-logo\": \"#01FF95\",\n  \"traxsource-logo\": \"#40a0ff\",\n  \"spotify-logo\": \"#1ed760\",\n  \"soundcloud-logo\": \"#ff8800\",\n  \"proton-logo\": \"#e26014\",\n  \"youtube-logo\": \"#ff0000\",\n  \"whatsapp-logo-thick\": \"#25d366\",\n  \"whatsapp-logo-thin\": \"#25d366\",\n  \"telegram-logo\": \"#0088cc\",\n  \"facebook-logo\": \"#1877f2\",\n  \"messenger-logo\": \"#0088cc\",\n  \"x-twitter-logo\": \"#1da1f2\",\n  \"intercom-logo\": \"#120D0C\",\n  \"tiktok-logo\": \"#010101\",\n  \"deezer-logo\": \"#8F00FF\",\n  \"instagram-logo\": \"#000000\",\n  \"yandex-logo\": \"#FED42B\",\n};\n\nexport function getDefaultIconTestId(componentName: string): string {\n  return `icon:${componentName}`;\n}\n\nexport function getBrandColor(logoName: string, color?: string): string {\n  return color || DEFAULT_BRAND_COLORS[logoName] || \"currentColor\";\n}\n\n/**\n * Props shared by all icon components.\n *\n * #### Available icons \n * \n * Storybook: @external https://main--6707087fc1d3b8bc748a0474.chromatic.com/?path=/docs/components-icon--docs\n * \n * Github: @external https://github.com/protonradio/proton-ui/tree/main/src/components/Icon/index.ts\n*/\nexport interface IconProps {\n  /**\n   * Size of the icon. Accepts any CSS unit string.\n   * @default 16\n   */\n  size?: string | number;\n  /**\n   * Icon color.\n   * Prefer Proton theme tokens, e.g. `var(--proton-color__primary)`, `var(--proton-color__gray-medium)`.\n   * @default for non logo icons is `currentColor`\n   * @default for logo icons is the logos corresponding brand value\n   * @see {@link DEFAULT_BRAND_COLORS}\n   */\n  color?: ProtonIconColor | string;\n  /**\n   * data-testid for the root SVG. When omitted, defaults to `icon:${componentName}`.\n   */\n  \"data-testid\"?: string;\n}\n"],"names":["DEFAULT_SVG_XMLNS","DEFAULT_BRAND_COLORS","getDefaultIconTestId","componentName","getBrandColor","logoName","color"],"mappings":"gFASO,MAAMA,EAAoB,6BAEpBC,EAA+C,CAC1D,mBAAoB,UACpB,oBAAqB,UACrB,gBAAiB,UACjB,gBAAiB,UACjB,kBAAmB,UACnB,eAAgB,UAChB,kBAAmB,UACnB,cAAe,UACf,eAAgB,UAChB,sBAAuB,UACvB,qBAAsB,UACtB,gBAAiB,UACjB,gBAAiB,UACjB,iBAAkB,UAClB,iBAAkB,UAClB,gBAAiB,UACjB,cAAe,UACf,cAAe,UACf,iBAAkB,UAClB,cAAe,SACjB,EAEO,SAASC,EAAqBC,EAA+B,CAClE,MAAO,QAAQA,CAAa,EAC9B,CAEgB,SAAAC,EAAcC,EAAkBC,EAAwB,CAC/D,OAAAA,GAASL,EAAqBI,CAAQ,GAAK,cACpD"}
+{"version":3,"file":"IconProps.cjs.js","sources":["../../../src/components/Icon/IconProps.ts"],"sourcesContent":["import { ProtonStyleSheet } from \"../../design\";\n\nexport type ProtonColorVariable = Extract<\n  keyof ProtonStyleSheet,\n  `--proton-color__${string}`\n>;\n/** Prefer these for icon color so they respect theme. */\nexport type ProtonIconColor = `var(${ProtonColorVariable})`;\n\nexport const DEFAULT_SVG_XMLNS = \"http://www.w3.org/2000/svg\";\n\nexport const DEFAULT_BRAND_COLORS: Record<string, string> = {\n  \"apple-music-logo\": \"#ff2d55\",\n  \"amazon-music-logo\": \"#19CDD5\",\n  \"bandcamp-logo\": \"#1D8FB6\",\n  \"beatport-logo\": \"#01FF95\",\n  \"traxsource-logo\": \"#40a0ff\",\n  \"spotify-logo\": \"#1ed760\",\n  \"soundcloud-logo\": \"#ff8800\",\n  \"proton-logo\": \"#e26014\",\n  \"youtube-logo\": \"#ff0000\",\n  \"whatsapp-logo-thick\": \"#25d366\",\n  \"whatsapp-logo-thin\": \"#25d366\",\n  \"telegram-logo\": \"#0088cc\",\n  \"facebook-logo\": \"#1877f2\",\n  \"messenger-logo\": \"#0088cc\",\n  \"x-twitter-logo\": \"#1da1f2\",\n  \"intercom-logo\": \"#120D0C\",\n  \"tiktok-logo\": \"#010101\",\n  \"deezer-logo\": \"#8F00FF\",\n  \"instagram-logo\": \"#000000\",\n  \"yandex-logo\": \"#FED42B\",\n};\n\nexport const DEFAULT_ARIA_PROPS: Record<string, string> = {\n  \"aria-hidden\": \"true\",\n  focusable: \"false\",\n};\n\nexport function getDefaultIconTestId(componentName: string): string {\n  return `icon:${componentName}`;\n}\n\nexport function getBrandColor(logoName: string): string {\n  return DEFAULT_BRAND_COLORS[logoName] || \"currentColor\";\n}\n\n/**\n * Props shared by all decorative icon components.\n *\n * #### Available icons\n *\n * Storybook: @external https://main--6707087fc1d3b8bc748a0474.chromatic.com/?path=/docs/components-icon--docs\n *\n * Github: @external https://github.com/protonradio/proton-ui/tree/main/src/components/Icon/index.ts\n */\nexport interface IconProps {\n  /**\n   * Aria attributes for the icon. Icons are decorative by default.\n   * @default { \"aria-hidden\": \"true\", focusable: \"false\" }\n   */\n  ariaProps?: Record<string, string>;\n  /**\n   * Icon color.\n   * Prefer Proton theme tokens, e.g. `var(--proton-color__primary)`, `var(--proton-color__gray-medium)`.\n   * @default for non logo icons is `currentColor`\n   * @default for logo icons is the logos corresponding brand value\n   * @see {@link DEFAULT_BRAND_COLORS}\n   */\n  color?: ProtonIconColor | string;\n  /**\n   * data-testid for the root SVG. When omitted, defaults to `icon:${componentName}`.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Size of the icon. Accepts any CSS unit string.\n   * @default 16\n   */\n  size?: string | number;\n}\n"],"names":["DEFAULT_SVG_XMLNS","DEFAULT_BRAND_COLORS","DEFAULT_ARIA_PROPS","getDefaultIconTestId","componentName","getBrandColor","logoName"],"mappings":"gFASO,MAAMA,EAAoB,6BAEpBC,EAA+C,CAC1D,mBAAoB,UACpB,oBAAqB,UACrB,gBAAiB,UACjB,gBAAiB,UACjB,kBAAmB,UACnB,eAAgB,UAChB,kBAAmB,UACnB,cAAe,UACf,eAAgB,UAChB,sBAAuB,UACvB,qBAAsB,UACtB,gBAAiB,UACjB,gBAAiB,UACjB,iBAAkB,UAClB,iBAAkB,UAClB,gBAAiB,UACjB,cAAe,UACf,cAAe,UACf,iBAAkB,UAClB,cAAe,SACjB,EAEaC,EAA6C,CACxD,cAAe,OACf,UAAW,OACb,EAEO,SAASC,EAAqBC,EAA+B,CAClE,MAAO,QAAQA,CAAa,EAC9B,CAEO,SAASC,EAAcC,EAA0B,CACtD,OAAOL,EAAqBK,CAAQ,GAAK,cAC3C"}

package/dist/components/Icon/IconProps.es.js

@@ -1,4 +1,4 @@
-const e = "http://www.w3.org/2000/svg", g = {
+const e = "http://www.w3.org/2000/svg", t = {
   "apple-music-logo": "#ff2d55",
   "amazon-music-logo": "#19CDD5",
   "bandcamp-logo": "#1D8FB6",
@@ -19,17 +19,21 @@ const e = "http://www.w3.org/2000/svg", g = {
   "deezer-logo": "#8F00FF",
   "instagram-logo": "#000000",
   "yandex-logo": "#FED42B"
+}, l = {
+  "aria-hidden": "true",
+  focusable: "false"
 };
-function l(o) {
+function g(o) {
   return `icon:${o}`;
 }
-function n(o, t) {
-  return t || g[o] || "currentColor";
+function a(o) {
+  return t[o] || "currentColor";
 }
 export {
-  g as DEFAULT_BRAND_COLORS,
+  l as DEFAULT_ARIA_PROPS,
+  t as DEFAULT_BRAND_COLORS,
   e as DEFAULT_SVG_XMLNS,
-  n as getBrandColor,
-  l as getDefaultIconTestId
+  a as getBrandColor,
+  g as getDefaultIconTestId
 };
 //# sourceMappingURL=IconProps.es.js.map

package/dist/components/Icon/IconProps.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconProps.es.js","sources":["../../../src/components/Icon/IconProps.ts"],"sourcesContent":["import { ProtonStyleSheet } from \"../../design\";\n\nexport type ProtonColorVariable = Extract<\n  keyof ProtonStyleSheet,\n  `--proton-color__${string}`\n>;\n/** Prefer these for icon color so they respect theme. */\nexport type ProtonIconColor = `var(${ProtonColorVariable})`;\n\nexport const DEFAULT_SVG_XMLNS = \"http://www.w3.org/2000/svg\";\n\nexport const DEFAULT_BRAND_COLORS: Record<string, string> = {\n  \"apple-music-logo\": \"#ff2d55\",\n  \"amazon-music-logo\": \"#19CDD5\",\n  \"bandcamp-logo\": \"#1D8FB6\",\n  \"beatport-logo\": \"#01FF95\",\n  \"traxsource-logo\": \"#40a0ff\",\n  \"spotify-logo\": \"#1ed760\",\n  \"soundcloud-logo\": \"#ff8800\",\n  \"proton-logo\": \"#e26014\",\n  \"youtube-logo\": \"#ff0000\",\n  \"whatsapp-logo-thick\": \"#25d366\",\n  \"whatsapp-logo-thin\": \"#25d366\",\n  \"telegram-logo\": \"#0088cc\",\n  \"facebook-logo\": \"#1877f2\",\n  \"messenger-logo\": \"#0088cc\",\n  \"x-twitter-logo\": \"#1da1f2\",\n  \"intercom-logo\": \"#120D0C\",\n  \"tiktok-logo\": \"#010101\",\n  \"deezer-logo\": \"#8F00FF\",\n  \"instagram-logo\": \"#000000\",\n  \"yandex-logo\": \"#FED42B\",\n};\n\nexport function getDefaultIconTestId(componentName: string): string {\n  return `icon:${componentName}`;\n}\n\nexport function getBrandColor(logoName: string, color?: string): string {\n  return color || DEFAULT_BRAND_COLORS[logoName] || \"currentColor\";\n}\n\n/**\n * Props shared by all icon components.\n *\n * #### Available icons \n * \n * Storybook: @external https://main--6707087fc1d3b8bc748a0474.chromatic.com/?path=/docs/components-icon--docs\n * \n * Github: @external https://github.com/protonradio/proton-ui/tree/main/src/components/Icon/index.ts\n*/\nexport interface IconProps {\n  /**\n   * Size of the icon. Accepts any CSS unit string.\n   * @default 16\n   */\n  size?: string | number;\n  /**\n   * Icon color.\n   * Prefer Proton theme tokens, e.g. `var(--proton-color__primary)`, `var(--proton-color__gray-medium)`.\n   * @default for non logo icons is `currentColor`\n   * @default for logo icons is the logos corresponding brand value\n   * @see {@link DEFAULT_BRAND_COLORS}\n   */\n  color?: ProtonIconColor | string;\n  /**\n   * data-testid for the root SVG. When omitted, defaults to `icon:${componentName}`.\n   */\n  \"data-testid\"?: string;\n}\n"],"names":["DEFAULT_SVG_XMLNS","DEFAULT_BRAND_COLORS","getDefaultIconTestId","componentName","getBrandColor","logoName","color"],"mappings":"AASO,MAAMA,IAAoB,8BAEpBC,IAA+C;AAAA,EAC1D,oBAAoB;AAAA,EACpB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,eAAe;AACjB;AAEO,SAASC,EAAqBC,GAA+B;AAClE,SAAO,QAAQA,CAAa;AAC9B;AAEgB,SAAAC,EAAcC,GAAkBC,GAAwB;AAC/D,SAAAA,KAASL,EAAqBI,CAAQ,KAAK;AACpD;"}
+{"version":3,"file":"IconProps.es.js","sources":["../../../src/components/Icon/IconProps.ts"],"sourcesContent":["import { ProtonStyleSheet } from \"../../design\";\n\nexport type ProtonColorVariable = Extract<\n  keyof ProtonStyleSheet,\n  `--proton-color__${string}`\n>;\n/** Prefer these for icon color so they respect theme. */\nexport type ProtonIconColor = `var(${ProtonColorVariable})`;\n\nexport const DEFAULT_SVG_XMLNS = \"http://www.w3.org/2000/svg\";\n\nexport const DEFAULT_BRAND_COLORS: Record<string, string> = {\n  \"apple-music-logo\": \"#ff2d55\",\n  \"amazon-music-logo\": \"#19CDD5\",\n  \"bandcamp-logo\": \"#1D8FB6\",\n  \"beatport-logo\": \"#01FF95\",\n  \"traxsource-logo\": \"#40a0ff\",\n  \"spotify-logo\": \"#1ed760\",\n  \"soundcloud-logo\": \"#ff8800\",\n  \"proton-logo\": \"#e26014\",\n  \"youtube-logo\": \"#ff0000\",\n  \"whatsapp-logo-thick\": \"#25d366\",\n  \"whatsapp-logo-thin\": \"#25d366\",\n  \"telegram-logo\": \"#0088cc\",\n  \"facebook-logo\": \"#1877f2\",\n  \"messenger-logo\": \"#0088cc\",\n  \"x-twitter-logo\": \"#1da1f2\",\n  \"intercom-logo\": \"#120D0C\",\n  \"tiktok-logo\": \"#010101\",\n  \"deezer-logo\": \"#8F00FF\",\n  \"instagram-logo\": \"#000000\",\n  \"yandex-logo\": \"#FED42B\",\n};\n\nexport const DEFAULT_ARIA_PROPS: Record<string, string> = {\n  \"aria-hidden\": \"true\",\n  focusable: \"false\",\n};\n\nexport function getDefaultIconTestId(componentName: string): string {\n  return `icon:${componentName}`;\n}\n\nexport function getBrandColor(logoName: string): string {\n  return DEFAULT_BRAND_COLORS[logoName] || \"currentColor\";\n}\n\n/**\n * Props shared by all decorative icon components.\n *\n * #### Available icons\n *\n * Storybook: @external https://main--6707087fc1d3b8bc748a0474.chromatic.com/?path=/docs/components-icon--docs\n *\n * Github: @external https://github.com/protonradio/proton-ui/tree/main/src/components/Icon/index.ts\n */\nexport interface IconProps {\n  /**\n   * Aria attributes for the icon. Icons are decorative by default.\n   * @default { \"aria-hidden\": \"true\", focusable: \"false\" }\n   */\n  ariaProps?: Record<string, string>;\n  /**\n   * Icon color.\n   * Prefer Proton theme tokens, e.g. `var(--proton-color__primary)`, `var(--proton-color__gray-medium)`.\n   * @default for non logo icons is `currentColor`\n   * @default for logo icons is the logos corresponding brand value\n   * @see {@link DEFAULT_BRAND_COLORS}\n   */\n  color?: ProtonIconColor | string;\n  /**\n   * data-testid for the root SVG. When omitted, defaults to `icon:${componentName}`.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Size of the icon. Accepts any CSS unit string.\n   * @default 16\n   */\n  size?: string | number;\n}\n"],"names":["DEFAULT_SVG_XMLNS","DEFAULT_BRAND_COLORS","DEFAULT_ARIA_PROPS","getDefaultIconTestId","componentName","getBrandColor","logoName"],"mappings":"AASO,MAAMA,IAAoB,8BAEpBC,IAA+C;AAAA,EAC1D,oBAAoB;AAAA,EACpB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,eAAe;AACjB,GAEaC,IAA6C;AAAA,EACxD,eAAe;AAAA,EACf,WAAW;AACb;AAEO,SAASC,EAAqBC,GAA+B;AAClE,SAAO,QAAQA,CAAa;AAC9B;AAEO,SAASC,EAAcC,GAA0B;AACtD,SAAOL,EAAqBK,CAAQ,KAAK;AAC3C;"}

package/dist/components/ImageBackground/ImageBackground.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../../node_modules/react/jsx-runtime.cjs.js");;/* empty css                                      */const c=require("../ThemeProvider.cjs.js"),u=require("../../node_modules/color2k/dist/index.exports.import.es.cjs.js"),l=r=>{const[s,e,n]=r,t=s+e+n;if(t<65){const o=t/100;return`rgba(255, 255, 255, ${Math.max(.14,.36-o)})`}return""};function g({image:r,imageUrl:s="",onLoad:e}){const{palette:n}=c.useTheme(),t=u.parseToRgba(n.BASE_COLOR),o=l(t);return a.jsxRuntimeExports.jsxs("div",{id:"image-background","aria-label":"Background overlay",role:"dialog","aria-modal":"true",className:"proton-ScreenOverlay__background",children:[r?a.jsxRuntimeExports.jsx("div",{"aria-hidden":"true",children:r}):a.jsxRuntimeExports.jsx("img",{alt:"",src:s,className:"proton-ScreenOverlay__image",onLoad:i=>e==null?void 0:e(i.currentTarget),"aria-hidden":"true"}),a.jsxRuntimeExports.jsx("div",{className:"proton-ScreenOverlay__blur","aria-hidden":"true",style:{background:o}})]})}exports.ImageBackground=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../../node_modules/react/jsx-runtime.cjs.js");;/* empty css                                      */const c=require("../ThemeProvider.cjs.js"),u=require("../../node_modules/color2k/dist/index.exports.import.es.cjs.js"),A=r=>{const[s,e,n]=r,t=s+e+n;if(t<65){const o=t/100;return`rgba(255, 255, 255, ${Math.max(.14,.36-o)})`}return""},l="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";function g({image:r,imageUrl:s=l,onLoad:e}){const{palette:n}=c.useTheme(),t=u.parseToRgba(n.BASE_COLOR),o=A(t);return a.jsxRuntimeExports.jsxs("div",{id:"image-background","aria-label":"Background overlay",role:"dialog","aria-modal":"true",className:"proton-ScreenOverlay__background",children:[r?a.jsxRuntimeExports.jsx("div",{"aria-hidden":"true",children:r}):a.jsxRuntimeExports.jsx("img",{alt:"",src:s,className:"proton-ScreenOverlay__image",onLoad:i=>e==null?void 0:e(i.currentTarget),"aria-hidden":"true"}),a.jsxRuntimeExports.jsx("div",{className:"proton-ScreenOverlay__blur","aria-hidden":"true",style:{background:o}})]})}exports.ImageBackground=g;
 //# sourceMappingURL=ImageBackground.cjs.js.map

package/dist/components/ImageBackground/ImageBackground.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBackground.cjs.js","sources":["../../../src/components/ImageBackground/ImageBackground.tsx"],"sourcesContent":["\"use client\";\n\nimport \"../ScreenOverlay/ScreenOverlay.css\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { parseToRgba } from \"color2k\";\n\ninterface ImageBackgroundProps {\n  /**\n   * Manually display a background image. Useful for server-side rendering.\n   * @important When using this prop, you must style your own image component appropriately.\n   * The component will be placed directly in the background without additional styling.\n   */\n  image?: React.ReactNode;\n  /**\n   * The URL of the image to display in the background.\n   * @important Client-side only. Cannot be used in Server Components.\n   * When using this prop, the image will be automatically styled with the background effect.\n   */\n  imageUrl?: string;\n  /**\n   * Callback function to handle the image load event.\n   * @important Client-side only. Cannot be used in Server Components.\n   */\n  onLoad?: (image: HTMLImageElement) => void;\n}\n\n/**\n * Calculates a background color with appropriate opacity based on the brightness of the base color.\n * For dark colors (sum of RGB values < 65), returns a white overlay with variable opacity.\n * For brighter colors, returns an empty string (no overlay needed).\n */\nconst getBgWhiteOverlayColor = (color: [number, number, number, number]) => {\n  const [r, g, b] = color;\n  const brightness = r + g + b;\n\n  // Only apply white overlay for dark backgrounds\n  if (brightness < 65) {\n    // Calculate opacity inversely proportional to brightness\n    // Brighter colors get less opacity, with a minimum of 0.1\n    const brightnessPercentage = brightness / 100;\n    const opacity = Math.max(0.14, 0.36 - brightnessPercentage);\n\n    return `rgba(255, 255, 255, ${opacity})`;\n  }\n\n  return \"\";\n};\n\n/**\n * ImageOverlay component for displaying an image with a blur effect.\n *\n * API:\n *  - {@link ImageBackgroundProps}\n */\nexport function ImageBackground({\n  image,\n  imageUrl = \"\",\n  onLoad,\n}: ImageBackgroundProps) {\n  const { palette } = useTheme();\n  const baseColor = parseToRgba(palette.BASE_COLOR);\n  const backgroundColor = getBgWhiteOverlayColor(baseColor);\n\n  return (\n    <div\n      id=\"image-background\"\n      aria-label=\"Background overlay\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      className=\"proton-ScreenOverlay__background\"\n    >\n      {image ? (\n        <div aria-hidden=\"true\">{image}</div>\n      ) : (\n        <img\n          alt=\"\" // Decorative image\n          src={imageUrl}\n          className=\"proton-ScreenOverlay__image\"\n          onLoad={(event) => onLoad?.(event.currentTarget)}\n          aria-hidden=\"true\"\n        />\n      )}\n      <div\n        className=\"proton-ScreenOverlay__blur\"\n        aria-hidden=\"true\"\n        style={{\n          background: backgroundColor,\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["getBgWhiteOverlayColor","color","r","g","b","brightness","brightnessPercentage","ImageBackground","image","imageUrl","onLoad","palette","useTheme","baseColor","parseToRgba","backgroundColor","jsxs","jsx","event"],"mappings":"2TA+BMA,EAA0BC,GAA4C,CAC1E,KAAM,CAACC,EAAGC,EAAGC,CAAC,EAAIH,EACZI,EAAaH,EAAIC,EAAIC,EAG3B,GAAIC,EAAa,GAAI,CAGnB,MAAMC,EAAuBD,EAAa,IAG1C,MAAO,uBAFS,KAAK,IAAI,IAAM,IAAOC,CAAoB,CAErB,GACvC,CAEO,MAAA,EACT,EAQO,SAASC,EAAgB,CAC9B,MAAAC,EACA,SAAAC,EAAW,GACX,OAAAC,CACF,EAAyB,CACjB,KAAA,CAAE,QAAAC,GAAYC,EAAAA,WACdC,EAAYC,EAAAA,YAAYH,EAAQ,UAAU,EAC1CI,EAAkBf,EAAuBa,CAAS,EAGtD,OAAAG,EAAA,kBAAA,KAAC,MAAA,CACC,GAAG,mBACH,aAAW,qBACX,KAAK,SACL,aAAW,OACX,UAAU,mCAET,SAAA,CAAAR,EACES,EAAAA,kBAAAA,IAAA,MAAA,CAAI,cAAY,OAAQ,UAAM,CAAA,EAE/BA,EAAA,kBAAA,IAAC,MAAA,CACC,IAAI,GACJ,IAAKR,EACL,UAAU,8BACV,OAASS,GAAUR,GAAA,YAAAA,EAASQ,EAAM,eAClC,cAAY,MAAA,CACd,EAEFD,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,6BACV,cAAY,OACZ,MAAO,CACL,WAAYF,CACd,CAAA,CACF,CAAA,CAAA,CAAA,CAGN"}
+{"version":3,"file":"ImageBackground.cjs.js","sources":["../../../src/components/ImageBackground/ImageBackground.tsx"],"sourcesContent":["\"use client\";\n\nimport \"../ScreenOverlay/ScreenOverlay.css\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { parseToRgba } from \"color2k\";\n\ninterface ImageBackgroundProps {\n  /**\n   * Manually display a background image. Useful for server-side rendering.\n   * @important When using this prop, you must style your own image component appropriately.\n   * The component will be placed directly in the background without additional styling.\n   */\n  image?: React.ReactNode;\n  /**\n   * The URL of the image to display in the background.\n   * @important Client-side only. Cannot be used in Server Components.\n   * When using this prop, the image will be automatically styled with the background effect.\n   */\n  imageUrl?: string;\n  /**\n   * Callback function to handle the image load event.\n   * @important Client-side only. Cannot be used in Server Components.\n   */\n  onLoad?: (image: HTMLImageElement) => void;\n}\n\n/**\n * Calculates a background color with appropriate opacity based on the brightness of the base color.\n * For dark colors (sum of RGB values < 65), returns a white overlay with variable opacity.\n * For brighter colors, returns an empty string (no overlay needed).\n */\nconst getBgWhiteOverlayColor = (color: [number, number, number, number]) => {\n  const [r, g, b] = color;\n  const brightness = r + g + b;\n\n  // Only apply white overlay for dark backgrounds\n  if (brightness < 65) {\n    // Calculate opacity inversely proportional to brightness\n    // Brighter colors get less opacity, with a minimum of 0.1\n    const brightnessPercentage = brightness / 100;\n    const opacity = Math.max(0.14, 0.36 - brightnessPercentage);\n\n    return `rgba(255, 255, 255, ${opacity})`;\n  }\n\n  return \"\";\n};\n\nconst transparentGifPlaceholder =\n  \"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\";\n\n/**\n * ImageOverlay component for displaying an image with a blur effect.\n *\n * API:\n *  - {@link ImageBackgroundProps}\n */\nexport function ImageBackground({\n  image,\n  imageUrl = transparentGifPlaceholder,\n  onLoad,\n}: ImageBackgroundProps) {\n  const { palette } = useTheme();\n  const baseColor = parseToRgba(palette.BASE_COLOR);\n  const backgroundColor = getBgWhiteOverlayColor(baseColor);\n\n  return (\n    <div\n      id=\"image-background\"\n      aria-label=\"Background overlay\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      className=\"proton-ScreenOverlay__background\"\n    >\n      {image ? (\n        <div aria-hidden=\"true\">{image}</div>\n      ) : (\n        <img\n          alt=\"\" // Decorative image\n          src={imageUrl}\n          className=\"proton-ScreenOverlay__image\"\n          onLoad={(event) => onLoad?.(event.currentTarget)}\n          aria-hidden=\"true\"\n        />\n      )}\n      <div\n        className=\"proton-ScreenOverlay__blur\"\n        aria-hidden=\"true\"\n        style={{\n          background: backgroundColor,\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["getBgWhiteOverlayColor","color","r","g","b","brightness","brightnessPercentage","transparentGifPlaceholder","ImageBackground","image","imageUrl","onLoad","palette","useTheme","baseColor","parseToRgba","backgroundColor","jsxs","jsx","event"],"mappings":"2TA+BMA,EAA0BC,GAA4C,CAC1E,KAAM,CAACC,EAAGC,EAAGC,CAAC,EAAIH,EACZI,EAAaH,EAAIC,EAAIC,EAG3B,GAAIC,EAAa,GAAI,CAGnB,MAAMC,EAAuBD,EAAa,IAG1C,MAAO,uBAFS,KAAK,IAAI,IAAM,IAAOC,CAAoB,CAErB,GACvC,CAEA,MAAO,EACT,EAEMC,EACJ,iFAQK,SAASC,EAAgB,CAC9B,MAAAC,EACA,SAAAC,EAAWH,EACX,OAAAI,CACF,EAAyB,CACvB,KAAM,CAAE,QAAAC,CAAA,EAAYC,WAAA,EACdC,EAAYC,EAAAA,YAAYH,EAAQ,UAAU,EAC1CI,EAAkBhB,EAAuBc,CAAS,EAExD,OACEG,EAAAA,kBAAAA,KAAC,MAAA,CACC,GAAG,mBACH,aAAW,qBACX,KAAK,SACL,aAAW,OACX,UAAU,mCAET,SAAA,CAAAR,EACCS,EAAAA,kBAAAA,IAAC,MAAA,CAAI,cAAY,OAAQ,WAAM,EAE/BA,EAAAA,kBAAAA,IAAC,MAAA,CACC,IAAI,GACJ,IAAKR,EACL,UAAU,8BACV,OAASS,GAAUR,GAAA,YAAAA,EAASQ,EAAM,eAClC,cAAY,MAAA,CAAA,EAGhBD,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAU,6BACV,cAAY,OACZ,MAAO,CACL,WAAYF,CAAA,CACd,CAAA,CACF,CAAA,CAAA,CAGN"}

package/dist/components/ImageBackground/ImageBackground.es.js

@@ -1,21 +1,21 @@
 import { j as t } from "../../node_modules/react/jsx-runtime.es.js";
 /* empty css                                    */
 import { useTheme as c } from "../ThemeProvider.es.js";
-import { parseToRgba as l } from "../../node_modules/color2k/dist/index.exports.import.es.es.js";
-const g = (e) => {
+import { parseToRgba as A } from "../../node_modules/color2k/dist/index.exports.import.es.es.js";
+const l = (e) => {
   const [o, r, n] = e, a = o + r + n;
   if (a < 65) {
     const s = a / 100;
     return `rgba(255, 255, 255, ${Math.max(0.14, 0.36 - s)})`;
   }
   return "";
-};
+}, g = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
 function b({
   image: e,
-  imageUrl: o = "",
+  imageUrl: o = g,
   onLoad: r
 }) {
-  const { palette: n } = c(), a = l(n.BASE_COLOR), s = g(a);
+  const { palette: n } = c(), a = A(n.BASE_COLOR), s = l(a);
   return /* @__PURE__ */ t.jsxs(
     "div",
     {

package/dist/components/ImageBackground/ImageBackground.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBackground.es.js","sources":["../../../src/components/ImageBackground/ImageBackground.tsx"],"sourcesContent":["\"use client\";\n\nimport \"../ScreenOverlay/ScreenOverlay.css\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { parseToRgba } from \"color2k\";\n\ninterface ImageBackgroundProps {\n  /**\n   * Manually display a background image. Useful for server-side rendering.\n   * @important When using this prop, you must style your own image component appropriately.\n   * The component will be placed directly in the background without additional styling.\n   */\n  image?: React.ReactNode;\n  /**\n   * The URL of the image to display in the background.\n   * @important Client-side only. Cannot be used in Server Components.\n   * When using this prop, the image will be automatically styled with the background effect.\n   */\n  imageUrl?: string;\n  /**\n   * Callback function to handle the image load event.\n   * @important Client-side only. Cannot be used in Server Components.\n   */\n  onLoad?: (image: HTMLImageElement) => void;\n}\n\n/**\n * Calculates a background color with appropriate opacity based on the brightness of the base color.\n * For dark colors (sum of RGB values < 65), returns a white overlay with variable opacity.\n * For brighter colors, returns an empty string (no overlay needed).\n */\nconst getBgWhiteOverlayColor = (color: [number, number, number, number]) => {\n  const [r, g, b] = color;\n  const brightness = r + g + b;\n\n  // Only apply white overlay for dark backgrounds\n  if (brightness < 65) {\n    // Calculate opacity inversely proportional to brightness\n    // Brighter colors get less opacity, with a minimum of 0.1\n    const brightnessPercentage = brightness / 100;\n    const opacity = Math.max(0.14, 0.36 - brightnessPercentage);\n\n    return `rgba(255, 255, 255, ${opacity})`;\n  }\n\n  return \"\";\n};\n\n/**\n * ImageOverlay component for displaying an image with a blur effect.\n *\n * API:\n *  - {@link ImageBackgroundProps}\n */\nexport function ImageBackground({\n  image,\n  imageUrl = \"\",\n  onLoad,\n}: ImageBackgroundProps) {\n  const { palette } = useTheme();\n  const baseColor = parseToRgba(palette.BASE_COLOR);\n  const backgroundColor = getBgWhiteOverlayColor(baseColor);\n\n  return (\n    <div\n      id=\"image-background\"\n      aria-label=\"Background overlay\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      className=\"proton-ScreenOverlay__background\"\n    >\n      {image ? (\n        <div aria-hidden=\"true\">{image}</div>\n      ) : (\n        <img\n          alt=\"\" // Decorative image\n          src={imageUrl}\n          className=\"proton-ScreenOverlay__image\"\n          onLoad={(event) => onLoad?.(event.currentTarget)}\n          aria-hidden=\"true\"\n        />\n      )}\n      <div\n        className=\"proton-ScreenOverlay__blur\"\n        aria-hidden=\"true\"\n        style={{\n          background: backgroundColor,\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["getBgWhiteOverlayColor","color","r","g","b","brightness","brightnessPercentage","ImageBackground","image","imageUrl","onLoad","palette","useTheme","baseColor","parseToRgba","backgroundColor","jsxs","jsx","event"],"mappings":";;;;AA+BA,MAAMA,IAAyB,CAACC,MAA4C;AAC1E,QAAM,CAACC,GAAGC,GAAGC,CAAC,IAAIH,GACZI,IAAaH,IAAIC,IAAIC;AAG3B,MAAIC,IAAa,IAAI;AAGnB,UAAMC,IAAuBD,IAAa;AAG1C,WAAO,uBAFS,KAAK,IAAI,MAAM,OAAOC,CAAoB,CAErB;AAAA,EACvC;AAEO,SAAA;AACT;AAQO,SAASC,EAAgB;AAAA,EAC9B,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,QAAAC;AACF,GAAyB;AACjB,QAAA,EAAE,SAAAC,MAAYC,KACdC,IAAYC,EAAYH,EAAQ,UAAU,GAC1CI,IAAkBf,EAAuBa,CAAS;AAGtD,SAAAG,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,cAAW;AAAA,MACX,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAU;AAAA,MAET,UAAA;AAAA,QAAAR,IACES,gBAAAA,EAAAA,IAAA,OAAA,EAAI,eAAY,QAAQ,YAAM,CAAA,IAE/BA,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAI;AAAA,YACJ,KAAKR;AAAA,YACL,WAAU;AAAA,YACV,QAAQ,CAACS,MAAUR,KAAA,gBAAAA,EAASQ,EAAM;AAAA,YAClC,eAAY;AAAA,UAAA;AAAA,QACd;AAAA,QAEFD,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,OAAO;AAAA,cACL,YAAYF;AAAA,YACd;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ImageBackground.es.js","sources":["../../../src/components/ImageBackground/ImageBackground.tsx"],"sourcesContent":["\"use client\";\n\nimport \"../ScreenOverlay/ScreenOverlay.css\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { parseToRgba } from \"color2k\";\n\ninterface ImageBackgroundProps {\n  /**\n   * Manually display a background image. Useful for server-side rendering.\n   * @important When using this prop, you must style your own image component appropriately.\n   * The component will be placed directly in the background without additional styling.\n   */\n  image?: React.ReactNode;\n  /**\n   * The URL of the image to display in the background.\n   * @important Client-side only. Cannot be used in Server Components.\n   * When using this prop, the image will be automatically styled with the background effect.\n   */\n  imageUrl?: string;\n  /**\n   * Callback function to handle the image load event.\n   * @important Client-side only. Cannot be used in Server Components.\n   */\n  onLoad?: (image: HTMLImageElement) => void;\n}\n\n/**\n * Calculates a background color with appropriate opacity based on the brightness of the base color.\n * For dark colors (sum of RGB values < 65), returns a white overlay with variable opacity.\n * For brighter colors, returns an empty string (no overlay needed).\n */\nconst getBgWhiteOverlayColor = (color: [number, number, number, number]) => {\n  const [r, g, b] = color;\n  const brightness = r + g + b;\n\n  // Only apply white overlay for dark backgrounds\n  if (brightness < 65) {\n    // Calculate opacity inversely proportional to brightness\n    // Brighter colors get less opacity, with a minimum of 0.1\n    const brightnessPercentage = brightness / 100;\n    const opacity = Math.max(0.14, 0.36 - brightnessPercentage);\n\n    return `rgba(255, 255, 255, ${opacity})`;\n  }\n\n  return \"\";\n};\n\nconst transparentGifPlaceholder =\n  \"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\";\n\n/**\n * ImageOverlay component for displaying an image with a blur effect.\n *\n * API:\n *  - {@link ImageBackgroundProps}\n */\nexport function ImageBackground({\n  image,\n  imageUrl = transparentGifPlaceholder,\n  onLoad,\n}: ImageBackgroundProps) {\n  const { palette } = useTheme();\n  const baseColor = parseToRgba(palette.BASE_COLOR);\n  const backgroundColor = getBgWhiteOverlayColor(baseColor);\n\n  return (\n    <div\n      id=\"image-background\"\n      aria-label=\"Background overlay\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      className=\"proton-ScreenOverlay__background\"\n    >\n      {image ? (\n        <div aria-hidden=\"true\">{image}</div>\n      ) : (\n        <img\n          alt=\"\" // Decorative image\n          src={imageUrl}\n          className=\"proton-ScreenOverlay__image\"\n          onLoad={(event) => onLoad?.(event.currentTarget)}\n          aria-hidden=\"true\"\n        />\n      )}\n      <div\n        className=\"proton-ScreenOverlay__blur\"\n        aria-hidden=\"true\"\n        style={{\n          background: backgroundColor,\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["getBgWhiteOverlayColor","color","r","g","b","brightness","brightnessPercentage","transparentGifPlaceholder","ImageBackground","image","imageUrl","onLoad","palette","useTheme","baseColor","parseToRgba","backgroundColor","jsxs","jsx","event"],"mappings":";;;;AA+BA,MAAMA,IAAyB,CAACC,MAA4C;AAC1E,QAAM,CAACC,GAAGC,GAAGC,CAAC,IAAIH,GACZI,IAAaH,IAAIC,IAAIC;AAG3B,MAAIC,IAAa,IAAI;AAGnB,UAAMC,IAAuBD,IAAa;AAG1C,WAAO,uBAFS,KAAK,IAAI,MAAM,OAAOC,CAAoB,CAErB;AAAA,EACvC;AAEA,SAAO;AACT,GAEMC,IACJ;AAQK,SAASC,EAAgB;AAAA,EAC9B,OAAAC;AAAA,EACA,UAAAC,IAAWH;AAAA,EACX,QAAAI;AACF,GAAyB;AACvB,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA,GACdC,IAAYC,EAAYH,EAAQ,UAAU,GAC1CI,IAAkBhB,EAAuBc,CAAS;AAExD,SACEG,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,cAAW;AAAA,MACX,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAU;AAAA,MAET,UAAA;AAAA,QAAAR,IACCS,gBAAAA,EAAAA,IAAC,OAAA,EAAI,eAAY,QAAQ,aAAM,IAE/BA,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAI;AAAA,YACJ,KAAKR;AAAA,YACL,WAAU;AAAA,YACV,QAAQ,CAACS,MAAUR,KAAA,gBAAAA,EAASQ,EAAM;AAAA,YAClC,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhBD,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,OAAO;AAAA,cACL,YAAYF;AAAA,YAAA;AAAA,UACd;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Input/BaseInput/Input.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../../node_modules/react/jsx-runtime.cjs.js"),s=require("react"),D=require("../../ThemeProvider.cjs.js");;/* empty css               */const K=require("../../../utils/copy.cjs.js"),o=require("../../../utils/string.cjs.js"),T=s.forwardRef(({prefix:d,suffix:f,description:u,descriptionPosition:j="top",isDisabled:y,error:i,onChange:m,label:x,name:c,placeholder:g,type:z="text",value:R,autoFocus:F,autoComplete:k,isRequired:_=!1,isReadOnly:W=!1,onSubmit:b,onClear:E,"data-testid":A},O)=>{const N=s.useRef(null),a=s.useRef(null),p=s.useRef(null),r=s.useRef(null),{className:S}=D.useTheme(),B=O||N;s.useEffect(()=>{if(!r.current)return;const t={containerWidth:200,prefixWidth:32,suffixWidth:32};let l=null;const $=()=>{l!==null&&cancelAnimationFrame(l),l=requestAnimationFrame(()=>{var q,P;if(r.current){if(r.current){const e=r.current.offsetWidth||t.containerWidth;e!==t.containerWidth&&(r.current.style.setProperty("--container-width",`${e}px`),t.containerWidth=e)}if(a.current){const e=a.current.offsetWidth||t.prefixWidth;e!==t.prefixWidth&&((q=r.current)==null||q.style.setProperty("--prefix-width",`${e}px`),t.prefixWidth=e)}if(p.current){const e=p.current.offsetWidth||t.suffixWidth;e!==t.suffixWidth&&((P=r.current)==null||P.style.setProperty("--suffix-width",`${e}px`),t.suffixWidth=e)}}})};$();const h=new ResizeObserver($);return r.current&&h.observe(r.current),a.current&&h.observe(a.current),p.current&&h.observe(p.current),()=>{l!==null&&cancelAnimationFrame(l),h.disconnect()}},[d,f]);const w=`${c}-input`,I=`${c}-error`,v=`${c}-description`;return n.jsxRuntimeExports.jsxs("div",{ref:r,className:"proton-Input__container",children:[u&&j==="top"&&n.jsxRuntimeExports.jsx("div",{id:v,className:"proton-Input__text","aria-live":"polite",children:u}),n.jsxRuntimeExports.jsxs("div",{className:o.csx("proton-Input__container-inner",d&&"proton-Input__has-prefix",f&&"proton-Input__has-suffix"),children:[d&&n.jsxRuntimeExports.jsx("div",{ref:a,className:o.csx("proton-Input__descriptor","proton-Input__prefix"),children:d}),n.jsxRuntimeExports.jsx("input",{id:w,name:c,type:z,value:R,onChange:t=>{m==null||m(t.target.value)},onKeyDown:t=>{switch(t.key){case"Enter":b&&(t.preventDefault(),b(t));break;case"Escape":E&&(t.preventDefault(),E());break}},onCopy:async()=>{var t;return await K.copyTextToClipboard((t=N.current)==null?void 0:t.value)},disabled:y,readOnly:W,required:_,autoFocus:F,autoComplete:k?"on":"off",placeholder:x?void 0:g,"aria-label":x||c,"aria-invalid":!!i,"aria-errormessage":typeof i=="string"?i:I,"aria-required":_,"aria-readonly":W,"aria-describedby":i?I:u?v:void 0,"aria-disabled":y,"data-testid":A,ref:B,className:o.csx("proton-Input",i&&"proton-Input--error",x&&"proton-Input__label-top",S)}),n.jsxRuntimeExports.jsxs("label",{htmlFor:w,className:o.csx("proton-Input__label",R&&"proton-Input__label--filled"),children:[x,_&&n.jsxRuntimeExports.jsx("span",{"aria-hidden":"true",children:" *"})]}),f&&n.jsxRuntimeExports.jsx("div",{ref:p,className:o.csx("proton-Input__descriptor","proton-Input__suffix"),children:f})]}),i?n.jsxRuntimeExports.jsx("div",{role:"alert",className:o.csx("proton-Input__error","proton-Input__text"),id:I,children:i}):u&&j==="bottom"?n.jsxRuntimeExports.jsx("div",{id:v,className:"proton-Input__text","aria-live":"polite",children:u}):null]})});T.displayName="ProtonUIInput";exports.Input=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../../node_modules/react/jsx-runtime.cjs.js"),i=require("react"),D=require("../../../hooks/useMergedRef.cjs.js"),K=require("../../ThemeProvider.cjs.js");;/* empty css               */const U=require("../../../utils/copy.cjs.js"),o=require("../../../utils/string.cjs.js"),g=i.forwardRef(({prefix:d,suffix:l,description:u,descriptionPosition:j="top",isDisabled:R,error:s,onChange:h,label:f,name:W,placeholder:z,type:F="text",value:y,autoFocus:k,autoComplete:A,isRequired:m=!1,isReadOnly:b=!1,onSubmit:E,onClear:N,"data-testid":M},O)=>{const q=i.useRef(null),a=i.useRef(null),c=i.useRef(null),r=i.useRef(null),{className:S}=K.useTheme(),B=D.useMergedRef(q,O),_=i.useId();i.useEffect(()=>{if(!r.current)return;const e={containerWidth:200,prefixWidth:32,suffixWidth:32};let p=null;const $=()=>{p!==null&&cancelAnimationFrame(p),p=requestAnimationFrame(()=>{var P,T;if(r.current){if(r.current){const t=r.current.offsetWidth||e.containerWidth;t!==e.containerWidth&&(r.current.style.setProperty("--container-width",`${t}px`),e.containerWidth=t)}if(a.current){const t=a.current.offsetWidth||e.prefixWidth;t!==e.prefixWidth&&((P=r.current)==null||P.style.setProperty("--prefix-width",`${t}px`),e.prefixWidth=t)}if(c.current){const t=c.current.offsetWidth||e.suffixWidth;t!==e.suffixWidth&&((T=r.current)==null||T.style.setProperty("--suffix-width",`${t}px`),e.suffixWidth=t)}}})};$();const x=new ResizeObserver($);return r.current&&x.observe(r.current),a.current&&x.observe(a.current),c.current&&x.observe(c.current),()=>{p!==null&&cancelAnimationFrame(p),x.disconnect()}},[d,l]);const w=`${_}-input`,I=`${_}-error`,v=`${_}-description`;return n.jsxRuntimeExports.jsxs("div",{ref:r,className:"proton-Input__container",children:[u&&j==="top"&&n.jsxRuntimeExports.jsx("div",{id:v,className:"proton-Input__text","aria-live":"polite",children:u}),n.jsxRuntimeExports.jsxs("div",{className:o.csx("proton-Input__container-inner",d&&"proton-Input__has-prefix",l&&"proton-Input__has-suffix"),children:[d&&n.jsxRuntimeExports.jsx("div",{ref:a,className:o.csx("proton-Input__descriptor","proton-Input__prefix"),children:d}),n.jsxRuntimeExports.jsx("input",{id:w,name:W,type:F,value:y,onChange:e=>{h==null||h(e.target.value)},onKeyDown:e=>{switch(e.key){case"Enter":E&&(e.preventDefault(),E(e));break;case"Escape":N&&(e.preventDefault(),N());break}},onCopy:async()=>{var e;return await U.copyTextToClipboard(((e=q.current)==null?void 0:e.value)||"")},disabled:R,readOnly:b,required:m,autoFocus:k,autoComplete:A?"on":"off",placeholder:f?void 0:z,"aria-label":f||W,"aria-invalid":!!s,"aria-errormessage":s?I:void 0,"aria-required":m,"aria-readonly":b,"aria-describedby":s?I:u?v:void 0,"aria-disabled":R,"data-testid":M,ref:B,className:o.csx("proton-Input",s&&"proton-Input--error",f&&"proton-Input__label-top",S)}),n.jsxRuntimeExports.jsxs("label",{htmlFor:w,className:o.csx("proton-Input__label",y&&"proton-Input__label--filled"),children:[f,m&&n.jsxRuntimeExports.jsx("span",{"aria-hidden":"true",children:" *"})]}),l&&n.jsxRuntimeExports.jsx("div",{ref:c,className:o.csx("proton-Input__descriptor","proton-Input__suffix"),children:l})]}),s?n.jsxRuntimeExports.jsx("div",{role:"alert",className:o.csx("proton-Input__error","proton-Input__text"),id:I,children:s}):u&&j==="bottom"?n.jsxRuntimeExports.jsx("div",{id:v,className:"proton-Input__text","aria-live":"polite",children:u}):null]})});g.displayName="ProtonUIInput";exports.Input=g;
 //# sourceMappingURL=Input.cjs.js.map

package/dist/components/Input/BaseInput/Input.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs.js","sources":["../../../../src/components/Input/BaseInput/Input.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { forwardRef, useEffect, useRef } from \"react\";\n\nimport { useTheme } from \"../../ThemeProvider\";\nimport { csx } from \"../../../utils\";\nimport \"./Input.css\";\nimport { copyTextToClipboard } from \"../../../utils/copy\";\n\nexport interface BaseInputProps {\n  /**\n   * onChange handler for the input\n   */\n  onChange?: (value: string) => void;\n\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n\n  /** Description text shown above the input. */\n  description?: React.ReactNode | string;\n\n  /**\n   * The position of the description text.\n   * @default \"top\"\n   */\n  descriptionPosition?: \"top\" | \"bottom\";\n\n  /** Error state that changes the input's visual style and displays an error message. */\n  error?: React.ReactNode | string;\n\n  /**\n   * Label for the input element.\n   * @note When a label is provided, the input will have extra padding, and the label will float above the text input when focused or filled.\n   */\n  label?: string;\n\n  /** Test ID for the component. */\n  \"data-testid\"?: string;\n\n  /** Content to display before the input. Typically used for icons. */\n  prefix?: React.ReactNode;\n\n  /** Content to display after the input. Typically used for icons. */\n  suffix?: React.ReactNode;\n\n  /**\n   * Should the browser's autocomplete be enabled?\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n   */\n  autoComplete?: boolean;\n\n  /**\n   * Should the input be autofocused?\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autofocus\n   */\n  autoFocus?: boolean;\n\n  /**\n   * The name attribute of the input element.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name\n   */\n  name: string;\n\n  /**\n   * The placeholder text to display when the input is empty.\n   * @note label takes precedence over placeholder, if both are provided.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder\n   */\n  placeholder?: string;\n\n  /**\n   * The type attribute of the input element.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/type\n   * @default \"text\"\n   */\n  type?: string;\n\n  /**\n   * The value of the input.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value\n   */\n  value?: string;\n\n  /**\n   * Whether the input is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /**\n   * Whether the input is read-only.\n   * @default false\n   */\n  isReadOnly?: boolean;\n\n  /**\n   * Called when the input is submitted (e.g. by pressing Enter).\n   */\n  onSubmit?: React.FormEventHandler<HTMLInputElement>;\n\n  /**\n   * Called when the input is cleared (e.g. by pressing Escape).\n   */\n  onClear?: () => void;\n}\n\n/**\n * A controlled and customizable input component with support for labels, prefixes, suffixes, and error states.\n *\n * API:\n *  - {@link BaseInputProps}\n */\nexport const Input = forwardRef<HTMLInputElement, BaseInputProps>(\n  (\n    {\n      prefix,\n      suffix,\n      description,\n      descriptionPosition = \"top\",\n      isDisabled,\n      error,\n      onChange,\n      label,\n      name,\n      placeholder,\n      type = \"text\",\n      value,\n      autoFocus,\n      autoComplete,\n      isRequired = false,\n      isReadOnly = false,\n      onSubmit,\n      onClear,\n      \"data-testid\": testId,\n    },\n    forwardedRef: React.RefObject<HTMLInputElement>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const prefixRef = useRef<HTMLDivElement>(null);\n    const suffixRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { className } = useTheme();\n    const ref = forwardedRef || inputRef;\n\n    // Control dynamic prefix and suffix widths using ResizeObserver\n    useEffect(() => {\n      if (!containerRef.current) return;\n\n      const prevSizes = {\n        containerWidth: 200,\n        prefixWidth: 32,\n        suffixWidth: 32,\n      };\n\n      let rafId: number | null = null;\n\n      const updateSizes = () => {\n        if (rafId !== null) cancelAnimationFrame(rafId);\n\n        rafId = requestAnimationFrame(() => {\n          if (!containerRef.current) return;\n\n          if (containerRef.current) {\n            const containerWidth =\n              containerRef.current.offsetWidth || prevSizes.containerWidth;\n\n            if (containerWidth !== prevSizes.containerWidth) {\n              containerRef.current.style.setProperty(\n                \"--container-width\",\n                `${containerWidth}px`\n              );\n              prevSizes.containerWidth = containerWidth;\n            }\n          }\n\n          if (prefixRef.current) {\n            const prefixWidth =\n              prefixRef.current.offsetWidth || prevSizes.prefixWidth;\n\n            if (prefixWidth !== prevSizes.prefixWidth) {\n              containerRef.current?.style.setProperty(\n                \"--prefix-width\",\n                `${prefixWidth}px`\n              );\n              prevSizes.prefixWidth = prefixWidth;\n            }\n          }\n\n          if (suffixRef.current) {\n            const suffixWidth =\n              suffixRef.current.offsetWidth || prevSizes.suffixWidth;\n\n            if (suffixWidth !== prevSizes.suffixWidth) {\n              containerRef.current?.style.setProperty(\n                \"--suffix-width\",\n                `${suffixWidth}px`\n              );\n              prevSizes.suffixWidth = suffixWidth;\n            }\n          }\n        });\n      };\n\n      updateSizes();\n\n      const resizeObserver = new ResizeObserver(updateSizes);\n\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current);\n      }\n      if (prefixRef.current) {\n        resizeObserver.observe(prefixRef.current);\n      }\n      if (suffixRef.current) {\n        resizeObserver.observe(suffixRef.current);\n      }\n\n      return () => {\n        if (rafId !== null) {\n          cancelAnimationFrame(rafId);\n        }\n        resizeObserver.disconnect();\n      };\n    }, [prefix, suffix]);\n\n    const inputId = `${name}-input`;\n    const errorId = `${name}-error`;\n    const descriptionId = `${name}-description`;\n\n    return (\n      <div ref={containerRef} className=\"proton-Input__container\">\n        {description && descriptionPosition === \"top\" && (\n          <div\n            id={descriptionId}\n            className=\"proton-Input__text\"\n            aria-live=\"polite\"\n          >\n            {description}\n          </div>\n        )}\n        <div\n          className={csx(\n            \"proton-Input__container-inner\",\n            prefix && \"proton-Input__has-prefix\",\n            suffix && \"proton-Input__has-suffix\"\n          )}\n        >\n          {prefix && (\n            <div\n              ref={prefixRef}\n              className={csx(\n                \"proton-Input__descriptor\",\n                \"proton-Input__prefix\"\n              )}\n            >\n              {prefix}\n            </div>\n          )}\n\n          <input\n            id={inputId}\n            name={name}\n            type={type}\n            value={value}\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n              onChange?.(e.target.value);\n            }}\n            onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n              switch (e.key) {\n                case \"Enter\":\n                  if (onSubmit) {\n                    e.preventDefault();\n                    onSubmit(e);\n                  }\n                  break;\n                case \"Escape\":\n                  if (onClear) {\n                    e.preventDefault();\n                    onClear();\n                  }\n                  break;\n              }\n            }}\n            onCopy={async () =>\n              await copyTextToClipboard(inputRef.current?.value)\n            }\n            disabled={isDisabled}\n            readOnly={isReadOnly}\n            required={isRequired}\n            autoFocus={autoFocus}\n            autoComplete={autoComplete ? \"on\" : \"off\"}\n            placeholder={label ? undefined : placeholder}\n            aria-label={label || name}\n            aria-invalid={Boolean(error)}\n            aria-errormessage={typeof error === \"string\" ? error : errorId}\n            aria-required={isRequired}\n            aria-readonly={isReadOnly}\n            aria-describedby={\n              error ? errorId : description ? descriptionId : undefined\n            }\n            aria-disabled={isDisabled}\n            data-testid={testId}\n            ref={ref}\n            className={csx(\n              \"proton-Input\",\n              error && \"proton-Input--error\",\n              label && \"proton-Input__label-top\",\n              className\n            )}\n          />\n\n          <label\n            htmlFor={inputId}\n            className={csx(\n              \"proton-Input__label\",\n              value && \"proton-Input__label--filled\"\n            )}\n          >\n            {label}\n            {isRequired && <span aria-hidden=\"true\"> *</span>}\n          </label>\n\n          {suffix && (\n            <div\n              ref={suffixRef}\n              className={csx(\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\"\n              )}\n            >\n              {suffix}\n            </div>\n          )}\n        </div>\n\n        {error ? (\n          <div\n            role=\"alert\"\n            className={csx(\"proton-Input__error\", \"proton-Input__text\")}\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : description && descriptionPosition === \"bottom\" ? (\n          <div\n            id={descriptionId}\n            className=\"proton-Input__text\"\n            aria-live=\"polite\"\n          >\n            {description}\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n);\n\nInput.displayName = \"ProtonUIInput\";\n"],"names":["Input","forwardRef","prefix","suffix","description","descriptionPosition","isDisabled","error","onChange","label","name","placeholder","type","value","autoFocus","autoComplete","isRequired","isReadOnly","onSubmit","onClear","testId","forwardedRef","inputRef","useRef","prefixRef","suffixRef","containerRef","className","useTheme","ref","useEffect","prevSizes","rafId","updateSizes","containerWidth","prefixWidth","_a","suffixWidth","_b","resizeObserver","inputId","errorId","descriptionId","jsxs","jsx","csx","e","copyTextToClipboard"],"mappings":"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"}
+{"version":3,"file":"Input.cjs.js","sources":["../../../../src/components/Input/BaseInput/Input.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { forwardRef, useEffect, useId, useRef, type ForwardedRef } from \"react\";\n\nimport { useMergedRef } from \"../../../hooks/useMergedRef\";\nimport { useTheme } from \"../../ThemeProvider\";\nimport { csx } from \"../../../utils\";\nimport \"./Input.css\";\nimport { copyTextToClipboard } from \"../../../utils/copy\";\n\nexport interface BaseInputProps {\n  /**\n   * onChange handler for the input\n   */\n  onChange?: (value: string) => void;\n\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n\n  /** Description text shown above the input. */\n  description?: React.ReactNode | string;\n\n  /**\n   * The position of the description text.\n   * @default \"top\"\n   */\n  descriptionPosition?: \"top\" | \"bottom\";\n\n  /** Error state that changes the input's visual style and displays an error message. */\n  error?: React.ReactNode | string;\n\n  /**\n   * Label for the input element.\n   * @note When a label is provided, the input will have extra padding, and the label will float above the text input when focused or filled.\n   */\n  label?: string;\n\n  /** Test ID for the component. */\n  \"data-testid\"?: string;\n\n  /** Content to display before the input. Typically used for icons. */\n  prefix?: React.ReactNode;\n\n  /** Content to display after the input. Typically used for icons. */\n  suffix?: React.ReactNode;\n\n  /**\n   * Should the browser's autocomplete be enabled?\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n   */\n  autoComplete?: boolean;\n\n  /**\n   * Should the input be autofocused?\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autofocus\n   */\n  autoFocus?: boolean;\n\n  /**\n   * The name attribute of the input element.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name\n   */\n  name: string;\n\n  /**\n   * The placeholder text to display when the input is empty.\n   * @note label takes precedence over placeholder, if both are provided.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder\n   */\n  placeholder?: string;\n\n  /**\n   * The type attribute of the input element.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/type\n   * @default \"text\"\n   */\n  type?: string;\n\n  /**\n   * The value of the input.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value\n   */\n  value?: string;\n\n  /**\n   * Whether the input is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /**\n   * Whether the input is read-only.\n   * @default false\n   */\n  isReadOnly?: boolean;\n\n  /**\n   * Called when the input is submitted (e.g. by pressing Enter).\n   */\n  onSubmit?: React.FormEventHandler<HTMLInputElement>;\n\n  /**\n   * Called when the input is cleared (e.g. by pressing Escape).\n   */\n  onClear?: () => void;\n}\n\n/**\n * A controlled and customizable input component with support for labels, prefixes, suffixes, and error states.\n *\n * API:\n *  - {@link BaseInputProps}\n */\nexport const Input = forwardRef<HTMLInputElement, BaseInputProps>(\n  (\n    {\n      prefix,\n      suffix,\n      description,\n      descriptionPosition = \"top\",\n      isDisabled,\n      error,\n      onChange,\n      label,\n      name,\n      placeholder,\n      type = \"text\",\n      value,\n      autoFocus,\n      autoComplete,\n      isRequired = false,\n      isReadOnly = false,\n      onSubmit,\n      onClear,\n      \"data-testid\": testId,\n    },\n    forwardedRef: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const prefixRef = useRef<HTMLDivElement>(null);\n    const suffixRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { className } = useTheme();\n    const setInputRef = useMergedRef(inputRef, forwardedRef);\n    const idBase = useId();\n\n    // Control dynamic prefix and suffix widths using ResizeObserver\n    useEffect(() => {\n      if (!containerRef.current) return;\n\n      const prevSizes = {\n        containerWidth: 200,\n        prefixWidth: 32,\n        suffixWidth: 32,\n      };\n\n      let rafId: number | null = null;\n\n      const updateSizes = () => {\n        if (rafId !== null) cancelAnimationFrame(rafId);\n\n        rafId = requestAnimationFrame(() => {\n          if (!containerRef.current) return;\n\n          if (containerRef.current) {\n            const containerWidth =\n              containerRef.current.offsetWidth || prevSizes.containerWidth;\n\n            if (containerWidth !== prevSizes.containerWidth) {\n              containerRef.current.style.setProperty(\n                \"--container-width\",\n                `${containerWidth}px`\n              );\n              prevSizes.containerWidth = containerWidth;\n            }\n          }\n\n          if (prefixRef.current) {\n            const prefixWidth =\n              prefixRef.current.offsetWidth || prevSizes.prefixWidth;\n\n            if (prefixWidth !== prevSizes.prefixWidth) {\n              containerRef.current?.style.setProperty(\n                \"--prefix-width\",\n                `${prefixWidth}px`\n              );\n              prevSizes.prefixWidth = prefixWidth;\n            }\n          }\n\n          if (suffixRef.current) {\n            const suffixWidth =\n              suffixRef.current.offsetWidth || prevSizes.suffixWidth;\n\n            if (suffixWidth !== prevSizes.suffixWidth) {\n              containerRef.current?.style.setProperty(\n                \"--suffix-width\",\n                `${suffixWidth}px`\n              );\n              prevSizes.suffixWidth = suffixWidth;\n            }\n          }\n        });\n      };\n\n      updateSizes();\n\n      const resizeObserver = new ResizeObserver(updateSizes);\n\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current);\n      }\n      if (prefixRef.current) {\n        resizeObserver.observe(prefixRef.current);\n      }\n      if (suffixRef.current) {\n        resizeObserver.observe(suffixRef.current);\n      }\n\n      return () => {\n        if (rafId !== null) {\n          cancelAnimationFrame(rafId);\n        }\n        resizeObserver.disconnect();\n      };\n    }, [prefix, suffix]);\n\n    const inputId = `${idBase}-input`;\n    const errorId = `${idBase}-error`;\n    const descriptionId = `${idBase}-description`;\n\n    return (\n      <div ref={containerRef} className=\"proton-Input__container\">\n        {description && descriptionPosition === \"top\" && (\n          <div\n            id={descriptionId}\n            className=\"proton-Input__text\"\n            aria-live=\"polite\"\n          >\n            {description}\n          </div>\n        )}\n        <div\n          className={csx(\n            \"proton-Input__container-inner\",\n            prefix && \"proton-Input__has-prefix\",\n            suffix && \"proton-Input__has-suffix\"\n          )}\n        >\n          {prefix && (\n            <div\n              ref={prefixRef}\n              className={csx(\n                \"proton-Input__descriptor\",\n                \"proton-Input__prefix\"\n              )}\n            >\n              {prefix}\n            </div>\n          )}\n\n          <input\n            id={inputId}\n            name={name}\n            type={type}\n            value={value}\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n              onChange?.(e.target.value);\n            }}\n            onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n              switch (e.key) {\n                case \"Enter\":\n                  if (onSubmit) {\n                    e.preventDefault();\n                    onSubmit(e);\n                  }\n                  break;\n                case \"Escape\":\n                  if (onClear) {\n                    e.preventDefault();\n                    onClear();\n                  }\n                  break;\n              }\n            }}\n            onCopy={async () =>\n              await copyTextToClipboard(inputRef.current?.value || \"\")\n            }\n            disabled={isDisabled}\n            readOnly={isReadOnly}\n            required={isRequired}\n            autoFocus={autoFocus}\n            autoComplete={autoComplete ? \"on\" : \"off\"}\n            placeholder={label ? undefined : placeholder}\n            aria-label={label || name}\n            aria-invalid={Boolean(error)}\n            aria-errormessage={error ? errorId : undefined}\n            aria-required={isRequired}\n            aria-readonly={isReadOnly}\n            aria-describedby={\n              error ? errorId : description ? descriptionId : undefined\n            }\n            aria-disabled={isDisabled}\n            data-testid={testId}\n            ref={setInputRef}\n            className={csx(\n              \"proton-Input\",\n              error && \"proton-Input--error\",\n              label && \"proton-Input__label-top\",\n              className\n            )}\n          />\n\n          <label\n            htmlFor={inputId}\n            className={csx(\n              \"proton-Input__label\",\n              value && \"proton-Input__label--filled\"\n            )}\n          >\n            {label}\n            {isRequired && <span aria-hidden=\"true\"> *</span>}\n          </label>\n\n          {suffix && (\n            <div\n              ref={suffixRef}\n              className={csx(\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\"\n              )}\n            >\n              {suffix}\n            </div>\n          )}\n        </div>\n\n        {error ? (\n          <div\n            role=\"alert\"\n            className={csx(\"proton-Input__error\", \"proton-Input__text\")}\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : description && descriptionPosition === \"bottom\" ? (\n          <div\n            id={descriptionId}\n            className=\"proton-Input__text\"\n            aria-live=\"polite\"\n          >\n            {description}\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n);\n\nInput.displayName = \"ProtonUIInput\";\n"],"names":["Input","forwardRef","prefix","suffix","description","descriptionPosition","isDisabled","error","onChange","label","name","placeholder","type","value","autoFocus","autoComplete","isRequired","isReadOnly","onSubmit","onClear","testId","forwardedRef","inputRef","useRef","prefixRef","suffixRef","containerRef","className","useTheme","setInputRef","useMergedRef","idBase","useId","useEffect","prevSizes","rafId","updateSizes","containerWidth","prefixWidth","_a","suffixWidth","_b","resizeObserver","inputId","errorId","descriptionId","jsxs","jsx","csx","copyTextToClipboard"],"mappings":"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"}