@twreporter/react-typescript-components 0.1.0-beta.10

package/lib/button-DFLYlJJW.js

@@ -0,0 +1,630 @@
+const require_chunk = require('./chunk-BxBTb9qk.js');
+const require_constants = require('./constants-BmxSMOOn.js');
+const require_constants$1 = require('./constants-K2ObjToq.js');
+const require_paragraph = require('./paragraph-CJvb0_cM.js');
+const require_theme = require('./theme-DDBlIbeS.js');
+let react = require("react");
+react = require_chunk.__toESM(react);
+let clsx = require("clsx");
+clsx = require_chunk.__toESM(clsx);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/button/components/text-button/theme.ts
+const getDisabledContainerTheme = (theme) => {
+	return ["text-gray-400 hover:text-gray-400", { "text-gray-500 hover:text-gray-500": theme === require_theme.THEME.photography || theme === require_theme.THEME.transparent }];
+};
+const getActiveContainerTheme = (theme, style) => {
+	return [
+		{
+			"text-gray-800 hover:text-gray-800": style === require_constants.STYLE.light,
+			"text-brand-heavy hover:text-brand-heavy": style === require_constants.STYLE.dark,
+			"text-brand-dark hover:text-brand-dark": style === require_constants.STYLE.brand
+		},
+		{
+			"text-gray-400 hover:text-gray-400": theme === require_theme.THEME.photography && style === require_constants.STYLE.light,
+			"text-supportive-pastel hover:text-supportive-pastel": theme === require_theme.THEME.photography && style !== require_constants.STYLE.light
+		},
+		{
+			"text-gray-black hover:text-gray-black": theme === require_theme.THEME.transparent && style === require_constants.STYLE.light,
+			"text-gray-200 hover:text-gray-200": theme === require_theme.THEME.transparent && style !== require_constants.STYLE.light
+		}
+	];
+};
+const getContainerTheme = (theme, style) => {
+	return [
+		{
+			"text-gray-600 hover:text-gray-800": style === require_constants.STYLE.light,
+			"text-gray-800 hover:text-brand-heavy": style === require_constants.STYLE.dark,
+			"text-brand-heavy hover:text-brand-dark": style === require_constants.STYLE.brand
+		},
+		{
+			"text-gray-300 hover:text-gray-400": theme === require_theme.THEME.photography && style === require_constants.STYLE.light,
+			"text-gray-white hover:text-supportive-pastel": theme === require_theme.THEME.photography && style === require_constants.STYLE.dark,
+			"text-supportive-faded hover:text-supportive-pastel": theme === require_theme.THEME.photography && style === require_constants.STYLE.brand
+		},
+		{
+			"text-gray-800 hover:text-gray-black": theme === require_theme.THEME.transparent && style === require_constants.STYLE.light,
+			"text-gray-white hover:text-gray-200": theme === require_theme.THEME.transparent && style !== require_constants.STYLE.light
+		}
+	];
+};
+
+//#endregion
+//#region src/button/components/text-button/index.tsx
+const TextButton = ({ text, leftIconComponent, rightIconComponent, size = require_constants.SIZE.s, theme = require_theme.THEME.normal, style = require_constants.STYLE.dark, active = false, disabled = false, loading = false, className = "" }) => {
+	const TextJSX = (0, react.useMemo)(() => size === require_constants.SIZE.s ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P2, {
+		text,
+		weight: require_paragraph.P2.Weight.bold
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P1, {
+		text,
+		weight: require_paragraph.P1.Weight.bold
+	}), [size, text]);
+	const themeClass = (0, react.useMemo)(() => {
+		return (disabled ? getDisabledContainerTheme : active ? getActiveContainerTheme : getContainerTheme)(theme, style);
+	}, [
+		disabled,
+		active,
+		theme,
+		style
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("flex items-center", {
+			"cursor-default": disabled,
+			"cursor-pointer": !disabled
+		}, themeClass, className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative flex justify-center items-center",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, clsx.default)("flex justify-center items-center", {
+					"opacity-0": loading,
+					"opacity-100": !loading
+				}),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex items-center mr-[4px]",
+						children: leftIconComponent
+					}),
+					TextJSX,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex items-center ml-[4px]",
+						children: rightIconComponent
+					})
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: (0, clsx.default)("inline-block absolute box-border animate-spin", "border-2 border-solid border-gray-400 border-t-gray-600 rounded-[50%]", {
+				"size-[18px]": size === require_constants.SIZE.s,
+				"size-[24px]": size === require_constants.SIZE.l
+			}, {
+				"opacity-0": !loading,
+				"opacity-100": loading
+			}) })]
+		})
+	});
+};
+TextButton.Size = require_constants.SIZE;
+TextButton.Style = require_constants.STYLE;
+TextButton.Theme = require_theme.THEME;
+var text_button_default = TextButton;
+
+//#endregion
+//#region src/button/components/icon-button/theme.ts
+const getPrimaryIconButtonTheme = (theme, active, disabled) => {
+	if (disabled) return ["text-gray-400 hover:text-gray-400"];
+	return [
+		"text-gray-600 hover:text-gray-800 [&>svg]:bg-gray-600 desktop:[&>svg]:hover:bg-gray-800",
+		{ "text-brand-heavy hover:text-brand-heavy [&>svg]:bg-brand-heavy desktop:[&>svg]:hover:bg-brand-heavy": theme === require_theme.THEME.normal && active },
+		{
+			"text-gray-white hover:text-supportive-pastel [&>svg]:bg-gray-white [&>svg]:hover:bg-supportive-pastel": theme === require_theme.THEME.photography && !active,
+			"text-supportive-pastel hover:text-supportive-pastel [&>svg]:bg-supportive-pastel [&>svg]:hover:bg-supportive-pastel": theme === require_theme.THEME.photography && active
+		},
+		{
+			"text-gray-white hover:text-gray-200 [&>svg]:bg-gray-white [&>svg]:hover:bg-gray-200": theme === require_theme.THEME.transparent && !active,
+			"text-gray-white hover:text-gray-white [&>svg]:bg-gray-white [&>svg]:hover:bg-gray-white": theme === require_theme.THEME.transparent && active
+		}
+	];
+};
+const getSecondaryIconButtonTheme = (theme, active, disabled) => {
+	if (disabled) return ["text-gray-400 hover:text-gray-400"];
+	return [
+		"text-gray-400 hover:text-gray-600 [&>svg]:bg-gray-400 [&>svg]:hover:bg-gray-600",
+		{ "text-brand-heavy hover:text-brand-heavy [&>svg]:bg-brand-heavy [&>svg]:hover:bg-brand-heavy": theme === require_theme.THEME.normal && active },
+		{
+			"text-gray-400 hover:text-supportive-pastel [&>svg]:bg-gray-400 [&>svg]:hover:bg-supportive-pastel": theme === require_theme.THEME.photography && !active,
+			"text-supportive-pastel hover:text-supportive-pastel [&>svg]:bg-supportive-pastel [&>svg]:hover:bg-supportive-pastel": theme === require_theme.THEME.photography && active
+		},
+		{
+			"text-gray-600 hover:text-gray-white [&>svg]:bg-gray-600 [&>svg]:hover:bg-gray-white": theme === require_theme.THEME.transparent && !active,
+			"text-gray-600 hover:text-gray-600 [&>svg]:bg-gray-600 [&>svg]:hover:bg-gray-600": theme === require_theme.THEME.transparent && active
+		}
+	];
+};
+
+//#endregion
+//#region src/button/components/icon-button/index.tsx
+const IconButton = ({ iconComponent, theme = require_theme.THEME.normal, type = require_constants.TYPE.primary, disabled = false, active = false, className = "", onClick = () => {} }) => {
+	const themeClass = type === require_constants.TYPE.primary ? getPrimaryIconButtonTheme(theme, active, disabled) : getSecondaryIconButtonTheme(theme, active, disabled);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		className: (0, clsx.default)("flex", "[&>svg]:w-[24px] [&>svg]:h-[24px]", disabled ? "cursor-default" : "cursor-pointer", themeClass, className),
+		onClick: disabled ? () => {} : onClick,
+		type: "button",
+		children: iconComponent
+	});
+};
+IconButton.Theme = require_theme.THEME;
+IconButton.Type = require_constants.TYPE;
+var icon_button_default = IconButton;
+
+//#endregion
+//#region src/button/components/menu-button/index.tsx
+const MenuButton = ({ text, color, fontWeight, className = "", p1ClassName = "" }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("cursor-pointer", color, className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P1, {
+			text,
+			weight: fontWeight,
+			className: (0, clsx.default)("py-[8px]", p1ClassName)
+		})
+	});
+};
+MenuButton.FontWeight = require_constants$1.WEIGHT;
+var menu_button_default = MenuButton;
+
+//#endregion
+//#region src/button/components/pill-button/theme.ts
+const getFilledPillButtonTheme = (theme, disabled, style) => {
+	if (disabled) switch (theme) {
+		case require_theme.THEME.transparent: switch (style) {
+			case require_constants.STYLE.light: return {
+				color: "text-gray-white",
+				bgColor: "bg-gray-400",
+				hoverColor: "hover:text-gray-white",
+				hoverBgColor: "hover:bg-gray-400",
+				borderColor: "border-gray-400",
+				svgBgColor: "[&>svg]:bg-gray-white",
+				borderHoverColor: "hover:border-gray-400",
+				svgHoverBgColor: "hover:[&>svg]:bg-gray-white"
+			};
+			default: return {
+				color: "text-gray-700",
+				bgColor: "bg-gray-500",
+				hoverColor: "hover:text-gray-700",
+				hoverBgColor: "hover:bg-gray-500",
+				borderColor: "border-gray-500",
+				svgBgColor: "[&>svg]:bg-gray-700",
+				borderHoverColor: "hover:border-gray-500",
+				svgHoverBgColor: "hover:[&>svg]:bg-gray-500"
+			};
+		}
+		case require_theme.THEME.photography: return {
+			color: "text-gray-700",
+			bgColor: "bg-gray-500",
+			hoverColor: "hover:text-gray-700",
+			hoverBgColor: "hover:bg-gray-500",
+			borderColor: "border-gray-500",
+			svgBgColor: "[&>svg]:bg-gray-700",
+			borderHoverColor: "hover:border-gray-500",
+			svgHoverBgColor: "hover:[&>svg]:bg-gray-700"
+		};
+		default: return {
+			color: "text-gray-white",
+			bgColor: "bg-gray-400",
+			hoverColor: "hover:text-gray-white",
+			hoverBgColor: "hover:bg-gray-400",
+			borderColor: "border-gray-400",
+			svgBgColor: "[&>svg]:bg-gray-white",
+			borderHoverColor: "hover:border-gray-400",
+			svgHoverBgColor: "hover:[&>svg]:bg-gray-white"
+		};
+	}
+	switch (theme) {
+		case require_theme.THEME.photography: switch (style) {
+			case require_constants.STYLE.dark: return {
+				color: "text-photo-dark",
+				bgColor: "bg-gray-white",
+				hoverColor: "hover:text-photo-dark",
+				hoverBgColor: "hover:bg-gray-200",
+				borderColor: "border-gray-white",
+				svgBgColor: "[&>svg]:bg-photo-dark",
+				borderHoverColor: "hover:border-gray-200",
+				svgHoverBgColor: "hover:[&>svg]:bg-photo-dark"
+			};
+			case require_constants.STYLE.light: return {
+				color: "text-photo-dark",
+				bgColor: "bg-gray-300",
+				hoverColor: "hover:text-photo-dark",
+				hoverBgColor: "hover:bg-gray-400",
+				borderColor: "border-gray-300",
+				svgBgColor: "[&>svg]:bg-photo-dark",
+				borderHoverColor: "hover:border-gray-400",
+				svgHoverBgColor: "hover:[&>svg]:bg-photo-dark"
+			};
+			default: return {
+				color: "text-photo-dark",
+				bgColor: "bg-supportive-faded",
+				hoverColor: "hover:text-photo-dark",
+				hoverBgColor: "hover:bg-supportive-pastel",
+				borderColor: "border-supportive-faded",
+				svgBgColor: "[&>svg]:bg-photo-dark",
+				borderHoverColor: "hover:border-supportive-pastel",
+				svgHoverBgColor: "hover:[&>svg]:bg-photo-dark"
+			};
+		}
+		case require_theme.THEME.transparent: switch (style) {
+			case require_constants.STYLE.dark: return {
+				color: "text-gray-800",
+				bgColor: "bg-gray-300",
+				hoverColor: "hover:text-gray-800",
+				hoverBgColor: "hover:bg-gray-400",
+				borderColor: "border-gray-300",
+				svgBgColor: "[&>svg]:bg-gray-800",
+				borderHoverColor: "hover:border-gray-400",
+				svgHoverBgColor: "hover:[&>svg]:bg-gray-800"
+			};
+			case require_constants.STYLE.light: return {
+				color: "text-gray-white",
+				bgColor: "bg-gray-800",
+				hoverColor: "hover:text-gray-white",
+				hoverBgColor: "hover:bg-gray-black",
+				borderColor: "border-gray-800",
+				svgBgColor: "[&>svg]:bg-gray-white",
+				borderHoverColor: "hover:border-gray-black",
+				svgHoverBgColor: "hover:[&>svg]:bg-gray-white"
+			};
+			default: return {
+				color: "text-gray-800",
+				bgColor: "bg-gray-white",
+				hoverColor: "hover:text-gray-800",
+				hoverBgColor: "hover:bg-gray-200",
+				borderColor: "border-gray-white",
+				svgBgColor: "[&>svg]:bg-gray-800",
+				borderHoverColor: "hover:border-gray-200",
+				svgHoverBgColor: "hover:[&>svg]:bg-gray-800"
+			};
+		}
+		default: switch (style) {
+			case require_constants.STYLE.dark: return {
+				color: "text-gray-white",
+				bgColor: "bg-gray-800",
+				hoverColor: "hover:text-gray-white",
+				hoverBgColor: "hover:bg-gray-black",
+				borderColor: "border-gray-800",
+				svgBgColor: "[&>svg]:bg-gray-white",
+				borderHoverColor: "hover:border-gray-black",
+				svgHoverBgColor: "hover:[&>svg]:bg-gray-white"
+			};
+			case require_constants.STYLE.light: return {
+				color: "text-gray-800",
+				bgColor: "bg-gray-white",
+				hoverColor: "hover:text-gray-800",
+				hoverBgColor: "hover:bg-gray-200",
+				borderColor: "border-gray-white",
+				svgBgColor: "[&>svg]:bg-gray-800",
+				borderHoverColor: "hover:border-gray-200",
+				svgHoverBgColor: "hover:[&>svg]:bg-gray-800"
+			};
+			default: return {
+				color: "text-gray-white",
+				bgColor: "bg-brand-heavy",
+				hoverColor: "hover:text-gray-white",
+				hoverBgColor: "hover:bg-brand-dark",
+				borderColor: "border-brand-heavy",
+				svgBgColor: "[&>svg]:bg-gray-white",
+				borderHoverColor: "hover:border-brand-dark",
+				svgHoverBgColor: "hover:[&>svg]:bg-gray-white"
+			};
+		}
+	}
+};
+const getOutlinePillButtonTheme = (theme, disabled, style) => {
+	if (disabled) switch (theme) {
+		case require_theme.THEME.transparent: switch (style) {
+			case require_constants.STYLE.light: return {
+				color: "text-gray-400",
+				bgColor: "bg-gray-400",
+				hoverColor: "hover:text-gray-400",
+				hoverBgColor: "hover:bg-gray-400",
+				borderColor: "border-gray-400",
+				svgBgColor: "[&>svg]:bg-gray-400",
+				borderHoverColor: "hover:border-gray-400",
+				svgHoverBgColor: "hover:[&>svg]:bg-gray-400"
+			};
+			default: return {
+				color: "text-gray-500",
+				bgColor: "bg-gray-500",
+				hoverColor: "hover:text-gray-500",
+				hoverBgColor: "hover:bg-gray-500",
+				borderColor: "border-gray-500",
+				svgBgColor: "[&>svg]:bg-gray-500",
+				borderHoverColor: "hover:border-gray-500",
+				svgHoverBgColor: "hover:[&>svg]:bg-gray-500"
+			};
+		}
+		case require_theme.THEME.photography: return {
+			color: "text-gray-500",
+			bgColor: "bg-gray-500",
+			hoverColor: "hover:text-gray-500",
+			hoverBgColor: "hover:bg-gray-500",
+			borderColor: "border-gray-500",
+			svgBgColor: "[&>svg]:bg-gray-500",
+			borderHoverColor: "hover:border-gray-500",
+			svgHoverBgColor: "hover:[&>svg]:bg-gray-500"
+		};
+		default: return {
+			color: "text-gray-400",
+			bgColor: "bg-gray-400",
+			hoverColor: "hover:text-gray-400",
+			hoverBgColor: "hover:bg-gray-400",
+			borderColor: "border-gray-400",
+			svgBgColor: "[&>svg]:bg-gray-400",
+			borderHoverColor: "hover:border-gray-400",
+			svgHoverBgColor: "hover:[&>svg]:bg-gray-400"
+		};
+	}
+	switch (theme) {
+		case require_theme.THEME.photography: switch (style) {
+			case require_constants.STYLE.dark: return {
+				color: "text-gray-white",
+				bgColor: "bg-gray-white",
+				hoverColor: "hover:text-gray-200",
+				hoverBgColor: "hover:bg-gray-200",
+				borderColor: "border-gray-white",
+				svgBgColor: "[&>svg]:bg-gray-white",
+				borderHoverColor: "hover:border-gray-200",
+				svgHoverBgColor: "hover:[&>svg]:bg-gray-200"
+			};
+			case require_constants.STYLE.light: return {
+				color: "text-gray-300",
+				bgColor: "bg-gray-300",
+				hoverColor: "hover:text-gray-400",
+				hoverBgColor: "hover:bg-gray-400",
+				borderColor: "border-gray-300",
+				svgBgColor: "[&>svg]:bg-gray-300",
+				borderHoverColor: "hover:border-gray-400",
+				svgHoverBgColor: "hover:[&>svg]:bg-gray-400"
+			};
+			default: return {
+				color: "text-supportive-faded",
+				bgColor: "bg-supportive-faded",
+				hoverColor: "hover:text-supportive-pastel",
+				hoverBgColor: "hover:bg-supportive-pastel",
+				borderColor: "border-supportive-faded",
+				svgBgColor: "[&>svg]:bg-supportive-faded",
+				borderHoverColor: "hover:border-supportive-pastel",
+				svgHoverBgColor: "hover:[&>svg]:bg-supportive-pastel"
+			};
+		}
+		case require_theme.THEME.transparent: switch (style) {
+			case require_constants.STYLE.dark: return {
+				color: "text-gray-300",
+				bgColor: "bg-gray-300",
+				hoverColor: "hover:text-gray-400",
+				hoverBgColor: "hover:bg-gray-400",
+				borderColor: "border-gray-300",
+				svgBgColor: "[&>svg]:bg-gray-300",
+				borderHoverColor: "hover:border-gray-400",
+				svgHoverBgColor: "hover:[&>svg]:bg-gray-400"
+			};
+			case require_constants.STYLE.light: return {
+				color: "text-gray-800",
+				bgColor: "bg-gray-800",
+				hoverColor: "hover:text-gray-black",
+				hoverBgColor: "hover:bg-gray-black",
+				borderColor: "border-gray-800",
+				svgBgColor: "[&>svg]:bg-gray-800",
+				borderHoverColor: "hover:border-gray-black",
+				svgHoverBgColor: "hover:[&>svg]:bg-gray-black"
+			};
+			default: return {
+				color: "text-gray-white",
+				bgColor: "bg-gray-white",
+				hoverColor: "hover:text-gray-200",
+				hoverBgColor: "hover:bg-gray-200",
+				borderColor: "border-gray-white",
+				svgBgColor: "[&>svg]:bg-gray-white",
+				borderHoverColor: "hover:border-gray-200",
+				svgHoverBgColor: "hover:[&>svg]:bg-gray-200"
+			};
+		}
+		default: switch (style) {
+			case require_constants.STYLE.dark: return {
+				color: "text-gray-800",
+				bgColor: "bg-gray-800",
+				hoverColor: "hover:text-gray-black",
+				hoverBgColor: "hover:bg-gray-black",
+				borderColor: "border-gray-800",
+				svgBgColor: "[&>svg]:bg-gray-800",
+				borderHoverColor: "hover:border-gray-black",
+				svgHoverBgColor: "hover:[&>svg]:bg-gray-black"
+			};
+			case require_constants.STYLE.light: return {
+				color: "text-gray-800",
+				bgColor: "bg-gray-white",
+				hoverColor: "hover:text-gray-800",
+				hoverBgColor: "hover:bg-gray-200",
+				borderColor: "border-gray-white",
+				svgBgColor: "[&>svg]:bg-gray-800",
+				borderHoverColor: "hover:border-gray-200",
+				svgHoverBgColor: "hover:[&>svg]:bg-gray-800"
+			};
+			default: return {
+				color: "text-brand-heavy",
+				bgColor: "bg-brand-heavy",
+				hoverColor: "hover:text-brand-dark",
+				hoverBgColor: "hover:bg-brand-dark",
+				borderColor: "border-brand-heavy",
+				svgBgColor: "[&>svg]:bg-brand-heavy",
+				borderHoverColor: "hover:border-brand-dark",
+				svgHoverBgColor: "hover:[&>svg]:bg-brand-dark"
+			};
+		}
+	}
+};
+
+//#endregion
+//#region src/button/components/pill-button/index.tsx
+const PillButton = ({ text = "", leftIconComponent = null, rightIconComponent = null, size = require_constants.SIZE.s, theme = require_theme.THEME.normal, type = require_constants.TYPE.primary, style = require_constants.STYLE.brand, disabled = false, loading = false, className = "" }) => {
+	const { color, bgColor, hoverColor, hoverBgColor, borderColor, svgBgColor, borderHoverColor, svgHoverBgColor } = (type === require_constants.TYPE.primary ? getFilledPillButtonTheme : getOutlinePillButtonTheme)(theme, disabled, style);
+	const padding = size === require_constants.SIZE.s ? "py-[4px] px-[12px]" : "py-[8px] px-[16px]";
+	const iconSize = size === require_constants.SIZE.s ? "[&>svg]:h-[18px] [&>svg]:w-[18px]" : "[&>svg]:h-[24px] [&>svg]:w-[24px]";
+	const TextJSX = (0, react.useMemo)(() => size === require_constants.SIZE.s ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P2, {
+		text,
+		weight: require_paragraph.P2.Weight.bold
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P1, {
+		text,
+		weight: require_paragraph.P1.Weight.bold
+	}), [size, text]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("w-fit flex items-center rounded-[40px] border-solid border-[1.5px]", borderColor, color, padding, disabled || loading ? "cursor-not-allowed" : "cursor-pointer", type === require_constants.TYPE.primary ? bgColor : "bg-transparent", iconSize, svgBgColor, hoverColor, type === require_constants.TYPE.primary ? hoverBgColor : "bg-transparent", borderHoverColor, svgHoverBgColor, className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative flex justify-center items-center",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, clsx.default)("flex justify-center items-center", {
+					"opacity-0": loading,
+					"opacity-100": !loading
+				}),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex items-center mr-[4px]",
+						children: leftIconComponent
+					}),
+					TextJSX,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex items-center ml-[4px]",
+						children: rightIconComponent
+					})
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: (0, clsx.default)("inline-block absolute box-border animate-spin", "border-2 border-solid border-gray-400 border-t-gray-600 rounded-[50%]", {
+				"size-[18px]": size === require_constants.SIZE.s,
+				"size-[24px]": size === require_constants.SIZE.l
+			}, {
+				"opacity-0": !loading,
+				"opacity-100": loading
+			}) })]
+		})
+	});
+};
+PillButton.Theme = require_theme.THEME;
+PillButton.Type = require_constants.TYPE;
+PillButton.Size = require_constants.SIZE;
+PillButton.Style = require_constants.STYLE;
+var pill_button_default = PillButton;
+
+//#endregion
+//#region src/button/components/icon-with-text-button/theme.ts
+const getIconWithTextButtonTheme = (theme, isActive, isDisabled) => {
+	if (isDisabled) return {
+		color: "text-gray-400",
+		hoverColor: "hover:text-gray-400",
+		svgBgColor: "[&>svg]:bg-gray-400",
+		svgHoverBgColor: "[&>svg]:hover:bg-gray-400"
+	};
+	switch (isActive ? `${theme}-active` : theme) {
+		case require_theme.THEME.photography: return {
+			color: "text-gray-200",
+			hoverColor: "hover:text-supportive-pastel",
+			svgBgColor: "[&>svg]:bg-gray-200",
+			svgHoverBgColor: "[&>svg]:hover:bg-supportive-pastel"
+		};
+		case `${require_theme.THEME.photography}-active`: return {
+			color: "text-supportive-pastel",
+			hoverColor: "hover:text-supportive-pastel",
+			svgBgColor: "[&>svg]:bg-supportive-pastel",
+			svgHoverBgColor: "[&>svg]:hover:bg-supportive-pastel"
+		};
+		case require_theme.THEME.transparent: return {
+			color: "text-gray-100",
+			hoverColor: "hover:text-gray-200",
+			svgBgColor: "[&>svg]:bg-gray-100",
+			svgHoverBgColor: "[&>svg]:hover:bg-gray-200"
+		};
+		case `${require_theme.THEME.transparent}-active`: return {
+			color: "text-gray-white",
+			hoverColor: "hover:text-gray-white",
+			svgBgColor: "[&>svg]:bg-gray-white",
+			svgHoverBgColor: "[&>svg]:hover:bg-gray-white"
+		};
+		case `${require_theme.THEME.normal}-active`: return {
+			color: "text-brand-heavy",
+			hoverColor: "hover:text-brand-heavy",
+			svgBgColor: "[&>svg]:bg-brand-heavy",
+			svgHoverBgColor: "[&>svg]:hover:bg-brand-heavy"
+		};
+		default: return {
+			color: "text-gray-600",
+			hoverColor: "hover:text-brand-heavy",
+			svgBgColor: "[&>svg]:bg-gray-600",
+			svgHoverBgColor: "[&>svg]:hover:bg-brand-heavy"
+		};
+	}
+};
+
+//#endregion
+//#region src/button/components/icon-with-text-button/index.tsx
+const IconWithTextButton = ({ text = "", iconComponent, theme = require_theme.THEME.normal, disabled = false, active = false, hideText = false, className = "", onClick = () => {} }) => {
+	const { color, hoverColor, svgBgColor, svgHoverBgColor } = getIconWithTextButtonTheme(theme, active, disabled);
+	const handleClick = (e) => {
+		if (disabled) return;
+		onClick(e);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		className: (0, clsx.default)("flex flex-col items-center", "[&>svg]:w-[24px] [&>svg]:h-[24px]", color, hoverColor, svgBgColor, svgHoverBgColor, disabled ? "cursor-not-allowed" : "cursor-pointer", className),
+		type: "button",
+		onClick: handleClick,
+		children: [iconComponent, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P4, {
+			text,
+			weight: require_paragraph.P4.Weight.normal,
+			className: (0, clsx.default)("mt-[2px] transition-opacity duration-[100ms]", hideText ? "opacity-0" : "opacity-100", hideText ? "max-h-0" : "max-h-none")
+		})]
+	});
+};
+IconWithTextButton.Theme = require_theme.THEME;
+var icon_with_text_button_default = IconWithTextButton;
+
+//#endregion
+//#region src/button/index.ts
+var button_default = {
+	TextButton: text_button_default,
+	IconButton: icon_button_default,
+	MenuButton: menu_button_default,
+	PillButton: pill_button_default,
+	IconWithTextButton: icon_with_text_button_default
+};
+
+//#endregion
+Object.defineProperty(exports, 'button_default', {
+  enumerable: true,
+  get: function () {
+    return button_default;
+  }
+});
+Object.defineProperty(exports, 'icon_button_default', {
+  enumerable: true,
+  get: function () {
+    return icon_button_default;
+  }
+});
+Object.defineProperty(exports, 'icon_with_text_button_default', {
+  enumerable: true,
+  get: function () {
+    return icon_with_text_button_default;
+  }
+});
+Object.defineProperty(exports, 'menu_button_default', {
+  enumerable: true,
+  get: function () {
+    return menu_button_default;
+  }
+});
+Object.defineProperty(exports, 'pill_button_default', {
+  enumerable: true,
+  get: function () {
+    return pill_button_default;
+  }
+});
+Object.defineProperty(exports, 'text_button_default', {
+  enumerable: true,
+  get: function () {
+    return text_button_default;
+  }
+});
+//# sourceMappingURL=button-DFLYlJJW.js.map