@twreporter/react-typescript-components 0.1.0-beta.22 → 0.1.0-beta.24

package/lib/button-D_AWI7r9.mjs

@@ -1,597 +0,0 @@
-import { SIZE, STYLE, TYPE } from "./constants-oTHAnh6r.mjs";
-import { WEIGHT } from "./constants-CBSEPx91.mjs";
-import { P1, P2, P4 } from "./paragraph-Cf9jr8RF.mjs";
-import { THEME } from "./theme-BG6yZVj-.mjs";
-import { useMemo } from "react";
-import clsx from "clsx";
-import { jsx, jsxs } from "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 === THEME.photography || theme === THEME.transparent }];
-};
-const getActiveContainerTheme = (theme, style) => {
-	return [
-		{
-			"text-gray-800 hover:text-gray-800": style === STYLE.light,
-			"text-brand-heavy hover:text-brand-heavy": style === STYLE.dark,
-			"text-brand-dark hover:text-brand-dark": style === STYLE.brand
-		},
-		{
-			"text-gray-400 hover:text-gray-400": theme === THEME.photography && style === STYLE.light,
-			"text-supportive-pastel hover:text-supportive-pastel": theme === THEME.photography && style !== STYLE.light
-		},
-		{
-			"text-gray-black hover:text-gray-black": theme === THEME.transparent && style === STYLE.light,
-			"text-gray-200 hover:text-gray-200": theme === THEME.transparent && style !== STYLE.light
-		}
-	];
-};
-const getContainerTheme = (theme, style) => {
-	return [
-		{
-			"text-gray-600 hover:text-gray-800": style === STYLE.light,
-			"text-gray-800 hover:text-brand-heavy": style === STYLE.dark,
-			"text-brand-heavy hover:text-brand-dark": style === STYLE.brand
-		},
-		{
-			"text-gray-300 hover:text-gray-400": theme === THEME.photography && style === STYLE.light,
-			"text-gray-white hover:text-supportive-pastel": theme === THEME.photography && style === STYLE.dark,
-			"text-supportive-faded hover:text-supportive-pastel": theme === THEME.photography && style === STYLE.brand
-		},
-		{
-			"text-gray-800 hover:text-gray-black": theme === THEME.transparent && style === STYLE.light,
-			"text-gray-white hover:text-gray-200": theme === THEME.transparent && style !== STYLE.light
-		}
-	];
-};
-
-//#endregion
-//#region src/button/components/text-button/index.tsx
-const TextButton = ({ text, leftIconComponent, rightIconComponent, size = SIZE.s, theme = THEME.normal, style = STYLE.dark, active = false, disabled = false, loading = false, className = "" }) => {
-	const TextJSX = useMemo(() => size === SIZE.s ? /* @__PURE__ */ jsx(P2, {
-		text,
-		weight: P2.Weight.bold
-	}) : /* @__PURE__ */ jsx(P1, {
-		text,
-		weight: P1.Weight.bold
-	}), [size, text]);
-	const themeClass = useMemo(() => {
-		return (disabled ? getDisabledContainerTheme : active ? getActiveContainerTheme : getContainerTheme)(theme, style);
-	}, [
-		disabled,
-		active,
-		theme,
-		style
-	]);
-	return /* @__PURE__ */ jsx("div", {
-		className: clsx("flex items-center", {
-			"cursor-default": disabled,
-			"cursor-pointer": !disabled
-		}, themeClass, className),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "relative flex justify-center items-center",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: clsx("flex justify-center items-center", {
-					"opacity-0": loading,
-					"opacity-100": !loading
-				}),
-				children: [
-					/* @__PURE__ */ jsx("div", {
-						className: "flex items-center mr-[4px]",
-						children: leftIconComponent
-					}),
-					TextJSX,
-					/* @__PURE__ */ jsx("div", {
-						className: "flex items-center ml-[4px]",
-						children: rightIconComponent
-					})
-				]
-			}), /* @__PURE__ */ jsx("span", { className: clsx("inline-block absolute box-border animate-spin", "border-2 border-solid border-gray-400 border-t-gray-600 rounded-[50%]", {
-				"size-[18px]": size === SIZE.s,
-				"size-[24px]": size === SIZE.l
-			}, {
-				"opacity-0": !loading,
-				"opacity-100": loading
-			}) })]
-		})
-	});
-};
-TextButton.Size = SIZE;
-TextButton.Style = STYLE;
-TextButton.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 === THEME.normal && active },
-		{
-			"text-gray-white hover:text-supportive-pastel [&>svg]:bg-gray-white [&>svg]:hover:bg-supportive-pastel": theme === THEME.photography && !active,
-			"text-supportive-pastel hover:text-supportive-pastel [&>svg]:bg-supportive-pastel [&>svg]:hover:bg-supportive-pastel": theme === THEME.photography && active
-		},
-		{
-			"text-gray-white hover:text-gray-200 [&>svg]:bg-gray-white [&>svg]:hover:bg-gray-200": theme === THEME.transparent && !active,
-			"text-gray-white hover:text-gray-white [&>svg]:bg-gray-white [&>svg]:hover:bg-gray-white": 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 === THEME.normal && active },
-		{
-			"text-gray-400 hover:text-supportive-pastel [&>svg]:bg-gray-400 [&>svg]:hover:bg-supportive-pastel": theme === THEME.photography && !active,
-			"text-supportive-pastel hover:text-supportive-pastel [&>svg]:bg-supportive-pastel [&>svg]:hover:bg-supportive-pastel": theme === THEME.photography && active
-		},
-		{
-			"text-gray-600 hover:text-gray-white [&>svg]:bg-gray-600 [&>svg]:hover:bg-gray-white": theme === THEME.transparent && !active,
-			"text-gray-600 hover:text-gray-600 [&>svg]:bg-gray-600 [&>svg]:hover:bg-gray-600": theme === THEME.transparent && active
-		}
-	];
-};
-
-//#endregion
-//#region src/button/components/icon-button/index.tsx
-const IconButton = ({ iconComponent, theme = THEME.normal, type = TYPE.primary, disabled = false, active = false, className = "", onClick = () => {} }) => {
-	const themeClass = type === TYPE.primary ? getPrimaryIconButtonTheme(theme, active, disabled) : getSecondaryIconButtonTheme(theme, active, disabled);
-	const handleClick = (e) => {
-		if (disabled) return;
-		e.stopPropagation();
-		onClick(e);
-	};
-	return /* @__PURE__ */ jsx("button", {
-		className: clsx("flex", "[&>svg]:w-[24px] [&>svg]:h-[24px]", disabled ? "cursor-default" : "cursor-pointer", themeClass, className),
-		onClick: handleClick,
-		type: "button",
-		children: iconComponent
-	});
-};
-IconButton.Theme = THEME;
-IconButton.Type = TYPE;
-var icon_button_default = IconButton;
-
-//#endregion
-//#region src/button/components/menu-button/index.tsx
-const MenuButton = ({ text, color, fontWeight, className = "", p1ClassName = "" }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: clsx("cursor-pointer", color, className),
-		children: /* @__PURE__ */ jsx(P1, {
-			text,
-			weight: fontWeight,
-			className: clsx("py-[8px]", p1ClassName)
-		})
-	});
-};
-MenuButton.FontWeight = 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 THEME.transparent: switch (style) {
-			case 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 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 THEME.photography: switch (style) {
-			case 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 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 THEME.transparent: switch (style) {
-			case 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 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 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 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 THEME.transparent: switch (style) {
-			case 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 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 THEME.photography: switch (style) {
-			case 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 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 THEME.transparent: switch (style) {
-			case 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 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 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 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 = SIZE.s, theme = THEME.normal, type = TYPE.primary, style = STYLE.brand, disabled = false, loading = false, className = "" }) => {
-	const { color, bgColor, hoverColor, hoverBgColor, borderColor, svgBgColor, borderHoverColor, svgHoverBgColor } = (type === TYPE.primary ? getFilledPillButtonTheme : getOutlinePillButtonTheme)(theme, disabled, style);
-	const padding = size === SIZE.s ? "py-[4px] px-[12px]" : "py-[8px] px-[16px]";
-	const iconSize = size === SIZE.s ? "[&>svg]:h-[18px] [&>svg]:w-[18px]" : "[&>svg]:h-[24px] [&>svg]:w-[24px]";
-	const TextJSX = useMemo(() => size === SIZE.s ? /* @__PURE__ */ jsx(P2, {
-		text,
-		weight: P2.Weight.bold
-	}) : /* @__PURE__ */ jsx(P1, {
-		text,
-		weight: P1.Weight.bold
-	}), [size, text]);
-	return /* @__PURE__ */ jsx("div", {
-		className: clsx("w-fit flex items-center rounded-[40px] border-solid border-[1.5px]", borderColor, color, padding, disabled || loading ? "cursor-not-allowed" : "cursor-pointer", type === TYPE.primary ? bgColor : "bg-transparent", iconSize, svgBgColor, hoverColor, type === TYPE.primary ? hoverBgColor : "bg-transparent", borderHoverColor, svgHoverBgColor, className),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "relative flex justify-center items-center",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: clsx("flex justify-center items-center", {
-					"opacity-0": loading,
-					"opacity-100": !loading
-				}),
-				children: [
-					leftIconComponent ? /* @__PURE__ */ jsx("div", {
-						className: "flex items-center mr-[4px]",
-						children: leftIconComponent
-					}) : null,
-					TextJSX,
-					rightIconComponent ? /* @__PURE__ */ jsx("div", {
-						className: "flex items-center ml-[4px]",
-						children: rightIconComponent
-					}) : null
-				]
-			}), /* @__PURE__ */ jsx("span", { className: clsx("inline-block absolute box-border animate-spin", "border-2 border-solid border-gray-400 border-t-gray-600 rounded-[50%]", {
-				"size-[18px]": size === SIZE.s,
-				"size-[24px]": size === SIZE.l
-			}, {
-				"opacity-0": !loading,
-				"opacity-100": loading
-			}) })]
-		})
-	});
-};
-PillButton.Theme = THEME;
-PillButton.Type = TYPE;
-PillButton.Size = SIZE;
-PillButton.Style = 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 THEME.photography: return {
-			color: "text-gray-200",
-			hoverColor: "hover:text-supportive-pastel",
-			svgBgColor: "[&>svg]:bg-gray-200",
-			svgHoverBgColor: "[&>svg]:hover:bg-supportive-pastel"
-		};
-		case `${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 THEME.transparent: return {
-			color: "text-gray-100",
-			hoverColor: "hover:text-gray-200",
-			svgBgColor: "[&>svg]:bg-gray-100",
-			svgHoverBgColor: "[&>svg]:hover:bg-gray-200"
-		};
-		case `${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 `${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 = 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;
-		e.stopPropagation();
-		onClick(e);
-	};
-	return /* @__PURE__ */ jsxs("button", {
-		className: clsx("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__ */ jsx(P4, {
-			text,
-			weight: P4.Weight.normal,
-			className: clsx("mt-[2px] transition-opacity duration-[100ms]", hideText ? "opacity-0" : "opacity-100", hideText ? "max-h-0" : "max-h-none")
-		})]
-	});
-};
-IconWithTextButton.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
-export { button_default, icon_button_default, icon_with_text_button_default, menu_button_default, pill_button_default, text_button_default };
-//# sourceMappingURL=button-D_AWI7r9.mjs.map