react-panel-layout 0.5.0 → 0.5.1

package/dist/FloatingPanelFrame-6W5OexYe.js

@@ -0,0 +1,98 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as o from "react";
+import { F, a as c, b as L, c as N, d as P, e as O, f as h, g as b, h as R, i as f, j as E, k as T, l as y, m as I } from "./styles-CA2_zLZt.js";
+const G = {
+  borderRadius: c,
+  boxShadow: F
+}, u = {
+  borderRadius: c,
+  overflow: "hidden"
+}, _ = {
+  display: "flex",
+  flexDirection: "column",
+  borderRadius: c,
+  border: `1px solid ${N}`,
+  background: L
+}, C = {
+  display: "flex",
+  alignItems: "center",
+  gap: b,
+  padding: `${O} ${h}`,
+  borderBottom: `1px solid ${N}`,
+  background: P
+}, D = {
+  fontWeight: 600
+}, v = {
+  marginLeft: "auto",
+  color: f,
+  fontSize: R
+}, M = {
+  display: "flex",
+  alignItems: "center",
+  gap: E
+}, S = {
+  border: "none",
+  background: "transparent",
+  cursor: "pointer",
+  fontSize: I,
+  padding: y,
+  lineHeight: 1
+}, B = {
+  padding: T,
+  overflow: "auto"
+}, w = o.forwardRef(function({ style: e, children: n, ...d }, r) {
+  const m = o.useMemo(
+    () => ({ ...G, ...e }),
+    [e]
+  ), A = o.useMemo(() => {
+    const i = e?.borderRadius !== void 0, l = e?.height !== void 0;
+    if (!i && !l)
+      return u;
+    const a = { ...u };
+    return i && (a.borderRadius = e.borderRadius), l && (a.height = e.height), a;
+  }, [e?.borderRadius, e?.height]), g = o.useMemo(() => {
+    const i = e?.borderRadius !== void 0, l = e?.height !== void 0;
+    if (!i && !l)
+      return _;
+    const a = { ..._ };
+    return i && (a.borderRadius = e.borderRadius), l && (a.height = e.height), a;
+  }, [e?.borderRadius, e?.height]);
+  return /* @__PURE__ */ s("div", { ref: r, style: m, ...d, children: /* @__PURE__ */ s("div", { style: A, children: /* @__PURE__ */ s("div", { style: g, children: n }) }) });
+}), x = ({ style: t, ...e }) => {
+  const n = o.useMemo(() => ({ ...C, ...t }), [t]);
+  return /* @__PURE__ */ s("div", { style: n, ...e });
+}, H = ({ style: t, ...e }) => {
+  const n = o.useMemo(() => ({ ...D, ...t }), [t]);
+  return /* @__PURE__ */ s("span", { style: n, ...e });
+}, U = ({ style: t, ...e }) => {
+  const n = o.useMemo(() => ({ ...v, ...t }), [t]);
+  return /* @__PURE__ */ s("span", { style: n, ...e });
+}, k = ({ style: t, ...e }) => {
+  const n = o.useMemo(() => ({ ...M, ...t }), [t]);
+  return /* @__PURE__ */ s("div", { style: n, ...e });
+}, W = o.forwardRef(
+  function({ style: e, ...n }, d) {
+    const r = o.useMemo(() => ({ ...B, ...e }), [e]);
+    return /* @__PURE__ */ s("div", { ref: d, style: r, ...n });
+  }
+), $ = ({ style: t, ...e }) => {
+  const n = o.useMemo(() => ({ ...S, ...t }), [t]);
+  return /* @__PURE__ */ s("button", { type: "button", style: n, ...e, children: "×" });
+};
+w.displayName = "FloatingPanelFrame";
+x.displayName = "FloatingPanelHeader";
+H.displayName = "FloatingPanelTitle";
+U.displayName = "FloatingPanelMeta";
+k.displayName = "FloatingPanelControls";
+W.displayName = "FloatingPanelContent";
+$.displayName = "FloatingPanelCloseButton";
+export {
+  w as F,
+  x as a,
+  H as b,
+  U as c,
+  k as d,
+  W as e,
+  $ as f
+};
+//# sourceMappingURL=FloatingPanelFrame-6W5OexYe.js.map

package/dist/FloatingPanelFrame-6W5OexYe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanelFrame-6W5OexYe.js","sources":["../src/components/paneling/FloatingPanelFrame.tsx"],"sourcesContent":["/**\n * @file Shared floating panel frame components for reusable overlay styling\n */\nimport * as React from \"react\";\nimport {\n  FLOATING_PANEL_BORDER_RADIUS,\n  FLOATING_PANEL_GAP,\n  FLOATING_PANEL_HEADER_PADDING_Y,\n  FLOATING_PANEL_HEADER_PADDING_X,\n  FLOATING_PANEL_CONTENT_PADDING,\n  FLOATING_PANEL_META_FONT_SIZE,\n  FLOATING_PANEL_CONTROLS_GAP,\n  FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE,\n  FLOATING_PANEL_CLOSE_BUTTON_PADDING,\n  FLOATING_PANEL_SURFACE_COLOR,\n  FLOATING_PANEL_SURFACE_2_COLOR,\n  FLOATING_PANEL_BORDER_COLOR,\n  FLOATING_PANEL_MUTED_FG_COLOR,\n  FLOATING_PANEL_SHADOW,\n} from \"../../constants/styles\";\n\nconst shadowWrapperStyle: React.CSSProperties = {\n  borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n  boxShadow: FLOATING_PANEL_SHADOW,\n};\n\nconst overflowWrapperStyle: React.CSSProperties = {\n  borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n  overflow: \"hidden\",\n};\n\nconst innerStyle: React.CSSProperties = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n  border: `1px solid ${FLOATING_PANEL_BORDER_COLOR}`,\n  background: FLOATING_PANEL_SURFACE_COLOR,\n};\n\nconst headerStyle: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: FLOATING_PANEL_GAP,\n  padding: `${FLOATING_PANEL_HEADER_PADDING_Y} ${FLOATING_PANEL_HEADER_PADDING_X}`,\n  borderBottom: `1px solid ${FLOATING_PANEL_BORDER_COLOR}`,\n  background: FLOATING_PANEL_SURFACE_2_COLOR,\n};\n\nconst titleStyle: React.CSSProperties = {\n  fontWeight: 600,\n};\n\nconst metaStyle: React.CSSProperties = {\n  marginLeft: \"auto\",\n  color: FLOATING_PANEL_MUTED_FG_COLOR,\n  fontSize: FLOATING_PANEL_META_FONT_SIZE,\n};\n\nconst controlsStyle: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: FLOATING_PANEL_CONTROLS_GAP,\n};\n\nconst closeButtonStyle: React.CSSProperties = {\n  border: \"none\",\n  background: \"transparent\",\n  cursor: \"pointer\",\n  fontSize: FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE,\n  padding: FLOATING_PANEL_CLOSE_BUTTON_PADDING,\n  lineHeight: 1,\n};\n\nconst contentStyle: React.CSSProperties = {\n  padding: FLOATING_PANEL_CONTENT_PADDING,\n  overflow: \"auto\",\n};\n\nexport type FloatingPanelFrameProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelFrame = React.forwardRef<HTMLDivElement, FloatingPanelFrameProps>(function FloatingPanelFrame(\n  { style: propStyle, children, ...props },\n  ref,\n) {\n  const combinedShadowStyle = React.useMemo(\n    () => ({ ...shadowWrapperStyle, ...propStyle }),\n    [propStyle],\n  );\n\n  const combinedOverflowStyle = React.useMemo(() => {\n    const hasCustomBorderRadius = propStyle?.borderRadius !== undefined;\n    const hasHeight = propStyle?.height !== undefined;\n\n    if (!hasCustomBorderRadius && !hasHeight) {\n      return overflowWrapperStyle;\n    }\n\n    const result: React.CSSProperties = { ...overflowWrapperStyle };\n    if (hasCustomBorderRadius) {\n      result.borderRadius = propStyle.borderRadius;\n    }\n    if (hasHeight) {\n      result.height = propStyle.height;\n    }\n    return result;\n  }, [propStyle?.borderRadius, propStyle?.height]);\n\n  const combinedInnerStyle = React.useMemo(() => {\n    const hasCustomBorderRadius = propStyle?.borderRadius !== undefined;\n    const hasHeight = propStyle?.height !== undefined;\n\n    if (!hasCustomBorderRadius && !hasHeight) {\n      return innerStyle;\n    }\n\n    const result: React.CSSProperties = { ...innerStyle };\n    if (hasCustomBorderRadius) {\n      result.borderRadius = propStyle.borderRadius;\n    }\n    if (hasHeight) {\n      result.height = propStyle.height;\n    }\n    return result;\n  }, [propStyle?.borderRadius, propStyle?.height]);\n\n  return (\n    <div ref={ref} style={combinedShadowStyle} {...props}>\n      <div style={combinedOverflowStyle}>\n        <div style={combinedInnerStyle}>{children}</div>\n      </div>\n    </div>\n  );\n});\n\nexport type FloatingPanelHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelHeader: React.FC<FloatingPanelHeaderProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...headerStyle, ...propStyle }), [propStyle]);\n  return <div style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelTitleProps = Omit<React.HTMLAttributes<HTMLSpanElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelTitle: React.FC<FloatingPanelTitleProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...titleStyle, ...propStyle }), [propStyle]);\n  return <span style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelMetaProps = Omit<React.HTMLAttributes<HTMLSpanElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelMeta: React.FC<FloatingPanelMetaProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...metaStyle, ...propStyle }), [propStyle]);\n  return <span style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelControlsProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelControls: React.FC<FloatingPanelControlsProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...controlsStyle, ...propStyle }), [propStyle]);\n  return <div style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelContent = React.forwardRef<HTMLDivElement, FloatingPanelContentProps>(\n  function FloatingPanelContent({ style: propStyle, ...props }, ref) {\n    const combinedStyle = React.useMemo(() => ({ ...contentStyle, ...propStyle }), [propStyle]);\n    return <div ref={ref} style={combinedStyle} {...props} />;\n  },\n);\n\nexport type FloatingPanelCloseButtonProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  \"className\" | \"style\" | \"children\"\n> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelCloseButton: React.FC<FloatingPanelCloseButtonProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...closeButtonStyle, ...propStyle }), [propStyle]);\n  return (\n    <button type=\"button\" style={combinedStyle} {...props}>\n      ×\n    </button>\n  );\n};\n\nFloatingPanelFrame.displayName = \"FloatingPanelFrame\";\nFloatingPanelHeader.displayName = \"FloatingPanelHeader\";\nFloatingPanelTitle.displayName = \"FloatingPanelTitle\";\nFloatingPanelMeta.displayName = \"FloatingPanelMeta\";\nFloatingPanelControls.displayName = \"FloatingPanelControls\";\nFloatingPanelContent.displayName = \"FloatingPanelContent\";\nFloatingPanelCloseButton.displayName = \"FloatingPanelCloseButton\";\n"],"names":["shadowWrapperStyle","FLOATING_PANEL_BORDER_RADIUS","FLOATING_PANEL_SHADOW","overflowWrapperStyle","innerStyle","FLOATING_PANEL_BORDER_COLOR","FLOATING_PANEL_SURFACE_COLOR","headerStyle","FLOATING_PANEL_GAP","FLOATING_PANEL_HEADER_PADDING_Y","FLOATING_PANEL_HEADER_PADDING_X","FLOATING_PANEL_SURFACE_2_COLOR","titleStyle","metaStyle","FLOATING_PANEL_MUTED_FG_COLOR","FLOATING_PANEL_META_FONT_SIZE","controlsStyle","FLOATING_PANEL_CONTROLS_GAP","closeButtonStyle","FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE","FLOATING_PANEL_CLOSE_BUTTON_PADDING","contentStyle","FLOATING_PANEL_CONTENT_PADDING","FloatingPanelFrame","React","propStyle","children","props","ref","combinedShadowStyle","combinedOverflowStyle","hasCustomBorderRadius","hasHeight","result","combinedInnerStyle","jsx","FloatingPanelHeader","combinedStyle","FloatingPanelTitle","FloatingPanelMeta","FloatingPanelControls","FloatingPanelContent","FloatingPanelCloseButton"],"mappings":"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"}

package/dist/FloatingPanelFrame-D9Cp2al1.cjs

@@ -0,0 +1,2 @@
+"use strict";const s=require("react/jsx-runtime"),E=require("react"),o=require("./styles-PsqGOEJP.cjs");function f(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const l=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,l.get?l:{enumerable:!0,get:()=>t[n]})}}return e.default=t,Object.freeze(e)}const a=f(E),h={borderRadius:o.FLOATING_PANEL_BORDER_RADIUS,boxShadow:o.FLOATING_PANEL_SHADOW},u={borderRadius:o.FLOATING_PANEL_BORDER_RADIUS,overflow:"hidden"},_={display:"flex",flexDirection:"column",borderRadius:o.FLOATING_PANEL_BORDER_RADIUS,border:`1px solid ${o.FLOATING_PANEL_BORDER_COLOR}`,background:o.FLOATING_PANEL_SURFACE_COLOR},T={display:"flex",alignItems:"center",gap:o.FLOATING_PANEL_GAP,padding:`${o.FLOATING_PANEL_HEADER_PADDING_Y} ${o.FLOATING_PANEL_HEADER_PADDING_X}`,borderBottom:`1px solid ${o.FLOATING_PANEL_BORDER_COLOR}`,background:o.FLOATING_PANEL_SURFACE_2_COLOR},y={fontWeight:600},I={marginLeft:"auto",color:o.FLOATING_PANEL_MUTED_FG_COLOR,fontSize:o.FLOATING_PANEL_META_FONT_SIZE},G={display:"flex",alignItems:"center",gap:o.FLOATING_PANEL_CONTROLS_GAP},C={border:"none",background:"transparent",cursor:"pointer",fontSize:o.FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE,padding:o.FLOATING_PANEL_CLOSE_BUTTON_PADDING,lineHeight:1},D={padding:o.FLOATING_PANEL_CONTENT_PADDING,overflow:"auto"},N=a.forwardRef(function({style:e,children:n,...l},c){const m=a.useMemo(()=>({...h,...e}),[e]),R=a.useMemo(()=>{const r=e?.borderRadius!==void 0,d=e?.height!==void 0;if(!r&&!d)return u;const i={...u};return r&&(i.borderRadius=e.borderRadius),d&&(i.height=e.height),i},[e?.borderRadius,e?.height]),b=a.useMemo(()=>{const r=e?.borderRadius!==void 0,d=e?.height!==void 0;if(!r&&!d)return _;const i={..._};return r&&(i.borderRadius=e.borderRadius),d&&(i.height=e.height),i},[e?.borderRadius,e?.height]);return s.jsx("div",{ref:c,style:m,...l,children:s.jsx("div",{style:R,children:s.jsx("div",{style:b,children:n})})})}),g=({style:t,...e})=>{const n=a.useMemo(()=>({...T,...t}),[t]);return s.jsx("div",{style:n,...e})},A=({style:t,...e})=>{const n=a.useMemo(()=>({...y,...t}),[t]);return s.jsx("span",{style:n,...e})},F=({style:t,...e})=>{const n=a.useMemo(()=>({...I,...t}),[t]);return s.jsx("span",{style:n,...e})},O=({style:t,...e})=>{const n=a.useMemo(()=>({...G,...t}),[t]);return s.jsx("div",{style:n,...e})},P=a.forwardRef(function({style:e,...n},l){const c=a.useMemo(()=>({...D,...e}),[e]);return s.jsx("div",{ref:l,style:c,...n})}),L=({style:t,...e})=>{const n=a.useMemo(()=>({...C,...t}),[t]);return s.jsx("button",{type:"button",style:n,...e,children:"×"})};N.displayName="FloatingPanelFrame";g.displayName="FloatingPanelHeader";A.displayName="FloatingPanelTitle";F.displayName="FloatingPanelMeta";O.displayName="FloatingPanelControls";P.displayName="FloatingPanelContent";L.displayName="FloatingPanelCloseButton";exports.FloatingPanelCloseButton=L;exports.FloatingPanelContent=P;exports.FloatingPanelControls=O;exports.FloatingPanelFrame=N;exports.FloatingPanelHeader=g;exports.FloatingPanelMeta=F;exports.FloatingPanelTitle=A;
+//# sourceMappingURL=FloatingPanelFrame-D9Cp2al1.cjs.map

package/dist/FloatingPanelFrame-D9Cp2al1.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanelFrame-D9Cp2al1.cjs","sources":["../src/components/paneling/FloatingPanelFrame.tsx"],"sourcesContent":["/**\n * @file Shared floating panel frame components for reusable overlay styling\n */\nimport * as React from \"react\";\nimport {\n  FLOATING_PANEL_BORDER_RADIUS,\n  FLOATING_PANEL_GAP,\n  FLOATING_PANEL_HEADER_PADDING_Y,\n  FLOATING_PANEL_HEADER_PADDING_X,\n  FLOATING_PANEL_CONTENT_PADDING,\n  FLOATING_PANEL_META_FONT_SIZE,\n  FLOATING_PANEL_CONTROLS_GAP,\n  FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE,\n  FLOATING_PANEL_CLOSE_BUTTON_PADDING,\n  FLOATING_PANEL_SURFACE_COLOR,\n  FLOATING_PANEL_SURFACE_2_COLOR,\n  FLOATING_PANEL_BORDER_COLOR,\n  FLOATING_PANEL_MUTED_FG_COLOR,\n  FLOATING_PANEL_SHADOW,\n} from \"../../constants/styles\";\n\nconst shadowWrapperStyle: React.CSSProperties = {\n  borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n  boxShadow: FLOATING_PANEL_SHADOW,\n};\n\nconst overflowWrapperStyle: React.CSSProperties = {\n  borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n  overflow: \"hidden\",\n};\n\nconst innerStyle: React.CSSProperties = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n  border: `1px solid ${FLOATING_PANEL_BORDER_COLOR}`,\n  background: FLOATING_PANEL_SURFACE_COLOR,\n};\n\nconst headerStyle: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: FLOATING_PANEL_GAP,\n  padding: `${FLOATING_PANEL_HEADER_PADDING_Y} ${FLOATING_PANEL_HEADER_PADDING_X}`,\n  borderBottom: `1px solid ${FLOATING_PANEL_BORDER_COLOR}`,\n  background: FLOATING_PANEL_SURFACE_2_COLOR,\n};\n\nconst titleStyle: React.CSSProperties = {\n  fontWeight: 600,\n};\n\nconst metaStyle: React.CSSProperties = {\n  marginLeft: \"auto\",\n  color: FLOATING_PANEL_MUTED_FG_COLOR,\n  fontSize: FLOATING_PANEL_META_FONT_SIZE,\n};\n\nconst controlsStyle: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: FLOATING_PANEL_CONTROLS_GAP,\n};\n\nconst closeButtonStyle: React.CSSProperties = {\n  border: \"none\",\n  background: \"transparent\",\n  cursor: \"pointer\",\n  fontSize: FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE,\n  padding: FLOATING_PANEL_CLOSE_BUTTON_PADDING,\n  lineHeight: 1,\n};\n\nconst contentStyle: React.CSSProperties = {\n  padding: FLOATING_PANEL_CONTENT_PADDING,\n  overflow: \"auto\",\n};\n\nexport type FloatingPanelFrameProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelFrame = React.forwardRef<HTMLDivElement, FloatingPanelFrameProps>(function FloatingPanelFrame(\n  { style: propStyle, children, ...props },\n  ref,\n) {\n  const combinedShadowStyle = React.useMemo(\n    () => ({ ...shadowWrapperStyle, ...propStyle }),\n    [propStyle],\n  );\n\n  const combinedOverflowStyle = React.useMemo(() => {\n    const hasCustomBorderRadius = propStyle?.borderRadius !== undefined;\n    const hasHeight = propStyle?.height !== undefined;\n\n    if (!hasCustomBorderRadius && !hasHeight) {\n      return overflowWrapperStyle;\n    }\n\n    const result: React.CSSProperties = { ...overflowWrapperStyle };\n    if (hasCustomBorderRadius) {\n      result.borderRadius = propStyle.borderRadius;\n    }\n    if (hasHeight) {\n      result.height = propStyle.height;\n    }\n    return result;\n  }, [propStyle?.borderRadius, propStyle?.height]);\n\n  const combinedInnerStyle = React.useMemo(() => {\n    const hasCustomBorderRadius = propStyle?.borderRadius !== undefined;\n    const hasHeight = propStyle?.height !== undefined;\n\n    if (!hasCustomBorderRadius && !hasHeight) {\n      return innerStyle;\n    }\n\n    const result: React.CSSProperties = { ...innerStyle };\n    if (hasCustomBorderRadius) {\n      result.borderRadius = propStyle.borderRadius;\n    }\n    if (hasHeight) {\n      result.height = propStyle.height;\n    }\n    return result;\n  }, [propStyle?.borderRadius, propStyle?.height]);\n\n  return (\n    <div ref={ref} style={combinedShadowStyle} {...props}>\n      <div style={combinedOverflowStyle}>\n        <div style={combinedInnerStyle}>{children}</div>\n      </div>\n    </div>\n  );\n});\n\nexport type FloatingPanelHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelHeader: React.FC<FloatingPanelHeaderProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...headerStyle, ...propStyle }), [propStyle]);\n  return <div style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelTitleProps = Omit<React.HTMLAttributes<HTMLSpanElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelTitle: React.FC<FloatingPanelTitleProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...titleStyle, ...propStyle }), [propStyle]);\n  return <span style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelMetaProps = Omit<React.HTMLAttributes<HTMLSpanElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelMeta: React.FC<FloatingPanelMetaProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...metaStyle, ...propStyle }), [propStyle]);\n  return <span style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelControlsProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelControls: React.FC<FloatingPanelControlsProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...controlsStyle, ...propStyle }), [propStyle]);\n  return <div style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelContent = React.forwardRef<HTMLDivElement, FloatingPanelContentProps>(\n  function FloatingPanelContent({ style: propStyle, ...props }, ref) {\n    const combinedStyle = React.useMemo(() => ({ ...contentStyle, ...propStyle }), [propStyle]);\n    return <div ref={ref} style={combinedStyle} {...props} />;\n  },\n);\n\nexport type FloatingPanelCloseButtonProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  \"className\" | \"style\" | \"children\"\n> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelCloseButton: React.FC<FloatingPanelCloseButtonProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...closeButtonStyle, ...propStyle }), [propStyle]);\n  return (\n    <button type=\"button\" style={combinedStyle} {...props}>\n      ×\n    </button>\n  );\n};\n\nFloatingPanelFrame.displayName = \"FloatingPanelFrame\";\nFloatingPanelHeader.displayName = \"FloatingPanelHeader\";\nFloatingPanelTitle.displayName = \"FloatingPanelTitle\";\nFloatingPanelMeta.displayName = \"FloatingPanelMeta\";\nFloatingPanelControls.displayName = \"FloatingPanelControls\";\nFloatingPanelContent.displayName = \"FloatingPanelContent\";\nFloatingPanelCloseButton.displayName = \"FloatingPanelCloseButton\";\n"],"names":["shadowWrapperStyle","FLOATING_PANEL_BORDER_RADIUS","FLOATING_PANEL_SHADOW","overflowWrapperStyle","innerStyle","FLOATING_PANEL_BORDER_COLOR","FLOATING_PANEL_SURFACE_COLOR","headerStyle","FLOATING_PANEL_GAP","FLOATING_PANEL_HEADER_PADDING_Y","FLOATING_PANEL_HEADER_PADDING_X","FLOATING_PANEL_SURFACE_2_COLOR","titleStyle","metaStyle","FLOATING_PANEL_MUTED_FG_COLOR","FLOATING_PANEL_META_FONT_SIZE","controlsStyle","FLOATING_PANEL_CONTROLS_GAP","closeButtonStyle","FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE","FLOATING_PANEL_CLOSE_BUTTON_PADDING","contentStyle","FLOATING_PANEL_CONTENT_PADDING","FloatingPanelFrame","React","propStyle","children","props","ref","combinedShadowStyle","combinedOverflowStyle","hasCustomBorderRadius","hasHeight","result","combinedInnerStyle","jsx","FloatingPanelHeader","combinedStyle","FloatingPanelTitle","FloatingPanelMeta","FloatingPanelControls","FloatingPanelContent","FloatingPanelCloseButton"],"mappings":"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"}