@protonradio/proton-ui 0.11.34 → 0.12.1

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactNode } from \"react\";\nimport { Tooltip as RadixTooltip } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils\";\nimport \"../Dialog/Dialog.css\";\nimport \"./Tooltip.css\";\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface TooltipContentProps {\n  content: string | ReactNode;\n  arrow?: boolean;\n  placement?: TooltipPlacement;\n  \"data-testid\"?: string;\n}\n\nconst TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(\n  ({ content, arrow, placement = \"top\", \"data-testid\": testId }, ref) => {\n    const { style, className } = useTheme();\n\n    return (\n      <RadixTooltip.Content\n        ref={ref}\n        side={placement}\n        className={csx(\"proton__Tooltip\", \"proton-Dialog\", className)}\n        style={style as React.CSSProperties}\n        sideOffset={8}\n        data-testid={testId}\n      >\n        {content}\n        {arrow && (\n          <RadixTooltip.Arrow\n            className={csx(\"proton__Tooltip-arrow\", className)}\n            width={8}\n            height={8}\n          >\n            <svg width={8} height={8} viewBox=\"0 0 8 8\">\n              <path d=\"M0 0 L4 4 L8 0\" />\n            </svg>\n          </RadixTooltip.Arrow>\n        )}\n      </RadixTooltip.Content>\n    );\n  }\n);\n\nTooltipContent.displayName = \"TooltipContent\";\n\nexport interface TooltipProps {\n  /**\n   * Whether to show an arrow pointing to the tooltip.\n   * @default true\n   */\n  arrow?: boolean;\n  /**\n   * The children to display in the tooltip.\n   */\n  children: React.ReactNode;\n  /**\n   * The content to display in the tooltip. Zero-length titles string are never displayed.\n   */\n  content: string | React.ReactNode;\n  /**\n   * A test ID.\n   */\n  \"data-testid\"?: string;\n  /**\n   * The placement of the tooltip.\n   * @default \"bottom\"\n   */\n  placement?: TooltipPlacement;\n  /**\n   * Whether to disable the trigger click feature.\n   * This is useful when using an info only Tooltip that might wrap a clickable element.\n   */\n  disableTriggerClick?: boolean;\n  /**\n   * Whether the tooltip is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Delay before showing the tooltip (in milliseconds).\n   * @default 100\n   */\n  delay?: number;\n  /**\n   * Whether the tooltip is open by default.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * The callback function to call when the tooltip is opened or closed.\n   */\n  onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * A component that displays a tooltip when the user hovers over the trigger.\n * For mobile, use Popover instead.\n * API:\n *  - {@link TooltipProps}\n *\n * @example\n * ```tsx\n    <Tooltipcontent={...} placement=\"top\" arrow isDisabled={disabled}>\n      {children}\n    </Tooltip>\n * ```\n */\nexport function Tooltip({\n  arrow = true,\n  children,\n  content,\n  delay = 100,\n  placement = \"top\",\n  isDisabled,\n  defaultOpen = false,\n  onOpenChange,\n  disableTriggerClick,\n  \"data-testid\": testId,\n}: TooltipProps) {\n  const [isOpen, setIsOpen] = React.useState(defaultOpen);\n  const triggerClickRef = React.useRef<boolean>(false);\n  const hasHovered = React.useRef<boolean>(false);\n\n  if (content === \"\") return null;\n\n  const handleOpenChange = (openState: boolean) => {\n    // When opened via hover, we want to disable the trigger click feature as it causes\n    // the tooltip state to get out of sync with the trigger state.\n    if (openState && !triggerClickRef.current) hasHovered.current = true;\n\n    if (onOpenChange) onOpenChange(openState);\n\n    // If the tooltip is clicked, it manually calls setIsOpen, so we don't want to call\n    // it again here.\n    if (!triggerClickRef.current) setIsOpen(openState);\n    triggerClickRef.current = false;\n  };\n\n  return (\n    <RadixTooltip.Provider>\n      <RadixTooltip.Root\n        open={isOpen}\n        defaultOpen={defaultOpen}\n        onOpenChange={handleOpenChange}\n        delayDuration={delay}\n      >\n        <RadixTooltip.Trigger asChild>\n          {disableTriggerClick ? (\n            <span aria-label=\"Show tooltip\" className=\"proton__Tooltip-trigger\">\n              {children}\n            </span>\n          ) : (\n            <div\n              role=\"button\"\n              aria-label=\"Show tooltip\"\n              data-hovered={isOpen}\n              onClick={() => {\n                if (disableTriggerClick || isDisabled) return;\n\n                // Once hovered it's safe to assume the user isn't trying to use via a touch device,\n                // so we can safely disable the trigger click feature.\n                if (hasHovered.current) return;\n\n                triggerClickRef.current = true;\n                setIsOpen(!isOpen);\n              }}\n              className=\"proton__Tooltip-trigger\"\n            >\n              {children}\n            </div>\n          )}\n        </RadixTooltip.Trigger>\n        {!isDisabled && (\n          <RadixTooltip.Portal>\n            <TooltipContent\n              content={content}\n              placement={placement}\n              arrow={arrow}\n              data-testid={testId}\n            />\n          </RadixTooltip.Portal>\n        )}\n      </RadixTooltip.Root>\n    </RadixTooltip.Provider>\n  );\n}\n\nTooltip.displayName = \"Tooltip\";\n"],"names":["TooltipContent","React","content","arrow","placement","testId","ref","style","className","useTheme","jsxs","RadixTooltip","csx","jsx","Tooltip","children","delay","isDisabled","defaultOpen","onOpenChange","disableTriggerClick","isOpen","setIsOpen","triggerClickRef","hasHovered","handleOpenChange","openState"],"mappings":";;;;;;;AAkBA,MAAMA,IAAiBC,EAAM;AAAA,EAC3B,CAAC,EAAE,SAAAC,GAAS,OAAAC,GAAO,WAAAC,IAAY,OAAO,eAAeC,EAAO,GAAGC,MAAQ;AACrE,UAAM,EAAE,OAAAC,GAAO,WAAAC,EAAU,IAAIC,EAAS;AAGpC,WAAAC,gBAAAA,EAAA;AAAA,MAACC,EAAa;AAAA,MAAb;AAAA,QACC,KAAAL;AAAA,QACA,MAAMF;AAAA,QACN,WAAWQ,EAAI,mBAAmB,iBAAiBJ,CAAS;AAAA,QAC5D,OAAAD;AAAA,QACA,YAAY;AAAA,QACZ,eAAaF;AAAA,QAEZ,UAAA;AAAA,UAAAH;AAAA,UACAC,KACCU,gBAAAA,EAAA;AAAA,YAACF,EAAa;AAAA,YAAb;AAAA,cACC,WAAWC,EAAI,yBAAyBJ,CAAS;AAAA,cACjD,OAAO;AAAA,cACP,QAAQ;AAAA,cAER,UAACK,gBAAAA,EAAA,IAAA,OAAA,EAAI,OAAO,GAAG,QAAQ,GAAG,SAAQ,WAChC,UAACA,gBAAAA,EAAAA,IAAA,QAAA,EAAK,GAAE,iBAAiB,CAAA,GAC3B;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEAb,EAAe,cAAc;AA+DtB,SAASc,EAAQ;AAAA,EACtB,OAAAX,IAAQ;AAAA,EACR,UAAAY;AAAA,EACA,SAAAb;AAAA,EACA,OAAAc,IAAQ;AAAA,EACR,WAAAZ,IAAY;AAAA,EACZ,YAAAa;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,eAAef;AACjB,GAAiB;AACf,QAAM,CAACgB,GAAQC,CAAS,IAAIrB,EAAM,SAASiB,CAAW,GAChDK,IAAkBtB,EAAM,OAAgB,EAAK,GAC7CuB,IAAavB,EAAM,OAAgB,EAAK;AAE1C,MAAAC,MAAY,GAAW,QAAA;AAErB,QAAAuB,IAAmB,CAACC,MAAuB;AAG/C,IAAIA,KAAa,CAACH,EAAgB,cAAoB,UAAU,KAE5DJ,OAA2BO,CAAS,GAInCH,EAAgB,WAASD,EAAUI,CAAS,GACjDH,EAAgB,UAAU;AAAA,EAAA;AAI1B,SAAAV,gBAAAA,EAAA,IAACF,EAAa,UAAb,EACC,UAAAD,gBAAAA,EAAA;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,MAAMU;AAAA,MACN,aAAAH;AAAA,MACA,cAAcO;AAAA,MACd,eAAeT;AAAA,MAEf,UAAA;AAAA,QAAAH,gBAAAA,EAAA,IAACF,EAAa,SAAb,EAAqB,SAAO,IAC1B,UAAAS,IACEP,gBAAAA,EAAAA,IAAA,QAAA,EAAK,cAAW,gBAAe,WAAU,2BACvC,UAAAE,EACH,CAAA,IAEAF,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,gBAAcQ;AAAA,YACd,SAAS,MAAM;AACb,cAAID,KAAuBH,KAIvBO,EAAW,YAEfD,EAAgB,UAAU,IAC1BD,EAAU,CAACD,CAAM;AAAA,YACnB;AAAA,YACA,WAAU;AAAA,YAET,UAAAN;AAAA,UAAA;AAAA,QAAA,GAGP;AAAA,QACC,CAACE,KACCJ,gBAAAA,EAAAA,IAAAF,EAAa,QAAb,EACC,UAAAE,gBAAAA,EAAA;AAAA,UAACb;AAAA,UAAA;AAAA,YACC,SAAAE;AAAA,YACA,WAAAE;AAAA,YACA,OAAAD;AAAA,YACA,eAAaE;AAAA,UAAA;AAAA,QAAA,GAEjB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ;AAEAS,EAAQ,cAAc;"}
+{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { CSSProperties, forwardRef, ReactNode, useRef, useState } from \"react\";\nimport { Tooltip as RadixTooltip } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport type { RadixAlign, RadixSide } from \"../../constants/placement\";\n\nimport { Overlay } from \"../Overlay/Overlay\";\nimport \"./Tooltip.css\";\nimport \"../Elevation/Elevation.css\";\n\ntype TooltipContentProps = Pick<\n  TooltipProps,\n  \"content\" | \"arrow\" | \"placement\" | \"align\" | \"data-testid\"\n>;\n\nconst TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(\n  (\n    {\n      content,\n      arrow,\n      placement = \"top\",\n      align = \"center\",\n      \"data-testid\": testId,\n    },\n    ref,\n  ) => {\n    const { style, className } = useTheme();\n\n    return (\n      <RadixTooltip.Content\n        ref={ref}\n        side={placement}\n        align={align}\n        className={csx(\"proton__Tooltip\", \"proton-Elevation--glass\", className)}\n        style={style as CSSProperties}\n        sideOffset={8}\n        data-testid={testId}\n      >\n        <Overlay\n          arrow={\n            arrow && (\n              <RadixTooltip.Arrow width={8} height={8}>\n                <svg width={8} height={8} viewBox=\"0 0 8 8\">\n                  <path d=\"M0 0 L4 4 L8 0\" />\n                </svg>\n              </RadixTooltip.Arrow>\n            )\n          }\n        >\n          {content}\n        </Overlay>\n      </RadixTooltip.Content>\n    );\n  },\n);\n\nTooltipContent.displayName = \"ProtonUITooltipContent\";\n\n/** Radix `Tooltip.Content` `side` */\nexport type TooltipPlacement = RadixSide;\n/** Radix `Tooltip.Content` `align` */\nexport type TooltipAlign = RadixAlign;\n\nexport interface TooltipProps {\n  /**\n   * Whether to show an arrow pointing to the tooltip.\n   * @default true\n   */\n  arrow?: boolean;\n  /**\n   * The children to display in the tooltip.\n   */\n  children: ReactNode;\n  /**\n   * The content to display in the tooltip. Zero-length titles string are never displayed.\n   */\n  content: string | ReactNode;\n  /**\n   * A test ID.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Side of the trigger to place the tooltip.\n   * @see {@link TooltipPlacement}\n   * @default \"top\"\n   */\n  placement?: TooltipPlacement;\n  /**\n   * Alignment along the side.\n   * @see {@link TooltipAlign}\n   * @default \"center\"\n   */\n  align?: TooltipAlign;\n  /**\n   * Whether to disable the trigger click feature.\n   * This is useful when using an info only Tooltip that might wrap a clickable element.\n   */\n  disableTriggerClick?: boolean;\n  /**\n   * Whether the tooltip is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Delay before showing the tooltip (in milliseconds).\n   * @default 100\n   */\n  delay?: number;\n  /**\n   * Whether the tooltip is open by default.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * The callback function to call when the tooltip is opened or closed.\n   */\n  onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * A component that displays a tooltip when the user hovers over the trigger.\n * For mobile, use Popover instead.\n * API:\n *  - {@link TooltipProps}\n *\n * @example\n * ```tsx\n    <Tooltipcontent={...} placement=\"top\" arrow isDisabled={disabled}>\n      {children}\n    </Tooltip>\n * ```\n */\nexport function Tooltip({\n  arrow = true,\n  children,\n  content,\n  delay = 100,\n  placement = \"top\",\n  align = \"center\",\n  isDisabled,\n  defaultOpen = false,\n  onOpenChange,\n  disableTriggerClick,\n  \"data-testid\": testId,\n}: TooltipProps) {\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n  const triggerClickRef = useRef<boolean>(false);\n  const hasHovered = useRef<boolean>(false);\n\n  if (content === \"\") return null;\n\n  const handleOpenChange = (openState: boolean) => {\n    // When opened via hover, we want to disable the trigger click feature as it causes\n    // the tooltip state to get out of sync with the trigger state.\n    if (openState && !triggerClickRef.current) hasHovered.current = true;\n\n    if (onOpenChange) onOpenChange(openState);\n\n    // If the tooltip is clicked, it manually calls setIsOpen, so we don't want to call\n    // it again here.\n    if (!triggerClickRef.current) setIsOpen(openState);\n    triggerClickRef.current = false;\n  };\n\n  return (\n    <RadixTooltip.Provider>\n      <RadixTooltip.Root\n        open={isOpen}\n        defaultOpen={defaultOpen}\n        onOpenChange={handleOpenChange}\n        delayDuration={delay}\n      >\n        <RadixTooltip.Trigger asChild>\n          {disableTriggerClick ? (\n            <span aria-label=\"Show tooltip\" className=\"proton__Tooltip-trigger\">\n              {children}\n            </span>\n          ) : (\n            <div\n              role=\"button\"\n              aria-label=\"Show tooltip\"\n              data-hovered={isOpen}\n              onClick={() => {\n                if (disableTriggerClick || isDisabled) return;\n\n                // Once hovered it's safe to assume the user isn't trying to use via a touch device,\n                // so we can safely disable the trigger click feature.\n                if (hasHovered.current) return;\n\n                triggerClickRef.current = true;\n                setIsOpen(!isOpen);\n              }}\n              className=\"proton__Tooltip-trigger\"\n            >\n              {children}\n            </div>\n          )}\n        </RadixTooltip.Trigger>\n        {!isDisabled && (\n          <RadixTooltip.Portal>\n            <TooltipContent\n              content={content}\n              placement={placement}\n              align={align}\n              arrow={arrow}\n              data-testid={testId}\n            />\n          </RadixTooltip.Portal>\n        )}\n      </RadixTooltip.Root>\n    </RadixTooltip.Provider>\n  );\n}\n\nTooltip.displayName = \"ProtonUITooltip\";\n"],"names":["TooltipContent","forwardRef","content","arrow","placement","align","testId","ref","style","className","useTheme","jsx","RadixTooltip","csx","Overlay","Tooltip","children","delay","isDisabled","defaultOpen","onOpenChange","disableTriggerClick","isOpen","setIsOpen","useState","triggerClickRef","useRef","hasHovered","handleOpenChange","openState","jsxs"],"mappings":"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"}

package/dist/components/Waveform/Waveform.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../../node_modules/react/jsx-runtime.cjs.js"),v=require("react"),H=require("../ThemeProvider.cjs.js");;/* empty css                  */const L=require("./WaveformBar.cjs.js"),T=require("../../utils/string.cjs.js"),X=K(100);function F({data:e,resolution:t=2,startDuration:s,endDuration:a,currentTime:m=0,showTimestamps:g=!1,totalDuration:l,disabled:f,disabledMessage:d,onClick:h,"data-testid":p}){var P;const{className:_}=H.useTheme(),o=v.useRef(null),[W,$]=v.useState([]),[j,y]=v.useState(null),[w,I]=v.useState(!1),[N,q]=v.useState(!1),E=e||X,M=t;v.useEffect(()=>{if(!o.current)return;const r=i=>{const x=Math.floor(i/(t+M)),R=G(E,x);$(R)},n=o.current.clientWidth;r(n);const c=new ResizeObserver(i=>{i&&i[0]&&r(i[0].contentRect.width)});return c.observe(o.current),()=>c.disconnect()},[E,t,M]),v.useEffect(()=>{const r=setTimeout(()=>I(!0),50),n=setTimeout(()=>q(!0),500);return()=>{clearTimeout(r),clearTimeout(n)}},[]);const A=r=>{if(!o.current)return;const n=o.current.getBoundingClientRect(),i=(r.clientX-n.left)/n.width*l;y(i)},z=()=>{y(null)},O=t+M,b=(r,n)=>{var x;const c=r/l*100;return(n==="start"?Math.floor(c/100*W.length):Math.ceil(c/100*W.length))*O/((x=o.current)==null?void 0:x.clientWidth)*100},V=(P=o.current)==null?void 0:P.clientWidth,B=v.useMemo(()=>f&&d?d:e?null:"Waveform Unavailable",[f,d,e]);return u.jsxRuntimeExports.jsxs("div",{className:T.csx("proton-Waveform",_),"data-testid":p,children:[g&&u.jsxRuntimeExports.jsx(S,{direction:"left",seconds:m}),u.jsxRuntimeExports.jsxs("div",{ref:o,className:"proton-Waveform__container",onMouseMove:A,onMouseLeave:z,onClick:r=>{if(!o.current||f)return;const n=o.current.getBoundingClientRect(),i=(r.clientX-n.left)/n.width*l;h==null||h(i,r)},"data-disabled":f,"data-testid":"waveform-container",children:[s!==void 0&&a!==void 0&&u.jsxRuntimeExports.jsx("div",{className:"proton-Waveform__active-region",style:{left:o.current?`calc(${b(s,"start")}%`:"0%",right:o.current?`calc(${100-b(a,"end")}% - 2px)`:"0%"}}),j!==null&&u.jsxRuntimeExports.jsx("div",{className:"proton-Waveform__hover-line",style:{left:`${j/l*100}%`}}),W.map((r,n)=>{const c=n/W.length*l,i=s!==void 0&&a!==void 0&&(c<s||c>a),x=m===0?!1:c<=m,R=j!==null&&c<=j;return u.jsxRuntimeExports.jsx(L.WaveformBar,{amplitude:r,isDisabled:f||i,isPlayed:x,isHovered:R,isVisible:w,hasAnimated:N,resolution:t,spacing:M,index:n},n)})]}),B&&u.jsxRuntimeExports.jsx("div",{className:"proton-Waveform__bar-unavailable",style:{fontSize:V<325?"0.85rem":"1rem"},children:B}),g&&u.jsxRuntimeExports.jsx(S,{direction:"right",seconds:l})]})}function S({direction:e,seconds:t}){return u.jsxRuntimeExports.jsx("div",{className:T.csx("proton-Waveform__timestamp",`proton-Waveform__timestamp--${e}`),children:U(t)})}function U(e){const t=Math.floor(e/60),s=Math.floor(e%60);return`${t}:${s<10?"0":""}${s.toFixed(0)}`}function G(e,t){const s=e.length,a=s/t,m=new Array(t).fill(0).map((g,l)=>{const f=l*a,d=Math.floor(f),h=Math.min(d+1,s-1),p=f-d;return e[d]*(1-p)+e[h]*p});return J(m)}function J(e){const t=Math.min(...e),s=Math.max(...e);return e.map(a=>{const m=(a-t)/(s-t);return Math.max(m*.8+.1,.1)})}function K(e){return Array.from({length:e},(t,s)=>{const m=s/(e-1)*6*2*Math.PI-Math.PI/2;return Math.sin(m)*.5+.5})}exports.Waveform=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../../node_modules/react/jsx-runtime.cjs.js"),v=require("react"),H=require("../ThemeProvider.cjs.js");;/* empty css                  */const L=require("./WaveformBar.cjs.js"),$=require("../../utils/string.cjs.js"),X=K(100);function F({data:e,resolution:t=2,startDuration:s,endDuration:a,currentTime:m=0,showTimestamps:g=!1,totalDuration:l,disabled:f,disabledMessage:d,onClick:h,"data-testid":p}){var S;const{className:_}=H.useTheme(),o=v.useRef(null),[W,B]=v.useState([]),[j,y]=v.useState(null),[q,w]=v.useState(!1),[I,N]=v.useState(!1),E=e||X,M=t;v.useEffect(()=>{if(!o.current)return;const r=i=>{const x=Math.floor(i/(t+M)),R=G(E,x);B(R)},n=o.current.clientWidth;r(n);const c=new ResizeObserver(i=>{i&&i[0]&&r(i[0].contentRect.width)});return c.observe(o.current),()=>c.disconnect()},[E,t,M]),v.useEffect(()=>{const r=setTimeout(()=>w(!0),50),n=setTimeout(()=>N(!0),500);return()=>{clearTimeout(r),clearTimeout(n)}},[]);const A=r=>{if(!o.current)return;const n=o.current.getBoundingClientRect(),i=(r.clientX-n.left)/n.width*l;y(i)},z=()=>{y(null)},O=t+M,b=(r,n)=>{var x;const c=r/l*100;return(n==="start"?Math.floor(c/100*W.length):Math.ceil(c/100*W.length))*O/((x=o.current)==null?void 0:x.clientWidth)*100},V=((S=o.current)==null?void 0:S.clientWidth)||0,P=v.useMemo(()=>f&&d?d:e?null:"Waveform Unavailable",[f,d,e]);return u.jsxRuntimeExports.jsxs("div",{className:$.csx("proton-Waveform",_),"data-testid":p,children:[g&&u.jsxRuntimeExports.jsx(T,{direction:"left",seconds:m}),u.jsxRuntimeExports.jsxs("div",{ref:o,className:"proton-Waveform__container",onMouseMove:A,onMouseLeave:z,onClick:r=>{if(!o.current||f)return;const n=o.current.getBoundingClientRect(),i=(r.clientX-n.left)/n.width*l;h==null||h(i,r)},"data-disabled":f,"data-testid":"waveform-container",children:[s!==void 0&&a!==void 0&&u.jsxRuntimeExports.jsx("div",{className:"proton-Waveform__active-region",style:{left:o.current?`calc(${b(s,"start")}%`:"0%",right:o.current?`calc(${100-b(a,"end")}% - 2px)`:"0%"}}),j!==null&&u.jsxRuntimeExports.jsx("div",{className:"proton-Waveform__hover-line",style:{left:`${j/l*100}%`}}),W.map((r,n)=>{const c=n/W.length*l,i=s!==void 0&&a!==void 0&&(c<s||c>a),x=m===0?!1:c<=m,R=j!==null&&c<=j;return u.jsxRuntimeExports.jsx(L.WaveformBar,{amplitude:r,isDisabled:f||i,isPlayed:x,isHovered:R,isVisible:q,hasAnimated:I,resolution:t,spacing:M,index:n},n)})]}),P&&u.jsxRuntimeExports.jsx("div",{className:"proton-Waveform__bar-unavailable",style:{fontSize:V<325?"0.85rem":"1rem"},children:P}),g&&u.jsxRuntimeExports.jsx(T,{direction:"right",seconds:l})]})}function T({direction:e,seconds:t}){return u.jsxRuntimeExports.jsx("div",{className:$.csx("proton-Waveform__timestamp",`proton-Waveform__timestamp--${e}`),children:U(t)})}function U(e){const t=Math.floor(e/60),s=Math.floor(e%60);return`${t}:${s<10?"0":""}${s.toFixed(0)}`}function G(e,t){const s=e.length,a=s/t,m=new Array(t).fill(0).map((g,l)=>{const f=l*a,d=Math.floor(f),h=Math.min(d+1,s-1),p=f-d;return e[d]*(1-p)+e[h]*p});return J(m)}function J(e){const t=Math.min(...e),s=Math.max(...e);return e.map(a=>{const m=(a-t)/(s-t);return Math.max(m*.8+.1,.1)})}function K(e){return Array.from({length:e},(t,s)=>{const m=s/(e-1)*6*2*Math.PI-Math.PI/2;return Math.sin(m)*.5+.5})}exports.Waveform=F;
 //# sourceMappingURL=Waveform.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Waveform.cjs.js","sources":["../../../src/components/Waveform/Waveform.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { csx } from \"../../utils\";\nimport { useTheme } from \"../ThemeProvider\";\nimport \"./Waveform.css\";\nimport { WaveformBar } from \"./WaveformBar\";\n\nexport interface WaveformProps {\n  /**\n   * Array of normalized amplitude values (0-1) representing the waveform.\n   * If not provided, uses a sample sine wave.\n   */\n  data?: number[];\n\n  /**\n   * Current playback position in seconds.\n   */\n  currentTime?: number;\n\n  /**\n   * Test ID for testing purposes.\n   */\n  \"data-testid\"?: string;\n\n  /**\n   * Whether the entire waveform is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Reason for the waveform being disabled.\n   */\n  disabledMessage?: string;\n\n  /**\n   * End time to display until in seconds.\n   */\n  endDuration?: number;\n\n  /**\n   * Click handler that receives the clicked position (0-1) and event.\n   */\n  onClick?: (position: number, e: React.MouseEvent<HTMLDivElement>) => void;\n\n  /**\n   * Width in pixels of each waveform bar.\n   */\n  resolution?: number;\n\n  /**\n   * Whether to show timestamp markers.\n   */\n  showTimestamps?: boolean;\n\n  /**\n   * Start time to display from in seconds.\n   */\n  startDuration?: number;\n\n  /**\n   * Total duration of the audio in seconds.\n   */\n  totalDuration: number;\n}\n\nconst sampleWaveform = generateSampleWaveformData(100);\n\n/**\n * A waveform visualization component that displays audio data with interactive features.\n *\n * API:\n *  - {@link WaveformProps}\n */\nexport function Waveform({\n  data: waveformData,\n  resolution = 2,\n  startDuration,\n  endDuration,\n  currentTime = 0,\n  showTimestamps = false,\n  totalDuration,\n  disabled,\n  disabledMessage,\n  onClick,\n  \"data-testid\": testId,\n}: WaveformProps) {\n  const { className } = useTheme();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [processedWaveform, setProcessedWaveform] = useState<number[]>([]);\n  const [hoverPosition, setHoverPosition] = useState<number | null>(null);\n  const [isVisible, setIsVisible] = useState(false);\n  const [hasAnimated, setHasAnimated] = useState(false);\n\n  const waveform = waveformData || sampleWaveform;\n\n  const spacing = resolution;\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    const processWaveform = (width: number) => {\n      const numBars = Math.floor(width / (resolution + spacing));\n      const processed = resampleData(waveform, numBars);\n      setProcessedWaveform(processed);\n    };\n\n    const initialWidth = containerRef.current.clientWidth;\n    processWaveform(initialWidth);\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      if (entries && entries[0]) {\n        processWaveform(entries[0].contentRect.width);\n      }\n    });\n\n    resizeObserver.observe(containerRef.current);\n\n    return () => resizeObserver.disconnect();\n  }, [waveform, resolution, spacing]);\n\n  useEffect(() => {\n    const visibilityTimer = setTimeout(() => setIsVisible(true), 50);\n    const animationTimer = setTimeout(() => setHasAnimated(true), 500);\n\n    return () => {\n      clearTimeout(visibilityTimer);\n      clearTimeout(animationTimer);\n    };\n  }, []);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const position = (x / rect.width) * totalDuration;\n    setHoverPosition(position);\n  };\n\n  const handleMouseLeave = () => {\n    setHoverPosition(null);\n  };\n\n  // Calculate the width of a single bar including spacing\n  const barTotalWidth = resolution + spacing;\n\n  // Find the nearest bar boundaries for start and end durations\n  const getBarPosition = (time: number, direction: \"start\" | \"end\") => {\n    const position = (time / totalDuration) * 100;\n    const barIndex =\n      direction === \"start\"\n        ? Math.floor((position / 100) * processedWaveform.length)\n        : Math.ceil((position / 100) * processedWaveform.length);\n\n    return (\n      ((barIndex * barTotalWidth) / containerRef.current?.clientWidth!) * 100\n    );\n  };\n\n  const containerWidth = containerRef.current?.clientWidth;\n  const waveformMessage = useMemo(() => {\n    if (disabled && disabledMessage) return disabledMessage;\n    if (!waveformData) return \"Waveform Unavailable\";\n\n    return null;\n  }, [disabled, disabledMessage, waveformData]);\n\n  return (\n    <div className={csx(\"proton-Waveform\", className)} data-testid={testId}>\n      {showTimestamps && (\n        <TimestampBlock direction=\"left\" seconds={currentTime} />\n      )}\n      <div\n        ref={containerRef}\n        className=\"proton-Waveform__container\"\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n        onClick={(e) => {\n          if (!containerRef.current || disabled) return;\n          const rect = containerRef.current.getBoundingClientRect();\n          const x = e.clientX - rect.left;\n          const position = (x / rect.width) * totalDuration;\n          onClick?.(position, e);\n        }}\n        data-disabled={disabled}\n        data-testid=\"waveform-container\"\n      >\n        {startDuration !== undefined && endDuration !== undefined && (\n          <div\n            className=\"proton-Waveform__active-region\"\n            style={{\n              left: containerRef.current\n                ? `calc(${getBarPosition(startDuration, \"start\")}%`\n                : \"0%\",\n              right: containerRef.current\n                ? `calc(${100 - getBarPosition(endDuration, \"end\")}% - 2px)`\n                : \"0%\",\n            }}\n          />\n        )}\n        {hoverPosition !== null && (\n          <div\n            className=\"proton-Waveform__hover-line\"\n            style={{\n              left: `${(hoverPosition / totalDuration) * 100}%`,\n            }}\n          />\n        )}\n        {processedWaveform.map((amplitude, index) => {\n          const position = (index / processedWaveform.length) * totalDuration;\n          const isBarOutsideActiveRegion =\n            startDuration !== undefined &&\n            endDuration !== undefined &&\n            (position < startDuration || position > endDuration);\n          const isPlayed = currentTime === 0 ? false : position <= currentTime;\n          const isHovered = hoverPosition !== null && position <= hoverPosition;\n\n          return (\n            <WaveformBar\n              key={index}\n              amplitude={amplitude}\n              isDisabled={disabled || isBarOutsideActiveRegion}\n              isPlayed={isPlayed}\n              isHovered={isHovered}\n              isVisible={isVisible}\n              hasAnimated={hasAnimated}\n              resolution={resolution}\n              spacing={spacing}\n              index={index}\n            />\n          );\n        })}\n      </div>\n\n      {waveformMessage && (\n        <div\n          className=\"proton-Waveform__bar-unavailable\"\n          style={{\n            fontSize: containerWidth < 325 ? \"0.85rem\" : \"1rem\",\n          }}\n        >\n          {waveformMessage}\n        </div>\n      )}\n\n      {showTimestamps && (\n        <TimestampBlock direction=\"right\" seconds={totalDuration} />\n      )}\n    </div>\n  );\n}\n\nfunction TimestampBlock({\n  direction,\n  seconds,\n}: {\n  direction: \"left\" | \"right\";\n  seconds: number;\n}) {\n  return (\n    <div\n      className={csx(\n        \"proton-Waveform__timestamp\",\n        `proton-Waveform__timestamp--${direction}`\n      )}\n    >\n      {formatTimestamp(seconds)}\n    </div>\n  );\n}\n\n/** Formats seconds into MM:SS timestamp string\n * @param {number} seconds - Number of seconds to format\n * @returns {string} Formatted timestamp string in MM:SS format\n */\n\nfunction formatTimestamp(seconds: number) {\n  const minutes = Math.floor(seconds / 60);\n  const remainingSeconds = Math.floor(seconds % 60);\n  return `${minutes}:${\n    remainingSeconds < 10 ? \"0\" : \"\"\n  }${remainingSeconds.toFixed(0)}`;\n}\n\n/** Takes an array of waveform data and rescales it to any length\n * @param {array} initialData - original waveform data\n * @param {number} finalArrayLength - How long do you want the returned array?\n * @param {number} height - Height of the waveform container\n */\n\nfunction resampleData(initialData: number[], finalArrayLength: number) {\n  const initialArrayLength = initialData.length;\n  // How many samples from the original data do we skip per new sample?\n  const step = initialArrayLength / finalArrayLength;\n\n  // Create new array with desired length\n  const resampledData = new Array(finalArrayLength)\n    .fill(0)\n    .map((_, newIndex) => {\n      // Calculate position in original array\n      const position = newIndex * step;\n      const leftIndex = Math.floor(position);\n      const rightIndex = Math.min(leftIndex + 1, initialArrayLength - 1);\n\n      // Calculate weights for interpolation\n      const fraction = position - leftIndex;\n\n      // Linear interpolation between adjacent samples\n      const newVal =\n        initialData[leftIndex] * (1 - fraction) +\n        initialData[rightIndex] * fraction;\n\n      return newVal;\n    });\n\n  return scaleData(resampledData);\n}\n\n/** Takes an array of waveform data and scales it based on the desired pixel height\n * @param {array} data – Array of waveform data\n * @param {number} height - Height of the waveform container\n */\nfunction scaleData(data: number[]) {\n  const min = Math.min(...data);\n  const max = Math.max(...data);\n\n  return data.map((item) => {\n    // Normalize to 0-1 range first\n    const normalized = (item - min) / (max - min);\n    // Then scale to desired height (using 0.1 as minimum to ensure visibility)\n    return Math.max(normalized * 0.8 + 0.1, 0.1);\n  });\n}\n\n/** Generates a sample sine wave waveform data array\n * @param {number} length - Length of the waveform data array\n * @returns {number[]} Array of normalized amplitude values (0-1) representing the waveform\n */\n\nfunction generateSampleWaveformData(length: number) {\n  return Array.from({ length }, (_, i) => {\n    const cycles = 6;\n    // Create 3 complete cycles (6π total) starting at -π/2 (trough)\n    const phase = (i / (length - 1)) * cycles * 2 * Math.PI - Math.PI / 2;\n    return Math.sin(phase) * 0.5 + 0.5;\n  });\n}\n"],"names":["sampleWaveform","generateSampleWaveformData","Waveform","waveformData","resolution","startDuration","endDuration","currentTime","showTimestamps","totalDuration","disabled","disabledMessage","onClick","testId","className","useTheme","containerRef","useRef","processedWaveform","setProcessedWaveform","useState","hoverPosition","setHoverPosition","isVisible","setIsVisible","hasAnimated","setHasAnimated","waveform","spacing","useEffect","processWaveform","width","numBars","processed","resampleData","initialWidth","resizeObserver","entries","visibilityTimer","animationTimer","handleMouseMove","e","rect","position","handleMouseLeave","barTotalWidth","getBarPosition","time","direction","_a","containerWidth","waveformMessage","useMemo","jsxs","csx","jsx","TimestampBlock","amplitude","index","isBarOutsideActiveRegion","isPlayed","isHovered","WaveformBar","seconds","formatTimestamp","minutes","remainingSeconds","initialData","finalArrayLength","initialArrayLength","step","resampledData","_","newIndex","leftIndex","rightIndex","fraction","scaleData","data","min","max","item","normalized","length","i","phase"],"mappings":"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"}
+{"version":3,"file":"Waveform.cjs.js","sources":["../../../src/components/Waveform/Waveform.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { csx } from \"../../utils\";\nimport { useTheme } from \"../ThemeProvider\";\nimport \"./Waveform.css\";\nimport { WaveformBar } from \"./WaveformBar\";\n\nexport interface WaveformProps {\n  /**\n   * Array of normalized amplitude values (0-1) representing the waveform.\n   * If not provided, uses a sample sine wave.\n   */\n  data?: number[];\n\n  /**\n   * Current playback position in seconds.\n   */\n  currentTime?: number;\n\n  /**\n   * Test ID for testing purposes.\n   */\n  \"data-testid\"?: string;\n\n  /**\n   * Whether the entire waveform is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Reason for the waveform being disabled.\n   */\n  disabledMessage?: string;\n\n  /**\n   * End time to display until in seconds.\n   */\n  endDuration?: number;\n\n  /**\n   * Click handler that receives the clicked position (0-1) and event.\n   */\n  onClick?: (position: number, e: React.MouseEvent<HTMLDivElement>) => void;\n\n  /**\n   * Width in pixels of each waveform bar.\n   */\n  resolution?: number;\n\n  /**\n   * Whether to show timestamp markers.\n   */\n  showTimestamps?: boolean;\n\n  /**\n   * Start time to display from in seconds.\n   */\n  startDuration?: number;\n\n  /**\n   * Total duration of the audio in seconds.\n   */\n  totalDuration: number;\n}\n\nconst sampleWaveform = generateSampleWaveformData(100);\n\n/**\n * A waveform visualization component that displays audio data with interactive features.\n *\n * API:\n *  - {@link WaveformProps}\n */\nexport function Waveform({\n  data: waveformData,\n  resolution = 2,\n  startDuration,\n  endDuration,\n  currentTime = 0,\n  showTimestamps = false,\n  totalDuration,\n  disabled,\n  disabledMessage,\n  onClick,\n  \"data-testid\": testId,\n}: WaveformProps) {\n  const { className } = useTheme();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [processedWaveform, setProcessedWaveform] = useState<number[]>([]);\n  const [hoverPosition, setHoverPosition] = useState<number | null>(null);\n  const [isVisible, setIsVisible] = useState(false);\n  const [hasAnimated, setHasAnimated] = useState(false);\n\n  const waveform = waveformData || sampleWaveform;\n\n  const spacing = resolution;\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    const processWaveform = (width: number) => {\n      const numBars = Math.floor(width / (resolution + spacing));\n      const processed = resampleData(waveform, numBars);\n      setProcessedWaveform(processed);\n    };\n\n    const initialWidth = containerRef.current.clientWidth;\n    processWaveform(initialWidth);\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      if (entries && entries[0]) {\n        processWaveform(entries[0].contentRect.width);\n      }\n    });\n\n    resizeObserver.observe(containerRef.current);\n\n    return () => resizeObserver.disconnect();\n  }, [waveform, resolution, spacing]);\n\n  useEffect(() => {\n    const visibilityTimer = setTimeout(() => setIsVisible(true), 50);\n    const animationTimer = setTimeout(() => setHasAnimated(true), 500);\n\n    return () => {\n      clearTimeout(visibilityTimer);\n      clearTimeout(animationTimer);\n    };\n  }, []);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const position = (x / rect.width) * totalDuration;\n    setHoverPosition(position);\n  };\n\n  const handleMouseLeave = () => {\n    setHoverPosition(null);\n  };\n\n  // Calculate the width of a single bar including spacing\n  const barTotalWidth = resolution + spacing;\n\n  // Find the nearest bar boundaries for start and end durations\n  const getBarPosition = (time: number, direction: \"start\" | \"end\") => {\n    const position = (time / totalDuration) * 100;\n    const barIndex =\n      direction === \"start\"\n        ? Math.floor((position / 100) * processedWaveform.length)\n        : Math.ceil((position / 100) * processedWaveform.length);\n\n    return (\n      ((barIndex * barTotalWidth) / containerRef.current?.clientWidth!) * 100\n    );\n  };\n\n  const containerWidth = containerRef.current?.clientWidth || 0;\n  const waveformMessage = useMemo(() => {\n    if (disabled && disabledMessage) return disabledMessage;\n    if (!waveformData) return \"Waveform Unavailable\";\n\n    return null;\n  }, [disabled, disabledMessage, waveformData]);\n\n  return (\n    <div className={csx(\"proton-Waveform\", className)} data-testid={testId}>\n      {showTimestamps && (\n        <TimestampBlock direction=\"left\" seconds={currentTime} />\n      )}\n      <div\n        ref={containerRef}\n        className=\"proton-Waveform__container\"\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n        onClick={(e) => {\n          if (!containerRef.current || disabled) return;\n          const rect = containerRef.current.getBoundingClientRect();\n          const x = e.clientX - rect.left;\n          const position = (x / rect.width) * totalDuration;\n          onClick?.(position, e);\n        }}\n        data-disabled={disabled}\n        data-testid=\"waveform-container\"\n      >\n        {startDuration !== undefined && endDuration !== undefined && (\n          <div\n            className=\"proton-Waveform__active-region\"\n            style={{\n              left: containerRef.current\n                ? `calc(${getBarPosition(startDuration, \"start\")}%`\n                : \"0%\",\n              right: containerRef.current\n                ? `calc(${100 - getBarPosition(endDuration, \"end\")}% - 2px)`\n                : \"0%\",\n            }}\n          />\n        )}\n        {hoverPosition !== null && (\n          <div\n            className=\"proton-Waveform__hover-line\"\n            style={{\n              left: `${(hoverPosition / totalDuration) * 100}%`,\n            }}\n          />\n        )}\n        {processedWaveform.map((amplitude, index) => {\n          const position = (index / processedWaveform.length) * totalDuration;\n          const isBarOutsideActiveRegion =\n            startDuration !== undefined &&\n            endDuration !== undefined &&\n            (position < startDuration || position > endDuration);\n          const isPlayed = currentTime === 0 ? false : position <= currentTime;\n          const isHovered = hoverPosition !== null && position <= hoverPosition;\n\n          return (\n            <WaveformBar\n              key={index}\n              amplitude={amplitude}\n              isDisabled={disabled || isBarOutsideActiveRegion}\n              isPlayed={isPlayed}\n              isHovered={isHovered}\n              isVisible={isVisible}\n              hasAnimated={hasAnimated}\n              resolution={resolution}\n              spacing={spacing}\n              index={index}\n            />\n          );\n        })}\n      </div>\n\n      {waveformMessage && (\n        <div\n          className=\"proton-Waveform__bar-unavailable\"\n          style={{\n            fontSize: containerWidth < 325 ? \"0.85rem\" : \"1rem\",\n          }}\n        >\n          {waveformMessage}\n        </div>\n      )}\n\n      {showTimestamps && (\n        <TimestampBlock direction=\"right\" seconds={totalDuration} />\n      )}\n    </div>\n  );\n}\n\nfunction TimestampBlock({\n  direction,\n  seconds,\n}: {\n  direction: \"left\" | \"right\";\n  seconds: number;\n}) {\n  return (\n    <div\n      className={csx(\n        \"proton-Waveform__timestamp\",\n        `proton-Waveform__timestamp--${direction}`,\n      )}\n    >\n      {formatTimestamp(seconds)}\n    </div>\n  );\n}\n\n/** Formats seconds into MM:SS timestamp string\n * @param {number} seconds - Number of seconds to format\n * @returns {string} Formatted timestamp string in MM:SS format\n */\n\nfunction formatTimestamp(seconds: number) {\n  const minutes = Math.floor(seconds / 60);\n  const remainingSeconds = Math.floor(seconds % 60);\n  return `${minutes}:${\n    remainingSeconds < 10 ? \"0\" : \"\"\n  }${remainingSeconds.toFixed(0)}`;\n}\n\n/** Takes an array of waveform data and rescales it to any length\n * @param {array} initialData - original waveform data\n * @param {number} finalArrayLength - How long do you want the returned array?\n * @param {number} height - Height of the waveform container\n */\n\nfunction resampleData(initialData: number[], finalArrayLength: number) {\n  const initialArrayLength = initialData.length;\n  // How many samples from the original data do we skip per new sample?\n  const step = initialArrayLength / finalArrayLength;\n\n  // Create new array with desired length\n  const resampledData = new Array(finalArrayLength)\n    .fill(0)\n    .map((_, newIndex) => {\n      // Calculate position in original array\n      const position = newIndex * step;\n      const leftIndex = Math.floor(position);\n      const rightIndex = Math.min(leftIndex + 1, initialArrayLength - 1);\n\n      // Calculate weights for interpolation\n      const fraction = position - leftIndex;\n\n      // Linear interpolation between adjacent samples\n      const newVal =\n        initialData[leftIndex] * (1 - fraction) +\n        initialData[rightIndex] * fraction;\n\n      return newVal;\n    });\n\n  return scaleData(resampledData);\n}\n\n/** Takes an array of waveform data and scales it based on the desired pixel height\n * @param {array} data – Array of waveform data\n * @param {number} height - Height of the waveform container\n */\nfunction scaleData(data: number[]) {\n  const min = Math.min(...data);\n  const max = Math.max(...data);\n\n  return data.map((item) => {\n    // Normalize to 0-1 range first\n    const normalized = (item - min) / (max - min);\n    // Then scale to desired height (using 0.1 as minimum to ensure visibility)\n    return Math.max(normalized * 0.8 + 0.1, 0.1);\n  });\n}\n\n/** Generates a sample sine wave waveform data array\n * @param {number} length - Length of the waveform data array\n * @returns {number[]} Array of normalized amplitude values (0-1) representing the waveform\n */\n\nfunction generateSampleWaveformData(length: number) {\n  return Array.from({ length }, (_, i) => {\n    const cycles = 6;\n    // Create 3 complete cycles (6π total) starting at -π/2 (trough)\n    const phase = (i / (length - 1)) * cycles * 2 * Math.PI - Math.PI / 2;\n    return Math.sin(phase) * 0.5 + 0.5;\n  });\n}\n"],"names":["sampleWaveform","generateSampleWaveformData","Waveform","waveformData","resolution","startDuration","endDuration","currentTime","showTimestamps","totalDuration","disabled","disabledMessage","onClick","testId","className","useTheme","containerRef","useRef","processedWaveform","setProcessedWaveform","useState","hoverPosition","setHoverPosition","isVisible","setIsVisible","hasAnimated","setHasAnimated","waveform","spacing","useEffect","processWaveform","width","numBars","processed","resampleData","initialWidth","resizeObserver","entries","visibilityTimer","animationTimer","handleMouseMove","e","rect","position","handleMouseLeave","barTotalWidth","getBarPosition","time","direction","_a","containerWidth","waveformMessage","useMemo","jsxs","csx","jsx","TimestampBlock","amplitude","index","isBarOutsideActiveRegion","isPlayed","isHovered","WaveformBar","seconds","formatTimestamp","minutes","remainingSeconds","initialData","finalArrayLength","initialArrayLength","step","resampledData","_","newIndex","leftIndex","rightIndex","fraction","scaleData","data","min","max","item","normalized","length","i","phase"],"mappings":"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"}

package/dist/components/Waveform/Waveform.es.js

@@ -47,7 +47,7 @@ function ne({
     var d;
     const c = s / f * 100;
     return (n === "start" ? Math.floor(c / 100 * x.length) : Math.ceil(c / 100 * x.length)) * E / ((d = r.current) == null ? void 0 : d.clientWidth) * 100;
-  }, L = (I = r.current) == null ? void 0 : I.clientWidth, B = F(() => u && v ? v : e ? null : "Waveform Unavailable", [u, v, e]);
+  }, L = ((I = r.current) == null ? void 0 : I.clientWidth) || 0, B = F(() => u && v ? v : e ? null : "Waveform Unavailable", [u, v, e]);
   return /* @__PURE__ */ l.jsxs("div", { className: T("proton-Waveform", y), "data-testid": p, children: [
     _ && /* @__PURE__ */ l.jsx(P, { direction: "left", seconds: m }),
     /* @__PURE__ */ l.jsxs(

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

@@ -1 +1 @@
-{"version":3,"file":"Waveform.es.js","sources":["../../../src/components/Waveform/Waveform.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { csx } from \"../../utils\";\nimport { useTheme } from \"../ThemeProvider\";\nimport \"./Waveform.css\";\nimport { WaveformBar } from \"./WaveformBar\";\n\nexport interface WaveformProps {\n  /**\n   * Array of normalized amplitude values (0-1) representing the waveform.\n   * If not provided, uses a sample sine wave.\n   */\n  data?: number[];\n\n  /**\n   * Current playback position in seconds.\n   */\n  currentTime?: number;\n\n  /**\n   * Test ID for testing purposes.\n   */\n  \"data-testid\"?: string;\n\n  /**\n   * Whether the entire waveform is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Reason for the waveform being disabled.\n   */\n  disabledMessage?: string;\n\n  /**\n   * End time to display until in seconds.\n   */\n  endDuration?: number;\n\n  /**\n   * Click handler that receives the clicked position (0-1) and event.\n   */\n  onClick?: (position: number, e: React.MouseEvent<HTMLDivElement>) => void;\n\n  /**\n   * Width in pixels of each waveform bar.\n   */\n  resolution?: number;\n\n  /**\n   * Whether to show timestamp markers.\n   */\n  showTimestamps?: boolean;\n\n  /**\n   * Start time to display from in seconds.\n   */\n  startDuration?: number;\n\n  /**\n   * Total duration of the audio in seconds.\n   */\n  totalDuration: number;\n}\n\nconst sampleWaveform = generateSampleWaveformData(100);\n\n/**\n * A waveform visualization component that displays audio data with interactive features.\n *\n * API:\n *  - {@link WaveformProps}\n */\nexport function Waveform({\n  data: waveformData,\n  resolution = 2,\n  startDuration,\n  endDuration,\n  currentTime = 0,\n  showTimestamps = false,\n  totalDuration,\n  disabled,\n  disabledMessage,\n  onClick,\n  \"data-testid\": testId,\n}: WaveformProps) {\n  const { className } = useTheme();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [processedWaveform, setProcessedWaveform] = useState<number[]>([]);\n  const [hoverPosition, setHoverPosition] = useState<number | null>(null);\n  const [isVisible, setIsVisible] = useState(false);\n  const [hasAnimated, setHasAnimated] = useState(false);\n\n  const waveform = waveformData || sampleWaveform;\n\n  const spacing = resolution;\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    const processWaveform = (width: number) => {\n      const numBars = Math.floor(width / (resolution + spacing));\n      const processed = resampleData(waveform, numBars);\n      setProcessedWaveform(processed);\n    };\n\n    const initialWidth = containerRef.current.clientWidth;\n    processWaveform(initialWidth);\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      if (entries && entries[0]) {\n        processWaveform(entries[0].contentRect.width);\n      }\n    });\n\n    resizeObserver.observe(containerRef.current);\n\n    return () => resizeObserver.disconnect();\n  }, [waveform, resolution, spacing]);\n\n  useEffect(() => {\n    const visibilityTimer = setTimeout(() => setIsVisible(true), 50);\n    const animationTimer = setTimeout(() => setHasAnimated(true), 500);\n\n    return () => {\n      clearTimeout(visibilityTimer);\n      clearTimeout(animationTimer);\n    };\n  }, []);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const position = (x / rect.width) * totalDuration;\n    setHoverPosition(position);\n  };\n\n  const handleMouseLeave = () => {\n    setHoverPosition(null);\n  };\n\n  // Calculate the width of a single bar including spacing\n  const barTotalWidth = resolution + spacing;\n\n  // Find the nearest bar boundaries for start and end durations\n  const getBarPosition = (time: number, direction: \"start\" | \"end\") => {\n    const position = (time / totalDuration) * 100;\n    const barIndex =\n      direction === \"start\"\n        ? Math.floor((position / 100) * processedWaveform.length)\n        : Math.ceil((position / 100) * processedWaveform.length);\n\n    return (\n      ((barIndex * barTotalWidth) / containerRef.current?.clientWidth!) * 100\n    );\n  };\n\n  const containerWidth = containerRef.current?.clientWidth;\n  const waveformMessage = useMemo(() => {\n    if (disabled && disabledMessage) return disabledMessage;\n    if (!waveformData) return \"Waveform Unavailable\";\n\n    return null;\n  }, [disabled, disabledMessage, waveformData]);\n\n  return (\n    <div className={csx(\"proton-Waveform\", className)} data-testid={testId}>\n      {showTimestamps && (\n        <TimestampBlock direction=\"left\" seconds={currentTime} />\n      )}\n      <div\n        ref={containerRef}\n        className=\"proton-Waveform__container\"\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n        onClick={(e) => {\n          if (!containerRef.current || disabled) return;\n          const rect = containerRef.current.getBoundingClientRect();\n          const x = e.clientX - rect.left;\n          const position = (x / rect.width) * totalDuration;\n          onClick?.(position, e);\n        }}\n        data-disabled={disabled}\n        data-testid=\"waveform-container\"\n      >\n        {startDuration !== undefined && endDuration !== undefined && (\n          <div\n            className=\"proton-Waveform__active-region\"\n            style={{\n              left: containerRef.current\n                ? `calc(${getBarPosition(startDuration, \"start\")}%`\n                : \"0%\",\n              right: containerRef.current\n                ? `calc(${100 - getBarPosition(endDuration, \"end\")}% - 2px)`\n                : \"0%\",\n            }}\n          />\n        )}\n        {hoverPosition !== null && (\n          <div\n            className=\"proton-Waveform__hover-line\"\n            style={{\n              left: `${(hoverPosition / totalDuration) * 100}%`,\n            }}\n          />\n        )}\n        {processedWaveform.map((amplitude, index) => {\n          const position = (index / processedWaveform.length) * totalDuration;\n          const isBarOutsideActiveRegion =\n            startDuration !== undefined &&\n            endDuration !== undefined &&\n            (position < startDuration || position > endDuration);\n          const isPlayed = currentTime === 0 ? false : position <= currentTime;\n          const isHovered = hoverPosition !== null && position <= hoverPosition;\n\n          return (\n            <WaveformBar\n              key={index}\n              amplitude={amplitude}\n              isDisabled={disabled || isBarOutsideActiveRegion}\n              isPlayed={isPlayed}\n              isHovered={isHovered}\n              isVisible={isVisible}\n              hasAnimated={hasAnimated}\n              resolution={resolution}\n              spacing={spacing}\n              index={index}\n            />\n          );\n        })}\n      </div>\n\n      {waveformMessage && (\n        <div\n          className=\"proton-Waveform__bar-unavailable\"\n          style={{\n            fontSize: containerWidth < 325 ? \"0.85rem\" : \"1rem\",\n          }}\n        >\n          {waveformMessage}\n        </div>\n      )}\n\n      {showTimestamps && (\n        <TimestampBlock direction=\"right\" seconds={totalDuration} />\n      )}\n    </div>\n  );\n}\n\nfunction TimestampBlock({\n  direction,\n  seconds,\n}: {\n  direction: \"left\" | \"right\";\n  seconds: number;\n}) {\n  return (\n    <div\n      className={csx(\n        \"proton-Waveform__timestamp\",\n        `proton-Waveform__timestamp--${direction}`\n      )}\n    >\n      {formatTimestamp(seconds)}\n    </div>\n  );\n}\n\n/** Formats seconds into MM:SS timestamp string\n * @param {number} seconds - Number of seconds to format\n * @returns {string} Formatted timestamp string in MM:SS format\n */\n\nfunction formatTimestamp(seconds: number) {\n  const minutes = Math.floor(seconds / 60);\n  const remainingSeconds = Math.floor(seconds % 60);\n  return `${minutes}:${\n    remainingSeconds < 10 ? \"0\" : \"\"\n  }${remainingSeconds.toFixed(0)}`;\n}\n\n/** Takes an array of waveform data and rescales it to any length\n * @param {array} initialData - original waveform data\n * @param {number} finalArrayLength - How long do you want the returned array?\n * @param {number} height - Height of the waveform container\n */\n\nfunction resampleData(initialData: number[], finalArrayLength: number) {\n  const initialArrayLength = initialData.length;\n  // How many samples from the original data do we skip per new sample?\n  const step = initialArrayLength / finalArrayLength;\n\n  // Create new array with desired length\n  const resampledData = new Array(finalArrayLength)\n    .fill(0)\n    .map((_, newIndex) => {\n      // Calculate position in original array\n      const position = newIndex * step;\n      const leftIndex = Math.floor(position);\n      const rightIndex = Math.min(leftIndex + 1, initialArrayLength - 1);\n\n      // Calculate weights for interpolation\n      const fraction = position - leftIndex;\n\n      // Linear interpolation between adjacent samples\n      const newVal =\n        initialData[leftIndex] * (1 - fraction) +\n        initialData[rightIndex] * fraction;\n\n      return newVal;\n    });\n\n  return scaleData(resampledData);\n}\n\n/** Takes an array of waveform data and scales it based on the desired pixel height\n * @param {array} data – Array of waveform data\n * @param {number} height - Height of the waveform container\n */\nfunction scaleData(data: number[]) {\n  const min = Math.min(...data);\n  const max = Math.max(...data);\n\n  return data.map((item) => {\n    // Normalize to 0-1 range first\n    const normalized = (item - min) / (max - min);\n    // Then scale to desired height (using 0.1 as minimum to ensure visibility)\n    return Math.max(normalized * 0.8 + 0.1, 0.1);\n  });\n}\n\n/** Generates a sample sine wave waveform data array\n * @param {number} length - Length of the waveform data array\n * @returns {number[]} Array of normalized amplitude values (0-1) representing the waveform\n */\n\nfunction generateSampleWaveformData(length: number) {\n  return Array.from({ length }, (_, i) => {\n    const cycles = 6;\n    // Create 3 complete cycles (6π total) starting at -π/2 (trough)\n    const phase = (i / (length - 1)) * cycles * 2 * Math.PI - Math.PI / 2;\n    return Math.sin(phase) * 0.5 + 0.5;\n  });\n}\n"],"names":["sampleWaveform","generateSampleWaveformData","Waveform","waveformData","resolution","startDuration","endDuration","currentTime","showTimestamps","totalDuration","disabled","disabledMessage","onClick","testId","className","useTheme","containerRef","useRef","processedWaveform","setProcessedWaveform","useState","hoverPosition","setHoverPosition","isVisible","setIsVisible","hasAnimated","setHasAnimated","waveform","spacing","useEffect","processWaveform","width","numBars","processed","resampleData","initialWidth","resizeObserver","entries","visibilityTimer","animationTimer","handleMouseMove","e","rect","position","handleMouseLeave","barTotalWidth","getBarPosition","time","direction","_a","containerWidth","waveformMessage","useMemo","jsxs","csx","jsx","TimestampBlock","amplitude","index","isBarOutsideActiveRegion","isPlayed","isHovered","WaveformBar","seconds","formatTimestamp","minutes","remainingSeconds","initialData","finalArrayLength","initialArrayLength","step","resampledData","newIndex","leftIndex","rightIndex","fraction","scaleData","data","min","max","item","normalized","length","_","i","phase"],"mappings":";;;;;;AAkEA,MAAMA,IAAiBC,EAA2B,GAAG;AAQ9C,SAASC,GAAS;AAAA,EACvB,MAAMC;AAAA,EACN,YAAAC,IAAa;AAAA,EACb,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,gBAAAC,IAAiB;AAAA,EACjB,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAeC;AACjB,GAAkB;;AACV,QAAA,EAAE,WAAAC,MAAcC,KAChBC,IAAeC,EAAuB,IAAI,GAC1C,CAACC,GAAmBC,CAAoB,IAAIC,EAAmB,CAAE,CAAA,GACjE,CAACC,GAAeC,CAAgB,IAAIF,EAAwB,IAAI,GAChE,CAACG,GAAWC,CAAY,IAAIJ,EAAS,EAAK,GAC1C,CAACK,GAAaC,CAAc,IAAIN,EAAS,EAAK,GAE9CO,IAAWxB,KAAgBH,GAE3B4B,IAAUxB;AAEhB,EAAAyB,EAAU,MAAM;AACV,QAAA,CAACb,EAAa,QAAS;AAErB,UAAAc,IAAkB,CAACC,MAAkB;AACzC,YAAMC,IAAU,KAAK,MAAMD,KAAS3B,IAAawB,EAAQ,GACnDK,IAAYC,EAAaP,GAAUK,CAAO;AAChD,MAAAb,EAAqBc,CAAS;AAAA,IAAA,GAG1BE,IAAenB,EAAa,QAAQ;AAC1C,IAAAc,EAAgBK,CAAY;AAE5B,UAAMC,IAAiB,IAAI,eAAe,CAACC,MAAY;AACjD,MAAAA,KAAWA,EAAQ,CAAC,KACtBP,EAAgBO,EAAQ,CAAC,EAAE,YAAY,KAAK;AAAA,IAC9C,CACD;AAEc,WAAAD,EAAA,QAAQpB,EAAa,OAAO,GAEpC,MAAMoB,EAAe;EAC3B,GAAA,CAACT,GAAUvB,GAAYwB,CAAO,CAAC,GAElCC,EAAU,MAAM;AACd,UAAMS,IAAkB,WAAW,MAAMd,EAAa,EAAI,GAAG,EAAE,GACzDe,IAAiB,WAAW,MAAMb,EAAe,EAAI,GAAG,GAAG;AAEjE,WAAO,MAAM;AACX,mBAAaY,CAAe,GAC5B,aAAaC,CAAc;AAAA,IAAA;AAAA,EAE/B,GAAG,CAAE,CAAA;AAEC,QAAAC,IAAkB,CAACC,MAAwC;AAC3D,QAAA,CAACzB,EAAa,QAAS;AACrB,UAAA0B,IAAO1B,EAAa,QAAQ,sBAAsB,GAElD2B,KADIF,EAAE,UAAUC,EAAK,QACLA,EAAK,QAASjC;AACpC,IAAAa,EAAiBqB,CAAQ;AAAA,EAAA,GAGrBC,IAAmB,MAAM;AAC7B,IAAAtB,EAAiB,IAAI;AAAA,EAAA,GAIjBuB,IAAgBzC,IAAawB,GAG7BkB,IAAiB,CAACC,GAAcC,MAA+B;;AAC7D,UAAAL,IAAYI,IAAOtC,IAAiB;AAM1C,YAJEuC,MAAc,UACV,KAAK,MAAOL,IAAW,MAAOzB,EAAkB,MAAM,IACtD,KAAK,KAAMyB,IAAW,MAAOzB,EAAkB,MAAM,KAG5C2B,MAAiBI,IAAAjC,EAAa,YAAb,gBAAAiC,EAAsB,eAAgB;AAAA,EAAA,GAIlEC,KAAiBD,IAAAjC,EAAa,YAAb,gBAAAiC,EAAsB,aACvCE,IAAkBC,EAAQ,MAC1B1C,KAAYC,IAAwBA,IACnCR,IAEE,OAFmB,wBAGzB,CAACO,GAAUC,GAAiBR,CAAY,CAAC;AAG1C,SAAAkD,gBAAAA,OAAC,SAAI,WAAWC,EAAI,mBAAmBxC,CAAS,GAAG,eAAaD,GAC7D,UAAA;AAAA,IAAAL,KACE+C,gBAAAA,EAAA,IAAAC,GAAA,EAAe,WAAU,QAAO,SAASjD,GAAa;AAAA,IAEzD8C,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKrC;AAAA,QACL,WAAU;AAAA,QACV,aAAawB;AAAA,QACb,cAAcI;AAAA,QACd,SAAS,CAACH,MAAM;AACV,cAAA,CAACzB,EAAa,WAAWN,EAAU;AACjC,gBAAAgC,IAAO1B,EAAa,QAAQ,sBAAsB,GAElD2B,KADIF,EAAE,UAAUC,EAAK,QACLA,EAAK,QAASjC;AACpC,UAAAG,KAAA,QAAAA,EAAU+B,GAAUF;AAAA,QACtB;AAAA,QACA,iBAAe/B;AAAA,QACf,eAAY;AAAA,QAEX,UAAA;AAAA,UAAkBL,MAAA,UAAaC,MAAgB,UAC9CiD,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,MAAMvC,EAAa,UACf,QAAQ8B,EAAezC,GAAe,OAAO,CAAC,MAC9C;AAAA,gBACJ,OAAOW,EAAa,UAChB,QAAQ,MAAM8B,EAAexC,GAAa,KAAK,CAAC,aAChD;AAAA,cACN;AAAA,YAAA;AAAA,UACF;AAAA,UAEDe,MAAkB,QACjBkC,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,MAAM,GAAIlC,IAAgBZ,IAAiB,GAAG;AAAA,cAChD;AAAA,YAAA;AAAA,UACF;AAAA,UAEDS,EAAkB,IAAI,CAACuC,GAAWC,MAAU;AACrC,kBAAAf,IAAYe,IAAQxC,EAAkB,SAAUT,GAChDkD,IACJtD,MAAkB,UAClBC,MAAgB,WACfqC,IAAWtC,KAAiBsC,IAAWrC,IACpCsD,IAAWrD,MAAgB,IAAI,KAAQoC,KAAYpC,GACnDsD,IAAYxC,MAAkB,QAAQsB,KAAYtB;AAGtD,mBAAAkC,gBAAAA,EAAA;AAAA,cAACO;AAAA,cAAA;AAAA,gBAEC,WAAAL;AAAA,gBACA,YAAY/C,KAAYiD;AAAA,gBACxB,UAAAC;AAAA,gBACA,WAAAC;AAAA,gBACA,WAAAtC;AAAA,gBACA,aAAAE;AAAA,gBACA,YAAArB;AAAA,gBACA,SAAAwB;AAAA,gBACA,OAAA8B;AAAA,cAAA;AAAA,cATKA;AAAA,YAAA;AAAA,UAUP,CAEH;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,IAECP,KACCI,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,UAAUL,IAAiB,MAAM,YAAY;AAAA,QAC/C;AAAA,QAEC,UAAAC;AAAA,MAAA;AAAA,IACH;AAAA,IAGD3C,KACE+C,gBAAAA,EAAA,IAAAC,GAAA,EAAe,WAAU,SAAQ,SAAS/C,GAAe;AAAA,EAE9D,EAAA,CAAA;AAEJ;AAEA,SAAS+C,EAAe;AAAA,EACtB,WAAAR;AAAA,EACA,SAAAe;AACF,GAGG;AAEC,SAAAR,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD;AAAA,QACT;AAAA,QACA,+BAA+BN,CAAS;AAAA,MAC1C;AAAA,MAEC,YAAgBe,CAAO;AAAA,IAAA;AAAA,EAAA;AAG9B;AAOA,SAASC,EAAgBD,GAAiB;AACxC,QAAME,IAAU,KAAK,MAAMF,IAAU,EAAE,GACjCG,IAAmB,KAAK,MAAMH,IAAU,EAAE;AACzC,SAAA,GAAGE,CAAO,IACfC,IAAmB,KAAK,MAAM,EAChC,GAAGA,EAAiB,QAAQ,CAAC,CAAC;AAChC;AAQA,SAAShC,EAAaiC,GAAuBC,GAA0B;AACrE,QAAMC,IAAqBF,EAAY,QAEjCG,IAAOD,IAAqBD,GAG5BG,IAAgB,IAAI,MAAMH,CAAgB,EAC7C,KAAK,CAAC,EACN,IAAI,CAAC,GAAGI,MAAa;AAEpB,UAAM7B,IAAW6B,IAAWF,GACtBG,IAAY,KAAK,MAAM9B,CAAQ,GAC/B+B,IAAa,KAAK,IAAID,IAAY,GAAGJ,IAAqB,CAAC,GAG3DM,IAAWhC,IAAW8B;AAOrB,WAHLN,EAAYM,CAAS,KAAK,IAAIE,KAC9BR,EAAYO,CAAU,IAAIC;AAAA,EAErB,CACR;AAEH,SAAOC,EAAUL,CAAa;AAChC;AAMA,SAASK,EAAUC,GAAgB;AACjC,QAAMC,IAAM,KAAK,IAAI,GAAGD,CAAI,GACtBE,IAAM,KAAK,IAAI,GAAGF,CAAI;AAErB,SAAAA,EAAK,IAAI,CAACG,MAAS;AAElB,UAAAC,KAAcD,IAAOF,MAAQC,IAAMD;AAEzC,WAAO,KAAK,IAAIG,IAAa,MAAM,KAAK,GAAG;AAAA,EAAA,CAC5C;AACH;AAOA,SAAShF,EAA2BiF,GAAgB;AAClD,SAAO,MAAM,KAAK,EAAE,QAAAA,KAAU,CAACC,GAAGC,MAAM;AAGhC,UAAAC,IAASD,KAAKF,IAAS,KAAM,IAAS,IAAI,KAAK,KAAK,KAAK,KAAK;AACpE,WAAO,KAAK,IAAIG,CAAK,IAAI,MAAM;AAAA,EAAA,CAChC;AACH;"}
+{"version":3,"file":"Waveform.es.js","sources":["../../../src/components/Waveform/Waveform.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { csx } from \"../../utils\";\nimport { useTheme } from \"../ThemeProvider\";\nimport \"./Waveform.css\";\nimport { WaveformBar } from \"./WaveformBar\";\n\nexport interface WaveformProps {\n  /**\n   * Array of normalized amplitude values (0-1) representing the waveform.\n   * If not provided, uses a sample sine wave.\n   */\n  data?: number[];\n\n  /**\n   * Current playback position in seconds.\n   */\n  currentTime?: number;\n\n  /**\n   * Test ID for testing purposes.\n   */\n  \"data-testid\"?: string;\n\n  /**\n   * Whether the entire waveform is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Reason for the waveform being disabled.\n   */\n  disabledMessage?: string;\n\n  /**\n   * End time to display until in seconds.\n   */\n  endDuration?: number;\n\n  /**\n   * Click handler that receives the clicked position (0-1) and event.\n   */\n  onClick?: (position: number, e: React.MouseEvent<HTMLDivElement>) => void;\n\n  /**\n   * Width in pixels of each waveform bar.\n   */\n  resolution?: number;\n\n  /**\n   * Whether to show timestamp markers.\n   */\n  showTimestamps?: boolean;\n\n  /**\n   * Start time to display from in seconds.\n   */\n  startDuration?: number;\n\n  /**\n   * Total duration of the audio in seconds.\n   */\n  totalDuration: number;\n}\n\nconst sampleWaveform = generateSampleWaveformData(100);\n\n/**\n * A waveform visualization component that displays audio data with interactive features.\n *\n * API:\n *  - {@link WaveformProps}\n */\nexport function Waveform({\n  data: waveformData,\n  resolution = 2,\n  startDuration,\n  endDuration,\n  currentTime = 0,\n  showTimestamps = false,\n  totalDuration,\n  disabled,\n  disabledMessage,\n  onClick,\n  \"data-testid\": testId,\n}: WaveformProps) {\n  const { className } = useTheme();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [processedWaveform, setProcessedWaveform] = useState<number[]>([]);\n  const [hoverPosition, setHoverPosition] = useState<number | null>(null);\n  const [isVisible, setIsVisible] = useState(false);\n  const [hasAnimated, setHasAnimated] = useState(false);\n\n  const waveform = waveformData || sampleWaveform;\n\n  const spacing = resolution;\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    const processWaveform = (width: number) => {\n      const numBars = Math.floor(width / (resolution + spacing));\n      const processed = resampleData(waveform, numBars);\n      setProcessedWaveform(processed);\n    };\n\n    const initialWidth = containerRef.current.clientWidth;\n    processWaveform(initialWidth);\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      if (entries && entries[0]) {\n        processWaveform(entries[0].contentRect.width);\n      }\n    });\n\n    resizeObserver.observe(containerRef.current);\n\n    return () => resizeObserver.disconnect();\n  }, [waveform, resolution, spacing]);\n\n  useEffect(() => {\n    const visibilityTimer = setTimeout(() => setIsVisible(true), 50);\n    const animationTimer = setTimeout(() => setHasAnimated(true), 500);\n\n    return () => {\n      clearTimeout(visibilityTimer);\n      clearTimeout(animationTimer);\n    };\n  }, []);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const position = (x / rect.width) * totalDuration;\n    setHoverPosition(position);\n  };\n\n  const handleMouseLeave = () => {\n    setHoverPosition(null);\n  };\n\n  // Calculate the width of a single bar including spacing\n  const barTotalWidth = resolution + spacing;\n\n  // Find the nearest bar boundaries for start and end durations\n  const getBarPosition = (time: number, direction: \"start\" | \"end\") => {\n    const position = (time / totalDuration) * 100;\n    const barIndex =\n      direction === \"start\"\n        ? Math.floor((position / 100) * processedWaveform.length)\n        : Math.ceil((position / 100) * processedWaveform.length);\n\n    return (\n      ((barIndex * barTotalWidth) / containerRef.current?.clientWidth!) * 100\n    );\n  };\n\n  const containerWidth = containerRef.current?.clientWidth || 0;\n  const waveformMessage = useMemo(() => {\n    if (disabled && disabledMessage) return disabledMessage;\n    if (!waveformData) return \"Waveform Unavailable\";\n\n    return null;\n  }, [disabled, disabledMessage, waveformData]);\n\n  return (\n    <div className={csx(\"proton-Waveform\", className)} data-testid={testId}>\n      {showTimestamps && (\n        <TimestampBlock direction=\"left\" seconds={currentTime} />\n      )}\n      <div\n        ref={containerRef}\n        className=\"proton-Waveform__container\"\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n        onClick={(e) => {\n          if (!containerRef.current || disabled) return;\n          const rect = containerRef.current.getBoundingClientRect();\n          const x = e.clientX - rect.left;\n          const position = (x / rect.width) * totalDuration;\n          onClick?.(position, e);\n        }}\n        data-disabled={disabled}\n        data-testid=\"waveform-container\"\n      >\n        {startDuration !== undefined && endDuration !== undefined && (\n          <div\n            className=\"proton-Waveform__active-region\"\n            style={{\n              left: containerRef.current\n                ? `calc(${getBarPosition(startDuration, \"start\")}%`\n                : \"0%\",\n              right: containerRef.current\n                ? `calc(${100 - getBarPosition(endDuration, \"end\")}% - 2px)`\n                : \"0%\",\n            }}\n          />\n        )}\n        {hoverPosition !== null && (\n          <div\n            className=\"proton-Waveform__hover-line\"\n            style={{\n              left: `${(hoverPosition / totalDuration) * 100}%`,\n            }}\n          />\n        )}\n        {processedWaveform.map((amplitude, index) => {\n          const position = (index / processedWaveform.length) * totalDuration;\n          const isBarOutsideActiveRegion =\n            startDuration !== undefined &&\n            endDuration !== undefined &&\n            (position < startDuration || position > endDuration);\n          const isPlayed = currentTime === 0 ? false : position <= currentTime;\n          const isHovered = hoverPosition !== null && position <= hoverPosition;\n\n          return (\n            <WaveformBar\n              key={index}\n              amplitude={amplitude}\n              isDisabled={disabled || isBarOutsideActiveRegion}\n              isPlayed={isPlayed}\n              isHovered={isHovered}\n              isVisible={isVisible}\n              hasAnimated={hasAnimated}\n              resolution={resolution}\n              spacing={spacing}\n              index={index}\n            />\n          );\n        })}\n      </div>\n\n      {waveformMessage && (\n        <div\n          className=\"proton-Waveform__bar-unavailable\"\n          style={{\n            fontSize: containerWidth < 325 ? \"0.85rem\" : \"1rem\",\n          }}\n        >\n          {waveformMessage}\n        </div>\n      )}\n\n      {showTimestamps && (\n        <TimestampBlock direction=\"right\" seconds={totalDuration} />\n      )}\n    </div>\n  );\n}\n\nfunction TimestampBlock({\n  direction,\n  seconds,\n}: {\n  direction: \"left\" | \"right\";\n  seconds: number;\n}) {\n  return (\n    <div\n      className={csx(\n        \"proton-Waveform__timestamp\",\n        `proton-Waveform__timestamp--${direction}`,\n      )}\n    >\n      {formatTimestamp(seconds)}\n    </div>\n  );\n}\n\n/** Formats seconds into MM:SS timestamp string\n * @param {number} seconds - Number of seconds to format\n * @returns {string} Formatted timestamp string in MM:SS format\n */\n\nfunction formatTimestamp(seconds: number) {\n  const minutes = Math.floor(seconds / 60);\n  const remainingSeconds = Math.floor(seconds % 60);\n  return `${minutes}:${\n    remainingSeconds < 10 ? \"0\" : \"\"\n  }${remainingSeconds.toFixed(0)}`;\n}\n\n/** Takes an array of waveform data and rescales it to any length\n * @param {array} initialData - original waveform data\n * @param {number} finalArrayLength - How long do you want the returned array?\n * @param {number} height - Height of the waveform container\n */\n\nfunction resampleData(initialData: number[], finalArrayLength: number) {\n  const initialArrayLength = initialData.length;\n  // How many samples from the original data do we skip per new sample?\n  const step = initialArrayLength / finalArrayLength;\n\n  // Create new array with desired length\n  const resampledData = new Array(finalArrayLength)\n    .fill(0)\n    .map((_, newIndex) => {\n      // Calculate position in original array\n      const position = newIndex * step;\n      const leftIndex = Math.floor(position);\n      const rightIndex = Math.min(leftIndex + 1, initialArrayLength - 1);\n\n      // Calculate weights for interpolation\n      const fraction = position - leftIndex;\n\n      // Linear interpolation between adjacent samples\n      const newVal =\n        initialData[leftIndex] * (1 - fraction) +\n        initialData[rightIndex] * fraction;\n\n      return newVal;\n    });\n\n  return scaleData(resampledData);\n}\n\n/** Takes an array of waveform data and scales it based on the desired pixel height\n * @param {array} data – Array of waveform data\n * @param {number} height - Height of the waveform container\n */\nfunction scaleData(data: number[]) {\n  const min = Math.min(...data);\n  const max = Math.max(...data);\n\n  return data.map((item) => {\n    // Normalize to 0-1 range first\n    const normalized = (item - min) / (max - min);\n    // Then scale to desired height (using 0.1 as minimum to ensure visibility)\n    return Math.max(normalized * 0.8 + 0.1, 0.1);\n  });\n}\n\n/** Generates a sample sine wave waveform data array\n * @param {number} length - Length of the waveform data array\n * @returns {number[]} Array of normalized amplitude values (0-1) representing the waveform\n */\n\nfunction generateSampleWaveformData(length: number) {\n  return Array.from({ length }, (_, i) => {\n    const cycles = 6;\n    // Create 3 complete cycles (6π total) starting at -π/2 (trough)\n    const phase = (i / (length - 1)) * cycles * 2 * Math.PI - Math.PI / 2;\n    return Math.sin(phase) * 0.5 + 0.5;\n  });\n}\n"],"names":["sampleWaveform","generateSampleWaveformData","Waveform","waveformData","resolution","startDuration","endDuration","currentTime","showTimestamps","totalDuration","disabled","disabledMessage","onClick","testId","className","useTheme","containerRef","useRef","processedWaveform","setProcessedWaveform","useState","hoverPosition","setHoverPosition","isVisible","setIsVisible","hasAnimated","setHasAnimated","waveform","spacing","useEffect","processWaveform","width","numBars","processed","resampleData","initialWidth","resizeObserver","entries","visibilityTimer","animationTimer","handleMouseMove","e","rect","position","handleMouseLeave","barTotalWidth","getBarPosition","time","direction","_a","containerWidth","waveformMessage","useMemo","jsxs","csx","jsx","TimestampBlock","amplitude","index","isBarOutsideActiveRegion","isPlayed","isHovered","WaveformBar","seconds","formatTimestamp","minutes","remainingSeconds","initialData","finalArrayLength","initialArrayLength","step","resampledData","newIndex","leftIndex","rightIndex","fraction","scaleData","data","min","max","item","normalized","length","_","i","phase"],"mappings":"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"}

package/dist/components/Waveform/WaveformBar.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"WaveformBar.cjs.js","sources":["../../../src/components/Waveform/WaveformBar.tsx"],"sourcesContent":["import { csx } from \"../../utils\";\n\ninterface WaveformBarProps {\n  amplitude: number;\n  isDisabled: boolean;\n  isPlayed: boolean;\n  isHovered: boolean;\n  isVisible: boolean;\n  hasAnimated: boolean;\n  resolution: number;\n  spacing: number;\n  index: number;\n}\n\nexport function WaveformBar({\n  amplitude,\n  isDisabled,\n  isPlayed,\n  isHovered,\n  isVisible,\n  hasAnimated,\n  resolution,\n  spacing,\n  index,\n}: WaveformBarProps) {\n  const barHeight = isVisible ? `${Math.max(amplitude * 100, 4)}%` : \"0%\";\n\n  return (\n    <div\n      className={csx(\"proton-Waveform__bar-wrapper\")}\n      style={{\n        width: `${resolution}px`,\n        marginRight: `${spacing}px`,\n      }}\n    >\n      <div\n        className={csx(\n          \"proton-Waveform__bar\",\n          \"proton-Waveform__bar--upper\",\n          isDisabled && \"proton-Waveform__bar--disabled\",\n          isPlayed && \"proton-Waveform__bar--played\",\n          isVisible && \"proton-Waveform__bar--visible\",\n          hasAnimated && \"proton-Waveform__bar--animated\"\n        )}\n        style={\n          {\n            \"--target-height\": `calc(${barHeight} / 2)`,\n            \"--index\": index,\n          } as React.CSSProperties\n        }\n      />\n      <div\n        className={csx(\n          \"proton-Waveform__bar\",\n          \"proton-Waveform__bar--lower\",\n          isDisabled && \"proton-Waveform__bar--disabled\",\n          isPlayed && \"proton-Waveform__bar--played\",\n          isVisible && \"proton-Waveform__bar--visible\",\n          hasAnimated && \"proton-Waveform__bar--animated\"\n        )}\n        style={\n          {\n            \"--target-height\": `calc(${barHeight} / 2)`,\n            \"--index\": index,\n          } as React.CSSProperties\n        }\n      />\n      {isHovered && !isDisabled && !isPlayed && (\n        <div\n          className=\"proton-Waveform__bar--hover\"\n          style={\n            {\n              \"--hover-height\": barHeight,\n            } as React.CSSProperties\n          }\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["WaveformBar","amplitude","isDisabled","isPlayed","isHovered","isVisible","hasAnimated","resolution","spacing","index","barHeight","jsxs","csx","jsx"],"mappings":"sLAcO,SAASA,EAAY,CAC1B,UAAAC,EACA,WAAAC,EACA,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,YAAAC,EACA,WAAAC,EACA,QAAAC,EACA,MAAAC,CACF,EAAqB,CACb,MAAAC,EAAYL,EAAY,GAAG,KAAK,IAAIJ,EAAY,IAAK,CAAC,CAAC,IAAM,KAGjE,OAAAU,EAAA,kBAAA,KAAC,MAAA,CACC,UAAWC,MAAI,8BAA8B,EAC7C,MAAO,CACL,MAAO,GAAGL,CAAU,KACpB,YAAa,GAAGC,CAAO,IACzB,EAEA,SAAA,CAAAK,EAAA,kBAAA,IAAC,MAAA,CACC,UAAWD,EAAA,IACT,uBACA,8BACAV,GAAc,iCACdC,GAAY,+BACZE,GAAa,gCACbC,GAAe,gCACjB,EACA,MACE,CACE,kBAAmB,QAAQI,CAAS,QACpC,UAAWD,CACb,CAAA,CAEJ,EACAI,EAAA,kBAAA,IAAC,MAAA,CACC,UAAWD,EAAA,IACT,uBACA,8BACAV,GAAc,iCACdC,GAAY,+BACZE,GAAa,gCACbC,GAAe,gCACjB,EACA,MACE,CACE,kBAAmB,QAAQI,CAAS,QACpC,UAAWD,CACb,CAAA,CAEJ,EACCL,GAAa,CAACF,GAAc,CAACC,GAC5BU,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,8BACV,MACE,CACE,iBAAkBH,CACpB,CAAA,CAEJ,CAAA,CAAA,CAAA,CAIR"}
+{"version":3,"file":"WaveformBar.cjs.js","sources":["../../../src/components/Waveform/WaveformBar.tsx"],"sourcesContent":["import { csx } from \"../../utils\";\n\ninterface WaveformBarProps {\n  amplitude: number;\n  isDisabled: boolean;\n  isPlayed: boolean;\n  isHovered: boolean;\n  isVisible: boolean;\n  hasAnimated: boolean;\n  resolution: number;\n  spacing: number;\n  index: number;\n}\n\nexport function WaveformBar({\n  amplitude,\n  isDisabled,\n  isPlayed,\n  isHovered,\n  isVisible,\n  hasAnimated,\n  resolution,\n  spacing,\n  index,\n}: WaveformBarProps) {\n  const barHeight = isVisible ? `${Math.max(amplitude * 100, 4)}%` : \"0%\";\n\n  return (\n    <div\n      className={csx(\"proton-Waveform__bar-wrapper\")}\n      style={{\n        width: `${resolution}px`,\n        marginRight: `${spacing}px`,\n      }}\n    >\n      <div\n        className={csx(\n          \"proton-Waveform__bar\",\n          \"proton-Waveform__bar--upper\",\n          isDisabled && \"proton-Waveform__bar--disabled\",\n          isPlayed && \"proton-Waveform__bar--played\",\n          isVisible && \"proton-Waveform__bar--visible\",\n          hasAnimated && \"proton-Waveform__bar--animated\"\n        )}\n        style={\n          {\n            \"--target-height\": `calc(${barHeight} / 2)`,\n            \"--index\": index,\n          } as React.CSSProperties\n        }\n      />\n      <div\n        className={csx(\n          \"proton-Waveform__bar\",\n          \"proton-Waveform__bar--lower\",\n          isDisabled && \"proton-Waveform__bar--disabled\",\n          isPlayed && \"proton-Waveform__bar--played\",\n          isVisible && \"proton-Waveform__bar--visible\",\n          hasAnimated && \"proton-Waveform__bar--animated\"\n        )}\n        style={\n          {\n            \"--target-height\": `calc(${barHeight} / 2)`,\n            \"--index\": index,\n          } as React.CSSProperties\n        }\n      />\n      {isHovered && !isDisabled && !isPlayed && (\n        <div\n          className=\"proton-Waveform__bar--hover\"\n          style={\n            {\n              \"--hover-height\": barHeight,\n            } as React.CSSProperties\n          }\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["WaveformBar","amplitude","isDisabled","isPlayed","isHovered","isVisible","hasAnimated","resolution","spacing","index","barHeight","jsxs","csx","jsx"],"mappings":"sLAcO,SAASA,EAAY,CAC1B,UAAAC,EACA,WAAAC,EACA,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,YAAAC,EACA,WAAAC,EACA,QAAAC,EACA,MAAAC,CACF,EAAqB,CACnB,MAAMC,EAAYL,EAAY,GAAG,KAAK,IAAIJ,EAAY,IAAK,CAAC,CAAC,IAAM,KAEnE,OACEU,EAAAA,kBAAAA,KAAC,MAAA,CACC,UAAWC,EAAAA,IAAI,8BAA8B,EAC7C,MAAO,CACL,MAAO,GAAGL,CAAU,KACpB,YAAa,GAAGC,CAAO,IAAA,EAGzB,SAAA,CAAAK,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAWD,EAAAA,IACT,uBACA,8BACAV,GAAc,iCACdC,GAAY,+BACZE,GAAa,gCACbC,GAAe,gCAAA,EAEjB,MACE,CACE,kBAAmB,QAAQI,CAAS,QACpC,UAAWD,CAAA,CACb,CAAA,EAGJI,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAWD,EAAAA,IACT,uBACA,8BACAV,GAAc,iCACdC,GAAY,+BACZE,GAAa,gCACbC,GAAe,gCAAA,EAEjB,MACE,CACE,kBAAmB,QAAQI,CAAS,QACpC,UAAWD,CAAA,CACb,CAAA,EAGHL,GAAa,CAACF,GAAc,CAACC,GAC5BU,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAU,8BACV,MACE,CACE,iBAAkBH,CAAA,CACpB,CAAA,CAEJ,CAAA,CAAA,CAIR"}

package/dist/components/Waveform/WaveformBar.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"WaveformBar.es.js","sources":["../../../src/components/Waveform/WaveformBar.tsx"],"sourcesContent":["import { csx } from \"../../utils\";\n\ninterface WaveformBarProps {\n  amplitude: number;\n  isDisabled: boolean;\n  isPlayed: boolean;\n  isHovered: boolean;\n  isVisible: boolean;\n  hasAnimated: boolean;\n  resolution: number;\n  spacing: number;\n  index: number;\n}\n\nexport function WaveformBar({\n  amplitude,\n  isDisabled,\n  isPlayed,\n  isHovered,\n  isVisible,\n  hasAnimated,\n  resolution,\n  spacing,\n  index,\n}: WaveformBarProps) {\n  const barHeight = isVisible ? `${Math.max(amplitude * 100, 4)}%` : \"0%\";\n\n  return (\n    <div\n      className={csx(\"proton-Waveform__bar-wrapper\")}\n      style={{\n        width: `${resolution}px`,\n        marginRight: `${spacing}px`,\n      }}\n    >\n      <div\n        className={csx(\n          \"proton-Waveform__bar\",\n          \"proton-Waveform__bar--upper\",\n          isDisabled && \"proton-Waveform__bar--disabled\",\n          isPlayed && \"proton-Waveform__bar--played\",\n          isVisible && \"proton-Waveform__bar--visible\",\n          hasAnimated && \"proton-Waveform__bar--animated\"\n        )}\n        style={\n          {\n            \"--target-height\": `calc(${barHeight} / 2)`,\n            \"--index\": index,\n          } as React.CSSProperties\n        }\n      />\n      <div\n        className={csx(\n          \"proton-Waveform__bar\",\n          \"proton-Waveform__bar--lower\",\n          isDisabled && \"proton-Waveform__bar--disabled\",\n          isPlayed && \"proton-Waveform__bar--played\",\n          isVisible && \"proton-Waveform__bar--visible\",\n          hasAnimated && \"proton-Waveform__bar--animated\"\n        )}\n        style={\n          {\n            \"--target-height\": `calc(${barHeight} / 2)`,\n            \"--index\": index,\n          } as React.CSSProperties\n        }\n      />\n      {isHovered && !isDisabled && !isPlayed && (\n        <div\n          className=\"proton-Waveform__bar--hover\"\n          style={\n            {\n              \"--hover-height\": barHeight,\n            } as React.CSSProperties\n          }\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["WaveformBar","amplitude","isDisabled","isPlayed","isHovered","isVisible","hasAnimated","resolution","spacing","index","barHeight","jsxs","csx","jsx"],"mappings":";;AAcO,SAASA,EAAY;AAAA,EAC1B,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AACF,GAAqB;AACb,QAAAC,IAAYL,IAAY,GAAG,KAAK,IAAIJ,IAAY,KAAK,CAAC,CAAC,MAAM;AAGjE,SAAAU,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAI,8BAA8B;AAAA,MAC7C,OAAO;AAAA,QACL,OAAO,GAAGL,CAAU;AAAA,QACpB,aAAa,GAAGC,CAAO;AAAA,MACzB;AAAA,MAEA,UAAA;AAAA,QAAAK,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACA;AAAA,cACAV,KAAc;AAAA,cACdC,KAAY;AAAA,cACZE,KAAa;AAAA,cACbC,KAAe;AAAA,YACjB;AAAA,YACA,OACE;AAAA,cACE,mBAAmB,QAAQI,CAAS;AAAA,cACpC,WAAWD;AAAA,YACb;AAAA,UAAA;AAAA,QAEJ;AAAA,QACAI,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACA;AAAA,cACAV,KAAc;AAAA,cACdC,KAAY;AAAA,cACZE,KAAa;AAAA,cACbC,KAAe;AAAA,YACjB;AAAA,YACA,OACE;AAAA,cACE,mBAAmB,QAAQI,CAAS;AAAA,cACpC,WAAWD;AAAA,YACb;AAAA,UAAA;AAAA,QAEJ;AAAA,QACCL,KAAa,CAACF,KAAc,CAACC,KAC5BU,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OACE;AAAA,cACE,kBAAkBH;AAAA,YACpB;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"WaveformBar.es.js","sources":["../../../src/components/Waveform/WaveformBar.tsx"],"sourcesContent":["import { csx } from \"../../utils\";\n\ninterface WaveformBarProps {\n  amplitude: number;\n  isDisabled: boolean;\n  isPlayed: boolean;\n  isHovered: boolean;\n  isVisible: boolean;\n  hasAnimated: boolean;\n  resolution: number;\n  spacing: number;\n  index: number;\n}\n\nexport function WaveformBar({\n  amplitude,\n  isDisabled,\n  isPlayed,\n  isHovered,\n  isVisible,\n  hasAnimated,\n  resolution,\n  spacing,\n  index,\n}: WaveformBarProps) {\n  const barHeight = isVisible ? `${Math.max(amplitude * 100, 4)}%` : \"0%\";\n\n  return (\n    <div\n      className={csx(\"proton-Waveform__bar-wrapper\")}\n      style={{\n        width: `${resolution}px`,\n        marginRight: `${spacing}px`,\n      }}\n    >\n      <div\n        className={csx(\n          \"proton-Waveform__bar\",\n          \"proton-Waveform__bar--upper\",\n          isDisabled && \"proton-Waveform__bar--disabled\",\n          isPlayed && \"proton-Waveform__bar--played\",\n          isVisible && \"proton-Waveform__bar--visible\",\n          hasAnimated && \"proton-Waveform__bar--animated\"\n        )}\n        style={\n          {\n            \"--target-height\": `calc(${barHeight} / 2)`,\n            \"--index\": index,\n          } as React.CSSProperties\n        }\n      />\n      <div\n        className={csx(\n          \"proton-Waveform__bar\",\n          \"proton-Waveform__bar--lower\",\n          isDisabled && \"proton-Waveform__bar--disabled\",\n          isPlayed && \"proton-Waveform__bar--played\",\n          isVisible && \"proton-Waveform__bar--visible\",\n          hasAnimated && \"proton-Waveform__bar--animated\"\n        )}\n        style={\n          {\n            \"--target-height\": `calc(${barHeight} / 2)`,\n            \"--index\": index,\n          } as React.CSSProperties\n        }\n      />\n      {isHovered && !isDisabled && !isPlayed && (\n        <div\n          className=\"proton-Waveform__bar--hover\"\n          style={\n            {\n              \"--hover-height\": barHeight,\n            } as React.CSSProperties\n          }\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["WaveformBar","amplitude","isDisabled","isPlayed","isHovered","isVisible","hasAnimated","resolution","spacing","index","barHeight","jsxs","csx","jsx"],"mappings":";;AAcO,SAASA,EAAY;AAAA,EAC1B,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AACF,GAAqB;AACnB,QAAMC,IAAYL,IAAY,GAAG,KAAK,IAAIJ,IAAY,KAAK,CAAC,CAAC,MAAM;AAEnE,SACEU,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAI,8BAA8B;AAAA,MAC7C,OAAO;AAAA,QACL,OAAO,GAAGL,CAAU;AAAA,QACpB,aAAa,GAAGC,CAAO;AAAA,MAAA;AAAA,MAGzB,UAAA;AAAA,QAAAK,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACA;AAAA,cACAV,KAAc;AAAA,cACdC,KAAY;AAAA,cACZE,KAAa;AAAA,cACbC,KAAe;AAAA,YAAA;AAAA,YAEjB,OACE;AAAA,cACE,mBAAmB,QAAQI,CAAS;AAAA,cACpC,WAAWD;AAAA,YAAA;AAAA,UACb;AAAA,QAAA;AAAA,QAGJI,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACA;AAAA,cACAV,KAAc;AAAA,cACdC,KAAY;AAAA,cACZE,KAAa;AAAA,cACbC,KAAe;AAAA,YAAA;AAAA,YAEjB,OACE;AAAA,cACE,mBAAmB,QAAQI,CAAS;AAAA,cACpC,WAAWD;AAAA,YAAA;AAAA,UACb;AAAA,QAAA;AAAA,QAGHL,KAAa,CAACF,KAAc,CAACC,KAC5BU,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OACE;AAAA,cACE,kBAAkBH;AAAA,YAAA;AAAA,UACpB;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/constants.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./constants/breakpoint.cjs.js"),t=require("./constants/placement.cjs.js");exports.BREAKPOINTS=e.BREAKPOINTS;exports.placements=t.placements;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./constants/breakpoint.cjs.js");exports.BREAKPOINTS=e.BREAKPOINTS;
 //# sourceMappingURL=constants.cjs.js.map

package/dist/constants.d.ts

@@ -1,5 +1,3 @@
-import { Placement } from 'react-aria';
-
 export declare type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];
 
 export declare const BREAKPOINTS: {
@@ -9,6 +7,10 @@ export declare const BREAKPOINTS: {
     X_LARGE: number;
 };
 
-export declare const placements: Placement[];
+/** Radix `Popover.Content` `align`*/
+export declare type RadixAlign = "start" | "center" | "end";
+
+/** Radix `Popover.Content` `side` */
+export declare type RadixSide = "top" | "right" | "bottom" | "left";
 
 export { }

package/dist/constants.es.js

@@ -1,7 +1,5 @@
-import { BREAKPOINTS as r } from "./constants/breakpoint.es.js";
-import { placements as p } from "./constants/placement.es.js";
+import { BREAKPOINTS as e } from "./constants/breakpoint.es.js";
 export {
-  r as BREAKPOINTS,
-  p as placements
+  e as BREAKPOINTS
 };
 //# sourceMappingURL=constants.es.js.map

package/dist/constants.es.js.map

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

package/dist/dark.d.ts

@@ -1,6 +1,6 @@
-export declare const DARK_BORDER = "#8a8e91";
+export declare const DARK_BORDER = "#f7f9fb";
 
-export declare const DARK_ELEVATION = "rgba(174, 175, 177, 0.2)";
+export declare const DARK_ELEVATION = "rgba(174, 175, 177, 0.21)";
 
 export declare const DARK_GRAYSCALE: ProtonColorScale;
 
@@ -48,13 +48,13 @@ declare type ProtonPalette = {
 declare interface ProtonStyleSheet {
     "--proton-control__background-color": string;
     "--proton-control__background-color-light": string;
+    "--proton-control__elevation-color": string;
     "--proton-control__text-color": string;
     "--proton-control__title-color": string;
     "--proton-control__border-color": string;
     "--proton-control__shadow-color": string;
     "--proton-control__hover-color": string;
     "--proton-control__border-radius": string;
-    "--proton-control__interactive-color": string;
     "--proton-color__primary": string;
     "--proton-color__primary-light": string;
     "--proton-color__primary-super-light": string;

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

@@ -1 +1 @@
-{"version":3,"file":"colors.cjs.js","sources":["../../src/design/colors.ts"],"sourcesContent":["import { ProtonColorScale, ProtonPalette } from \"./types\";\n\n/* Base Colors */\n\nexport const BACKGROUNDS = {\n  BLACK: \"#121212\",\n  WHITE: \"#FFFFFF\",\n};\n\nexport const BRAND: ProtonPalette[\"BRAND\"] = {\n  PRIMARY: \"#E26014\",\n  PRIMARY_LIGHT: \"#FBE5D7\",\n  PRIMARY_SUPER_LIGHT: \"#FFF7F0\",\n  SECONDARY: \"#2a9edb\",\n  SECONDARY_LIGHT: \"#b5d9ff\",\n  SECONDARY_SUPER_LIGHT: \"#d9e7fa\",\n};\n\nexport const BRAND_PRIMARY_SCALE: ProtonColorScale = {\n  SUPER_DARK: \"#2d1304\",\n  DARK: \"#5a2608\",\n  MEDIUM: \"#883a0c\",\n  MEDIUM_LIGHT: \"#b54d10\",\n  LIGHT: \"#e88043\",\n  LIGHTEST: \"#eea072\",\n  SUPER_LIGHT: \"#f9dfd0\",\n  WHITE: \"#fcfbfa\",\n};\n\n/* Semantic Colors */\n\nexport const DANGER: Partial<ProtonColorScale> = {\n  SUPER_DARK: \"#991b1b\",\n  DARK: \"#a80724\",\n  MEDIUM: \"#e23f5c\",\n  LIGHT: \"#f16880\",\n  SUPER_LIGHT: \"#ffe1e1\",\n};\n\nexport const WARNING: Partial<ProtonColorScale> = {\n  DARK: \"#8b5600\",\n  MEDIUM: \"#b37208\",\n  LIGHT: \"#ffac23\",\n  SUPER_LIGHT: \"#fff0c9\",\n};\n\nexport const SUCCESS: Partial<ProtonColorScale> = {\n  DARK: \"#247800\",\n  MEDIUM: \"#339a07\",\n  LIGHT: \"#66cf39\",\n  SUPER_LIGHT: \"#deffd1\",\n};\n"],"names":["BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE","DANGER","WARNING","SUCCESS"],"mappings":"gFAIO,MAAMA,EAAc,CACzB,MAAO,UACP,MAAO,SACT,EAEaC,EAAgC,CAC3C,QAAS,UACT,cAAe,UACf,oBAAqB,UACrB,UAAW,UACX,gBAAiB,UACjB,sBAAuB,SACzB,EAEaC,EAAwC,CACnD,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAO,SACT,EAIaC,EAAoC,CAC/C,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf,EAEaC,EAAqC,CAChD,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf,EAEaC,EAAqC,CAChD,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf"}
+{"version":3,"file":"colors.cjs.js","sources":["../../src/design/colors.ts"],"sourcesContent":["import { ProtonColorScale, ProtonPalette } from \"./types\";\n\n/* Base Colors */\n\nexport const BACKGROUNDS = {\n  BLACK: \"#121212\",\n  WHITE: \"#FFFFFF\",\n};\n\nexport const BRAND: ProtonPalette[\"BRAND\"] = {\n  PRIMARY: \"#E26014\",\n  PRIMARY_LIGHT: \"#FBE5D7\",\n  PRIMARY_SUPER_LIGHT: \"#FFF7F0\",\n  SECONDARY: \"#2a9edb\",\n  SECONDARY_LIGHT: \"#b5d9ff\",\n  SECONDARY_SUPER_LIGHT: \"#d9e7fa\",\n};\n\nexport const BRAND_PRIMARY_SCALE: ProtonColorScale = {\n  SUPER_DARK: \"#2d1304\",\n  DARK: \"#5a2608\",\n  MEDIUM: \"#883a0c\",\n  MEDIUM_LIGHT: \"#b54d10\",\n  LIGHT: \"#e88043\",\n  LIGHTEST: \"#eea072\",\n  SUPER_LIGHT: \"#f9dfd0\",\n  WHITE: \"#fcfbfa\",\n};\n\n/* Semantic Colors */\n\nexport const DANGER = {\n  SUPER_DARK: \"#991b1b\",\n  DARK: \"#a80724\",\n  MEDIUM: \"#e23f5c\",\n  LIGHT: \"#f16880\",\n  SUPER_LIGHT: \"#ffe1e1\",\n} satisfies Partial<ProtonColorScale>;\n\nexport const WARNING = {\n  DARK: \"#8b5600\",\n  MEDIUM: \"#b37208\",\n  LIGHT: \"#ffac23\",\n  SUPER_LIGHT: \"#fff0c9\",\n} satisfies Partial<ProtonColorScale>;\n\nexport const SUCCESS = {\n  DARK: \"#247800\",\n  MEDIUM: \"#339a07\",\n  LIGHT: \"#66cf39\",\n  SUPER_LIGHT: \"#deffd1\",\n} satisfies Partial<ProtonColorScale>;\n"],"names":["BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE","DANGER","WARNING","SUCCESS"],"mappings":"gFAIO,MAAMA,EAAc,CACzB,MAAO,UACP,MAAO,SACT,EAEaC,EAAgC,CAC3C,QAAS,UACT,cAAe,UACf,oBAAqB,UACrB,UAAW,UACX,gBAAiB,UACjB,sBAAuB,SACzB,EAEaC,EAAwC,CACnD,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAO,SACT,EAIaC,EAAS,CACpB,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf,EAEaC,EAAU,CACrB,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf,EAEaC,EAAU,CACrB,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf"}

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

@@ -1 +1 @@
-{"version":3,"file":"colors.es.js","sources":["../../src/design/colors.ts"],"sourcesContent":["import { ProtonColorScale, ProtonPalette } from \"./types\";\n\n/* Base Colors */\n\nexport const BACKGROUNDS = {\n  BLACK: \"#121212\",\n  WHITE: \"#FFFFFF\",\n};\n\nexport const BRAND: ProtonPalette[\"BRAND\"] = {\n  PRIMARY: \"#E26014\",\n  PRIMARY_LIGHT: \"#FBE5D7\",\n  PRIMARY_SUPER_LIGHT: \"#FFF7F0\",\n  SECONDARY: \"#2a9edb\",\n  SECONDARY_LIGHT: \"#b5d9ff\",\n  SECONDARY_SUPER_LIGHT: \"#d9e7fa\",\n};\n\nexport const BRAND_PRIMARY_SCALE: ProtonColorScale = {\n  SUPER_DARK: \"#2d1304\",\n  DARK: \"#5a2608\",\n  MEDIUM: \"#883a0c\",\n  MEDIUM_LIGHT: \"#b54d10\",\n  LIGHT: \"#e88043\",\n  LIGHTEST: \"#eea072\",\n  SUPER_LIGHT: \"#f9dfd0\",\n  WHITE: \"#fcfbfa\",\n};\n\n/* Semantic Colors */\n\nexport const DANGER: Partial<ProtonColorScale> = {\n  SUPER_DARK: \"#991b1b\",\n  DARK: \"#a80724\",\n  MEDIUM: \"#e23f5c\",\n  LIGHT: \"#f16880\",\n  SUPER_LIGHT: \"#ffe1e1\",\n};\n\nexport const WARNING: Partial<ProtonColorScale> = {\n  DARK: \"#8b5600\",\n  MEDIUM: \"#b37208\",\n  LIGHT: \"#ffac23\",\n  SUPER_LIGHT: \"#fff0c9\",\n};\n\nexport const SUCCESS: Partial<ProtonColorScale> = {\n  DARK: \"#247800\",\n  MEDIUM: \"#339a07\",\n  LIGHT: \"#66cf39\",\n  SUPER_LIGHT: \"#deffd1\",\n};\n"],"names":["BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE","DANGER","WARNING","SUCCESS"],"mappings":"AAIO,MAAMA,IAAc;AAAA,EACzB,OAAO;AAAA,EACP,OAAO;AACT,GAEaC,IAAgC;AAAA,EAC3C,SAAS;AAAA,EACT,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,uBAAuB;AACzB,GAEaC,IAAwC;AAAA,EACnD,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAO;AACT,GAIaC,IAAoC;AAAA,EAC/C,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf,GAEaC,IAAqC;AAAA,EAChD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf,GAEaC,IAAqC;AAAA,EAChD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf;"}
+{"version":3,"file":"colors.es.js","sources":["../../src/design/colors.ts"],"sourcesContent":["import { ProtonColorScale, ProtonPalette } from \"./types\";\n\n/* Base Colors */\n\nexport const BACKGROUNDS = {\n  BLACK: \"#121212\",\n  WHITE: \"#FFFFFF\",\n};\n\nexport const BRAND: ProtonPalette[\"BRAND\"] = {\n  PRIMARY: \"#E26014\",\n  PRIMARY_LIGHT: \"#FBE5D7\",\n  PRIMARY_SUPER_LIGHT: \"#FFF7F0\",\n  SECONDARY: \"#2a9edb\",\n  SECONDARY_LIGHT: \"#b5d9ff\",\n  SECONDARY_SUPER_LIGHT: \"#d9e7fa\",\n};\n\nexport const BRAND_PRIMARY_SCALE: ProtonColorScale = {\n  SUPER_DARK: \"#2d1304\",\n  DARK: \"#5a2608\",\n  MEDIUM: \"#883a0c\",\n  MEDIUM_LIGHT: \"#b54d10\",\n  LIGHT: \"#e88043\",\n  LIGHTEST: \"#eea072\",\n  SUPER_LIGHT: \"#f9dfd0\",\n  WHITE: \"#fcfbfa\",\n};\n\n/* Semantic Colors */\n\nexport const DANGER = {\n  SUPER_DARK: \"#991b1b\",\n  DARK: \"#a80724\",\n  MEDIUM: \"#e23f5c\",\n  LIGHT: \"#f16880\",\n  SUPER_LIGHT: \"#ffe1e1\",\n} satisfies Partial<ProtonColorScale>;\n\nexport const WARNING = {\n  DARK: \"#8b5600\",\n  MEDIUM: \"#b37208\",\n  LIGHT: \"#ffac23\",\n  SUPER_LIGHT: \"#fff0c9\",\n} satisfies Partial<ProtonColorScale>;\n\nexport const SUCCESS = {\n  DARK: \"#247800\",\n  MEDIUM: \"#339a07\",\n  LIGHT: \"#66cf39\",\n  SUPER_LIGHT: \"#deffd1\",\n} satisfies Partial<ProtonColorScale>;\n"],"names":["BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE","DANGER","WARNING","SUCCESS"],"mappings":"AAIO,MAAMA,IAAc;AAAA,EACzB,OAAO;AAAA,EACP,OAAO;AACT,GAEaC,IAAgC;AAAA,EAC3C,SAAS;AAAA,EACT,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,uBAAuB;AACzB,GAEaC,IAAwC;AAAA,EACnD,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAO;AACT,GAIaC,IAAS;AAAA,EACpB,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf,GAEaC,IAAU;AAAA,EACrB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf,GAEaC,IAAU;AAAA,EACrB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf;"}

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

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

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

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

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

@@ -1,13 +1,13 @@
-import { BACKGROUNDS as A, BRAND as E, BRAND_PRIMARY_SCALE as D } from "../colors.es.js";
-const R = "#8a8e91", S = R, _ = "rgba(174, 175, 177, 0.2)", I = {
+import { BRAND_PRIMARY_SCALE as A, BRAND as E, BACKGROUNDS as D } from "../colors.es.js";
+const R = "#f7f9fb", S = R, _ = "rgba(174, 175, 177, 0.21)", I = {
   SUPER_DARK: "#111212",
   DARK: "#1e1f21",
   MEDIUM: "#232629",
   MEDIUM_LIGHT: "#2b2d30",
   LIGHT: "#43464a",
   LIGHTEST: "#63676b",
-  SUPER_LIGHT: R,
-  WHITE: "#f7f9fb"
+  SUPER_LIGHT: "#8a8e91",
+  WHITE: R
 }, L = {
   SUPER_DARK: "#142736",
   DARK: "#22445d",
@@ -16,12 +16,12 @@ const R = "#8a8e91", S = R, _ = "rgba(174, 175, 177, 0.2)", I = {
   LIGHT: "#5795c1",
   LIGHTEST: "#a2c4dd",
   SUPER_LIGHT: "#dae7f1",
-  WHITE: "#f7f9fb"
+  WHITE: R
 }, G = {
-  BASE_COLOR: A.BLACK,
+  BASE_COLOR: D.BLACK,
   BRAND: E,
   GRAYSCALE: I,
-  PRIMARY: D,
+  PRIMARY: A,
   SECONDARY: L
 };
 export {

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"stylesheet.cjs.js","sources":["../../../src/design/darkTheme/stylesheet.ts"],"sourcesContent":["import { transparentize } from \"../../utils/color2k\";\nimport { BORDER, DARK_GRAYSCALE, ELEVATION } from \"./colors\";\nimport { DANGER, WARNING, SUCCESS, BRAND } from \"../colors\";\nimport type { ProtonStyleSheet } from \"../types\";\n\nexport const DARK_STYLESHEET: ProtonStyleSheet = {\n  // Control/component colors\n  \"--proton-control__background-color\": DARK_GRAYSCALE.DARK,\n  \"--proton-control__background-color-light\": ELEVATION,\n  \"--proton-control__text-color\": DARK_GRAYSCALE.WHITE,\n  \"--proton-control__title-color\": \"#FFFFFF\",\n  \"--proton-control__border-color\": BORDER,\n  \"--proton-control__hover-color\": DARK_GRAYSCALE.MEDIUM,\n  \"--proton-control__shadow-color\": transparentize(\n    DARK_GRAYSCALE.LIGHTEST,\n    0.5\n  ),\n  \"--proton-control__border-radius\": \"4px\",\n  \"--proton-control__interactive-color\": BRAND.PRIMARY_LIGHT,\n\n  // Brand colors\n  \"--proton-color__primary\": BRAND.PRIMARY,\n  \"--proton-color__primary-light\": BRAND.PRIMARY_LIGHT,\n  \"--proton-color__primary-super-light\": BRAND.PRIMARY_SUPER_LIGHT,\n  \"--proton-color__secondary\": BRAND.SECONDARY,\n  \"--proton-color__secondary-light\": BRAND.SECONDARY_LIGHT,\n  \"--proton-color__secondary-super-light\": BRAND.SECONDARY_SUPER_LIGHT,\n\n  // Semantic colors\n  \"--proton-color__danger-super-dark\": DANGER.SUPER_DARK,\n  \"--proton-color__danger-dark\": DANGER.DARK,\n  \"--proton-color__danger-medium\": DANGER.MEDIUM,\n  \"--proton-color__danger-light\": DANGER.LIGHT,\n  \"--proton-color__danger-super-light\": DANGER.SUPER_LIGHT,\n  \"--proton-color__warning-dark\": WARNING.DARK,\n  \"--proton-color__warning-medium\": WARNING.MEDIUM,\n  \"--proton-color__warning-light\": WARNING.LIGHT,\n  \"--proton-color__warning-super-light\": WARNING.SUPER_LIGHT,\n  \"--proton-color__success-dark\": SUCCESS.DARK,\n  \"--proton-color__success-medium\": SUCCESS.MEDIUM,\n  \"--proton-color__success-light\": SUCCESS.LIGHT,\n  \"--proton-color__success-super-light\": SUCCESS.SUPER_LIGHT,\n\n  // Grayscale colors\n  \"--proton-color__gray-super-dark\": DARK_GRAYSCALE.SUPER_DARK,\n  \"--proton-color__gray-dark\": DARK_GRAYSCALE.DARK,\n  \"--proton-color__gray-medium\": DARK_GRAYSCALE.MEDIUM,\n  \"--proton-color__gray-medium-light\": DARK_GRAYSCALE.MEDIUM_LIGHT,\n  \"--proton-color__gray-light\": DARK_GRAYSCALE.LIGHT,\n  \"--proton-color__gray-lightest\": DARK_GRAYSCALE.LIGHTEST,\n  \"--proton-color__gray-super-light\": DARK_GRAYSCALE.SUPER_LIGHT,\n  \"--proton-color__white\": DARK_GRAYSCALE.WHITE,\n};\n"],"names":["DARK_STYLESHEET","DARK_GRAYSCALE","ELEVATION","BORDER","transparentize","BRAND","DANGER","WARNING","SUCCESS"],"mappings":"yLAKaA,EAAoC,CAE/C,qCAAsCC,EAAe,eAAA,KACrD,2CAA4CC,EAAA,UAC5C,+BAAgCD,EAAe,eAAA,MAC/C,gCAAiC,UACjC,iCAAkCE,EAAA,OAClC,gCAAiCF,EAAe,eAAA,OAChD,iCAAkCG,EAAA,eAChCH,EAAAA,eAAe,SACf,EACF,EACA,kCAAmC,MACnC,sCAAuCI,EAAM,MAAA,cAG7C,0BAA2BA,EAAM,MAAA,QACjC,gCAAiCA,EAAM,MAAA,cACvC,sCAAuCA,EAAM,MAAA,oBAC7C,4BAA6BA,EAAM,MAAA,UACnC,kCAAmCA,EAAM,MAAA,gBACzC,wCAAyCA,EAAM,MAAA,sBAG/C,oCAAqCC,EAAO,OAAA,WAC5C,8BAA+BA,EAAO,OAAA,KACtC,gCAAiCA,EAAO,OAAA,OACxC,+BAAgCA,EAAO,OAAA,MACvC,qCAAsCA,EAAO,OAAA,YAC7C,+BAAgCC,EAAQ,QAAA,KACxC,iCAAkCA,EAAQ,QAAA,OAC1C,gCAAiCA,EAAQ,QAAA,MACzC,sCAAuCA,EAAQ,QAAA,YAC/C,+BAAgCC,EAAQ,QAAA,KACxC,iCAAkCA,EAAQ,QAAA,OAC1C,gCAAiCA,EAAQ,QAAA,MACzC,sCAAuCA,EAAQ,QAAA,YAG/C,kCAAmCP,EAAe,eAAA,WAClD,4BAA6BA,EAAe,eAAA,KAC5C,8BAA+BA,EAAe,eAAA,OAC9C,oCAAqCA,EAAe,eAAA,aACpD,6BAA8BA,EAAe,eAAA,MAC7C,gCAAiCA,EAAe,eAAA,SAChD,mCAAoCA,EAAe,eAAA,YACnD,wBAAyBA,EAAe,eAAA,KAC1C"}
+{"version":3,"file":"stylesheet.cjs.js","sources":["../../../src/design/darkTheme/stylesheet.ts"],"sourcesContent":["import { transparentize } from \"../../utils/color2k\";\nimport { BORDER, DARK_GRAYSCALE, ELEVATION } from \"./colors\";\nimport { DANGER, WARNING, SUCCESS, BRAND } from \"../colors\";\nimport type { ProtonStyleSheet } from \"../types\";\n\nexport const DARK_STYLESHEET: ProtonStyleSheet = {\n  // Control/component colors\n  \"--proton-control__background-color\": DARK_GRAYSCALE.DARK,\n  \"--proton-control__background-color-light\": ELEVATION,\n  \"--proton-control__elevation-color\": ELEVATION,\n  \"--proton-control__text-color\": DARK_GRAYSCALE.WHITE,\n  \"--proton-control__title-color\": \"#FFFFFF\",\n  \"--proton-control__border-color\": transparentize(BORDER, 0.6),\n  \"--proton-control__hover-color\": transparentize(\n    DARK_GRAYSCALE.SUPER_LIGHT,\n    0.65,\n  ),\n  \"--proton-control__shadow-color\": transparentize(\n    DARK_GRAYSCALE.SUPER_LIGHT,\n    0.54,\n  ),\n  \"--proton-control__border-radius\": \"4px\",\n\n  // Brand colors\n  \"--proton-color__primary\": BRAND.PRIMARY,\n  \"--proton-color__primary-light\": BRAND.PRIMARY_LIGHT,\n  \"--proton-color__primary-super-light\": BRAND.PRIMARY_SUPER_LIGHT,\n  \"--proton-color__secondary\": BRAND.SECONDARY,\n  \"--proton-color__secondary-light\": BRAND.SECONDARY_LIGHT,\n  \"--proton-color__secondary-super-light\": BRAND.SECONDARY_SUPER_LIGHT,\n\n  // Semantic colors\n  \"--proton-color__danger-super-dark\": DANGER.SUPER_DARK,\n  \"--proton-color__danger-dark\": DANGER.DARK,\n  \"--proton-color__danger-medium\": DANGER.MEDIUM,\n  \"--proton-color__danger-light\": DANGER.LIGHT,\n  \"--proton-color__danger-super-light\": DANGER.SUPER_LIGHT,\n  \"--proton-color__warning-dark\": WARNING.DARK,\n  \"--proton-color__warning-medium\": WARNING.MEDIUM,\n  \"--proton-color__warning-light\": WARNING.LIGHT,\n  \"--proton-color__warning-super-light\": WARNING.SUPER_LIGHT,\n  \"--proton-color__success-dark\": SUCCESS.DARK,\n  \"--proton-color__success-medium\": SUCCESS.MEDIUM,\n  \"--proton-color__success-light\": SUCCESS.LIGHT,\n  \"--proton-color__success-super-light\": SUCCESS.SUPER_LIGHT,\n\n  // Grayscale colors\n  \"--proton-color__gray-super-dark\": DARK_GRAYSCALE.SUPER_DARK,\n  \"--proton-color__gray-dark\": DARK_GRAYSCALE.DARK,\n  \"--proton-color__gray-medium\": DARK_GRAYSCALE.MEDIUM,\n  \"--proton-color__gray-medium-light\": DARK_GRAYSCALE.MEDIUM_LIGHT,\n  \"--proton-color__gray-light\": DARK_GRAYSCALE.LIGHT,\n  \"--proton-color__gray-lightest\": DARK_GRAYSCALE.LIGHTEST,\n  \"--proton-color__gray-super-light\": DARK_GRAYSCALE.SUPER_LIGHT,\n  \"--proton-color__white\": DARK_GRAYSCALE.WHITE,\n};\n"],"names":["DARK_STYLESHEET","DARK_GRAYSCALE","ELEVATION","transparentize","BORDER","BRAND","DANGER","WARNING","SUCCESS"],"mappings":"yLAKaA,EAAoC,CAE/C,qCAAsCC,EAAAA,eAAe,KACrD,2CAA4CC,EAAAA,UAC5C,oCAAqCA,EAAAA,UACrC,+BAAgCD,EAAAA,eAAe,MAC/C,gCAAiC,UACjC,iCAAkCE,EAAAA,eAAeC,EAAAA,OAAQ,EAAG,EAC5D,gCAAiCD,EAAAA,eAC/BF,EAAAA,eAAe,YACf,GAAA,EAEF,iCAAkCE,EAAAA,eAChCF,EAAAA,eAAe,YACf,GAAA,EAEF,kCAAmC,MAGnC,0BAA2BI,EAAAA,MAAM,QACjC,gCAAiCA,EAAAA,MAAM,cACvC,sCAAuCA,EAAAA,MAAM,oBAC7C,4BAA6BA,EAAAA,MAAM,UACnC,kCAAmCA,EAAAA,MAAM,gBACzC,wCAAyCA,EAAAA,MAAM,sBAG/C,oCAAqCC,EAAAA,OAAO,WAC5C,8BAA+BA,EAAAA,OAAO,KACtC,gCAAiCA,EAAAA,OAAO,OACxC,+BAAgCA,EAAAA,OAAO,MACvC,qCAAsCA,EAAAA,OAAO,YAC7C,+BAAgCC,EAAAA,QAAQ,KACxC,iCAAkCA,EAAAA,QAAQ,OAC1C,gCAAiCA,EAAAA,QAAQ,MACzC,sCAAuCA,EAAAA,QAAQ,YAC/C,+BAAgCC,EAAAA,QAAQ,KACxC,iCAAkCA,EAAAA,QAAQ,OAC1C,gCAAiCA,EAAAA,QAAQ,MACzC,sCAAuCA,EAAAA,QAAQ,YAG/C,kCAAmCP,EAAAA,eAAe,WAClD,4BAA6BA,EAAAA,eAAe,KAC5C,8BAA+BA,EAAAA,eAAe,OAC9C,oCAAqCA,EAAAA,eAAe,aACpD,6BAA8BA,EAAAA,eAAe,MAC7C,gCAAiCA,EAAAA,eAAe,SAChD,mCAAoCA,EAAAA,eAAe,YACnD,wBAAyBA,EAAAA,eAAe,KAC1C"}

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

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