Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_components_Icon_Icon = require("./Icon/Icon.cjs");
const require_components_UnstyledButton = require("./UnstyledButton.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
//#region src/components/SidePanel.tsx
function SidePanel({ children, visible, onClose }) {
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(StyledSidePanel, {
		visible,
		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_UnstyledButton.UnstyledButton, {
			onClick: onClose,
			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
				name: "Close",
				width: 14,
				color: "white"
			})
		}), children]
	});
}
const StyledSidePanel = _emotion_styled.default.div`
  background-color: rgba(0, 0, 0, 1);
  width: 356px;
  position: fixed;
  overflow: auto;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  ${({ visible }) => visible && "transform: translateX(0%);"}

  button {
    position: absolute;
    right: 20px;
    top: 20px;
  }
`;
//#endregion
exports.SidePanel = SidePanel;
