Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_styles_common = require("../styles/common.cjs");
const require_components_Icon_Icon = require("./Icon/Icon.cjs");
const require_styles_utils = require("../styles/utils.cjs");
const require_styles_tokens_spacing = require("../styles/tokens/spacing.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let react = require("react");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
//#region src/components/Collapsible.tsx
function Collapsible({ children, className, text, color, open, handleToggle, openIcon, closeIcon, full, buttonTextElement, contentIndent = true }) {
	const [isOpen, setIsOpen] = (0, react.useState)(open);
	const handleClick = () => {
		if (handleToggle) handleToggle(!isOpen);
		setIsOpen(!isOpen);
	};
	(0, react.useEffect)(() => {
		setIsOpen(open);
	}, [open]);
	const iconName = openIcon && closeIcon ? isOpen ? closeIcon : openIcon : "Chevron";
	const iconWidth = iconName === "Close" ? 12 : 14;
	let textElement = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {});
	if (buttonTextElement) textElement = buttonTextElement;
	else if (text) textElement = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Text, {
		color,
		children: text
	});
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(StyledCollapsible, {
		className,
		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(StyledCollapsibleButton, {
			onClick: handleClick,
			children: [textElement, /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(IconContainer, {
				isOpen,
				useCustomIcon: openIcon !== void 0 && closeIcon !== void 0,
				children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
					width: iconWidth,
					name: iconName
				})
			})]
		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CollapsingContainer, {
			isOpen,
			full,
			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(InnerPadding, {
				contentIndent,
				children
			})
		})]
	});
}
const StyledCollapsible = _emotion_styled.default.div`
  display: flex;
  flex-direction: column;
`;
const StyledCollapsibleButton = _emotion_styled.default.button`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  ${require_styles_common.standardBorderRadius(8)}
  padding: 0;
`;
const IconContainer = _emotion_styled.default.div`
  ${(props) => {
	if (props.useCustomIcon) return;
	return props.isOpen ? `transform: rotate(0deg);` : `transform: rotate(-90deg);`;
}}
  transition: transform 0.25s ease-out;
  width: 20px;
`;
const CollapsingContainer = _emotion_styled.default.div`
  overflow: scroll;
  opacity: 0;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;

  ${(props) => props.isOpen ? `height: 100%; animation-name: fadeIn;` : `height: 0; animation-name: fadeOut;`}
  ${(props) => props.full ? `height: ${props.isOpen ? "100vh" : 0};` : ""}

  ${require_styles_utils.overflowAutoWithoutScrollbars}

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
      transform: none;
    }
    to {
      opacity: 0;
      transform: translateY(-10px);
      visibility: hidden;
    }
  }
`;
const InnerPadding = _emotion_styled.default.div`
  padding: ${require_styles_tokens_spacing.Spacing.px["3xs"]} 0 ${require_styles_tokens_spacing.Spacing.px["3xs"]}
    ${(props) => props.contentIndent ? require_styles_tokens_spacing.Spacing.px.md : "0"};
  gap: ${require_styles_tokens_spacing.Spacing.px["4xs"]};
  display: flex;
  flex-direction: column;
`;
const Text = _emotion_styled.default.span`
  ${(props) => props.color ? `color: ${props.color};` : ""}
  line-height: inherit;
`;
//#endregion
exports.Collapsible = Collapsible;
exports.CollapsingContainer = CollapsingContainer;
exports.StyledCollapsible = StyledCollapsible;
exports.StyledCollapsibleButton = StyledCollapsibleButton;
