@lifi/widget 0.0.0-preview-6cc63bac

package/dist/esm/components/Avatar/SmallAvatar.js

@@ -0,0 +1,20 @@
+import { AvatarSkeletonContainer } from "./Avatar.style.js";
+import { Avatar, Skeleton, styled } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Avatar/SmallAvatar.tsx
+const SmallAvatar = styled(Avatar, { shouldForwardProp: (prop) => prop !== "size" })(({ theme, size = 16 }) => ({
+	background: theme.vars.palette.background.paper,
+	width: size,
+	height: size
+}));
+const SmallAvatarSkeleton = ({ size = 16 }) => {
+	return /* @__PURE__ */ jsx(AvatarSkeletonContainer, { children: /* @__PURE__ */ jsx(Skeleton, {
+		width: size,
+		height: size,
+		variant: "circular"
+	}) });
+};
+//#endregion
+export { SmallAvatar, SmallAvatarSkeleton };
+
+//# sourceMappingURL=SmallAvatar.js.map

package/dist/esm/components/Avatar/SmallAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmallAvatar.js","names":[],"sources":["../../../../src/components/Avatar/SmallAvatar.tsx"],"sourcesContent":["import { Avatar, Skeleton, styled } from '@mui/material'\nimport type React from 'react'\nimport { AvatarSkeletonContainer } from './Avatar.style.js'\n\ninterface SmallAvatarProps {\n  size?: number\n}\n\nexport const SmallAvatar: React.FC<\n  React.ComponentProps<typeof Avatar> & SmallAvatarProps\n> = styled(Avatar, {\n  shouldForwardProp: (prop) => prop !== 'size',\n})<SmallAvatarProps>(({ theme, size = 16 }) => ({\n  background: theme.vars.palette.background.paper,\n  width: size,\n  height: size,\n}))\n\nexport const SmallAvatarSkeleton: React.FC<{\n  size?: number\n}> = ({ size = 16 }) => {\n  return (\n    <AvatarSkeletonContainer>\n      <Skeleton width={size} height={size} variant=\"circular\" />\n    </AvatarSkeletonContainer>\n  )\n}\n"],"mappings":";;;;AAQA,MAAa,cAET,OAAO,QAAQ,EACjB,oBAAoB,SAAS,SAAS,OACxC,CAAC,GAAqB,EAAE,OAAO,OAAO,UAAU;CAC9C,YAAY,MAAM,KAAK,QAAQ,WAAW;CAC1C,OAAO;CACP,QAAQ;AACV,EAAE;AAEF,MAAa,uBAEP,EAAE,OAAO,SAAS;CACtB,OACE,oBAAC,yBAAD,EAAA,UACE,oBAAC,UAAD;EAAU,OAAO;EAAM,QAAQ;EAAM,SAAQ;CAAY,CAAA,EAClC,CAAA;AAE7B"}

package/dist/esm/components/Avatar/TokenAvatar.js

@@ -0,0 +1,65 @@
+import { useChain } from "../../hooks/useChain.js";
+import { useToken } from "../../hooks/useToken.js";
+import { AvatarMasked } from "./Avatar.style.js";
+import { ChainBadgeContent } from "./ChainBadgeContent.js";
+import { AvatarBadgedSkeleton } from "./Avatar.js";
+import { Badge } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Avatar/TokenAvatar.tsx
+const TokenAvatar = ({ token, chain, isLoading, sx, tokenAvatarSize = 40, chainAvatarSize = 16 }) => {
+	if (!chain || !token?.logoURI) return /* @__PURE__ */ jsx(TokenAvatarFallback, {
+		token,
+		isLoading,
+		sx,
+		tokenAvatarSize,
+		chainAvatarSize
+	});
+	return /* @__PURE__ */ jsx(TokenAvatarBase, {
+		token,
+		chain,
+		isLoading,
+		sx,
+		avatarSize: tokenAvatarSize,
+		badgeSize: chainAvatarSize
+	});
+};
+const TokenAvatarFallback = ({ token, isLoading, sx, tokenAvatarSize, chainAvatarSize }) => {
+	const { chain } = useChain(token?.chainId);
+	const { token: chainToken, isLoading: isLoadingToken } = useToken(token?.chainId, token?.address);
+	return /* @__PURE__ */ jsx(TokenAvatarBase, {
+		token: chainToken ?? token,
+		isLoading: isLoading || isLoadingToken,
+		chain,
+		sx,
+		avatarSize: tokenAvatarSize,
+		badgeSize: chainAvatarSize
+	});
+};
+const TokenAvatarBase = ({ token, chain, isLoading, sx, avatarSize, badgeSize }) => {
+	return isLoading ? /* @__PURE__ */ jsx(AvatarBadgedSkeleton, {
+		avatarSize,
+		badgeSize
+	}) : /* @__PURE__ */ jsx(Badge, {
+		overlap: "circular",
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		badgeContent: /* @__PURE__ */ jsx(ChainBadgeContent, {
+			chain,
+			size: badgeSize
+		}),
+		sx,
+		children: /* @__PURE__ */ jsx(AvatarMasked, {
+			src: token?.logoURI,
+			alt: token?.symbol,
+			avatarSize,
+			badgeSize,
+			children: token?.symbol?.[0]
+		})
+	});
+};
+//#endregion
+export { TokenAvatar };
+
+//# sourceMappingURL=TokenAvatar.js.map

package/dist/esm/components/Avatar/TokenAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenAvatar.js","names":[],"sources":["../../../../src/components/Avatar/TokenAvatar.tsx"],"sourcesContent":["import type { Chain, StaticToken } from '@lifi/sdk'\nimport type { SxProps, Theme } from '@mui/material'\nimport { Badge } from '@mui/material'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { AvatarBadgedSkeleton } from './Avatar.js'\nimport { AvatarMasked } from './Avatar.style.js'\nimport { ChainBadgeContent } from './ChainBadgeContent.js'\n\nexport const TokenAvatar: React.FC<{\n  token?: StaticToken\n  chain?: Chain\n  isLoading?: boolean\n  sx?: SxProps<Theme>\n  tokenAvatarSize?: number\n  chainAvatarSize?: number\n}> = ({\n  token,\n  chain,\n  isLoading,\n  sx,\n  tokenAvatarSize = 40,\n  chainAvatarSize = 16,\n}) => {\n  if (!chain || !token?.logoURI) {\n    return (\n      <TokenAvatarFallback\n        token={token}\n        isLoading={isLoading}\n        sx={sx}\n        tokenAvatarSize={tokenAvatarSize}\n        chainAvatarSize={chainAvatarSize}\n      />\n    )\n  }\n  return (\n    <TokenAvatarBase\n      token={token}\n      chain={chain}\n      isLoading={isLoading}\n      sx={sx}\n      avatarSize={tokenAvatarSize}\n      badgeSize={chainAvatarSize}\n    />\n  )\n}\n\nconst TokenAvatarFallback: React.FC<{\n  token?: StaticToken\n  isLoading?: boolean\n  sx?: SxProps<Theme>\n  tokenAvatarSize: number\n  chainAvatarSize: number\n}> = ({ token, isLoading, sx, tokenAvatarSize, chainAvatarSize }) => {\n  const { chain } = useChain(token?.chainId)\n  const { token: chainToken, isLoading: isLoadingToken } = useToken(\n    token?.chainId,\n    token?.address\n  )\n  return (\n    <TokenAvatarBase\n      token={chainToken ?? token}\n      isLoading={isLoading || isLoadingToken}\n      chain={chain}\n      sx={sx}\n      avatarSize={tokenAvatarSize}\n      badgeSize={chainAvatarSize}\n    />\n  )\n}\n\nconst TokenAvatarBase: React.FC<{\n  token?: StaticToken\n  chain?: Chain\n  isLoading?: boolean\n  sx?: SxProps<Theme>\n  avatarSize: number\n  badgeSize: number\n}> = ({ token, chain, isLoading, sx, avatarSize, badgeSize }) => {\n  return isLoading ? (\n    <AvatarBadgedSkeleton avatarSize={avatarSize} badgeSize={badgeSize} />\n  ) : (\n    <Badge\n      overlap=\"circular\"\n      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n      badgeContent={<ChainBadgeContent chain={chain} size={badgeSize} />}\n      sx={sx}\n    >\n      <AvatarMasked\n        src={token?.logoURI}\n        alt={token?.symbol}\n        avatarSize={avatarSize}\n        badgeSize={badgeSize}\n      >\n        {token?.symbol?.[0]}\n      </AvatarMasked>\n    </Badge>\n  )\n}\n"],"mappings":";;;;;;;;AASA,MAAa,eAOP,EACJ,OACA,OACA,WACA,IACA,kBAAkB,IAClB,kBAAkB,SACd;CACJ,IAAI,CAAC,SAAS,CAAC,OAAO,SACpB,OACE,oBAAC,qBAAD;EACS;EACI;EACP;EACa;EACA;CAClB,CAAA;CAGL,OACE,oBAAC,iBAAD;EACS;EACA;EACI;EACP;EACJ,YAAY;EACZ,WAAW;CACZ,CAAA;AAEL;AAEA,MAAM,uBAMA,EAAE,OAAO,WAAW,IAAI,iBAAiB,sBAAsB;CACnE,MAAM,EAAE,UAAU,SAAS,OAAO,OAAO;CACzC,MAAM,EAAE,OAAO,YAAY,WAAW,mBAAmB,SACvD,OAAO,SACP,OAAO,OACT;CACA,OACE,oBAAC,iBAAD;EACE,OAAO,cAAc;EACrB,WAAW,aAAa;EACjB;EACH;EACJ,YAAY;EACZ,WAAW;CACZ,CAAA;AAEL;AAEA,MAAM,mBAOA,EAAE,OAAO,OAAO,WAAW,IAAI,YAAY,gBAAgB;CAC/D,OAAO,YACL,oBAAC,sBAAD;EAAkC;EAAuB;CAAY,CAAA,IAErE,oBAAC,OAAD;EACE,SAAQ;EACR,cAAc;GAAE,UAAU;GAAU,YAAY;EAAQ;EACxD,cAAc,oBAAC,mBAAD;GAA0B;GAAO,MAAM;EAAY,CAAA;EAC7D;YAEJ,oBAAC,cAAD;GACE,KAAK,OAAO;GACZ,KAAK,OAAO;GACA;GACD;aAEV,OAAO,SAAS;EACL,CAAA;CACT,CAAA;AAEX"}

package/dist/esm/components/Avatar/utils.js

@@ -0,0 +1,9 @@
+//#region src/components/Avatar/utils.ts
+const borderWidthPx = 2.5;
+const getAvatarMask = (badgeSize) => {
+	return `radial-gradient(circle ${badgeSize / 2 + borderWidthPx}px at calc(100% - 14%) calc(100% - 14%), #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`;
+};
+//#endregion
+export { getAvatarMask };
+
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/Avatar/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/components/Avatar/utils.ts"],"sourcesContent":["const borderWidthPx = 2.5\n\n// 14% is the right bottom offset of the MUI's badge (MuiBadge-badge class)\nexport const getAvatarMask = (badgeSize: number) => {\n  return `radial-gradient(circle ${badgeSize / 2 + borderWidthPx}px at calc(100% - 14%) calc(100% - 14%), #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`\n}\n"],"mappings":";AAAA,MAAM,gBAAgB;AAGtB,MAAa,iBAAiB,cAAsB;CAClD,OAAO,0BAA0B,YAAY,IAAI,cAAc;AACjE"}

package/dist/esm/components/BaseTransactionButton/BaseTransactionButton.js

@@ -0,0 +1,51 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useChain } from "../../hooks/useChain.js";
+import { useRouteRequiredAccountConnection } from "../../hooks/useRouteRequiredAccountConnection.js";
+import { Button } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useWalletMenu } from "@lifi/wallet-management";
+//#region src/components/BaseTransactionButton/BaseTransactionButton.tsx
+const BaseTransactionButton = ({ onClick, text, disabled, loading, route, sx }) => {
+	const { t } = useTranslation();
+	const { walletConfig } = useWidgetConfig();
+	const { openWalletMenu } = useWalletMenu();
+	const [fromChainId] = useFieldValues("fromChain");
+	const { chain } = useChain(fromChainId);
+	const { connected, missingChain } = useRouteRequiredAccountConnection(route, chain);
+	const handleClick = async (e) => {
+		if (connected) {
+			onClick?.();
+			return;
+		}
+		const connectionOptions = missingChain ? { chain: missingChain } : void 0;
+		if (walletConfig?.onConnect && !walletConfig?.forceInternalWalletManagement) walletConfig.onConnect(connectionOptions);
+		else {
+			openWalletMenu(connectionOptions);
+			e.currentTarget.blur();
+		}
+	};
+	const getButtonText = () => {
+		if (connected) {
+			if (text) return text;
+		}
+		return missingChain ? t("button.connectChainWallet", { chain: missingChain.name }) : t("button.connectWallet");
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "contained",
+		color: "primary",
+		onClick: handleClick,
+		disabled: connected && disabled,
+		loading,
+		loadingPosition: "center",
+		fullWidth: true,
+		sx,
+		"data-testid": "widget-transaction-button",
+		children: getButtonText()
+	});
+};
+//#endregion
+export { BaseTransactionButton };
+
+//# sourceMappingURL=BaseTransactionButton.js.map

package/dist/esm/components/BaseTransactionButton/BaseTransactionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTransactionButton.js","names":[],"sources":["../../../../src/components/BaseTransactionButton/BaseTransactionButton.tsx"],"sourcesContent":["import { useWalletMenu } from '@lifi/wallet-management'\nimport { Button } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useRouteRequiredAccountConnection } from '../../hooks/useRouteRequiredAccountConnection.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport type { BaseTransactionButtonProps } from './types.js'\n\nexport const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({\n  onClick,\n  text,\n  disabled,\n  loading,\n  route,\n  sx,\n}) => {\n  const { t } = useTranslation()\n  const { walletConfig } = useWidgetConfig()\n  const { openWalletMenu } = useWalletMenu()\n  const [fromChainId] = useFieldValues('fromChain')\n  const { chain } = useChain(fromChainId)\n  const { connected, missingChain } = useRouteRequiredAccountConnection(\n    route,\n    chain\n  )\n  const handleClick = async (e: React.MouseEvent<HTMLElement>) => {\n    if (connected) {\n      onClick?.()\n      return\n    }\n    const connectionOptions = missingChain ? { chain: missingChain } : undefined\n    if (\n      walletConfig?.onConnect &&\n      !walletConfig?.forceInternalWalletManagement\n    ) {\n      walletConfig.onConnect(connectionOptions)\n    } else {\n      openWalletMenu(connectionOptions)\n      e.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n    }\n  }\n\n  const getButtonText = () => {\n    if (connected) {\n      if (text) {\n        return text\n      }\n    }\n    return missingChain\n      ? t('button.connectChainWallet', {\n          chain: missingChain.name,\n        })\n      : t('button.connectWallet')\n  }\n\n  return (\n    <Button\n      variant=\"contained\"\n      color=\"primary\"\n      onClick={handleClick}\n      disabled={connected && disabled}\n      loading={loading}\n      loadingPosition=\"center\"\n      fullWidth\n      sx={sx}\n      data-testid=\"widget-transaction-button\"\n    >\n      {getButtonText()}\n    </Button>\n  )\n}\n"],"mappings":";;;;;;;;;AASA,MAAa,yBAA+D,EAC1E,SACA,MACA,UACA,SACA,OACA,SACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,iBAAiB,gBAAgB;CACzC,MAAM,EAAE,mBAAmB,cAAc;CACzC,MAAM,CAAC,eAAe,eAAe,WAAW;CAChD,MAAM,EAAE,UAAU,SAAS,WAAW;CACtC,MAAM,EAAE,WAAW,iBAAiB,kCAClC,OACA,KACF;CACA,MAAM,cAAc,OAAO,MAAqC;EAC9D,IAAI,WAAW;GACb,UAAU;GACV;EACF;EACA,MAAM,oBAAoB,eAAe,EAAE,OAAO,aAAa,IAAI,KAAA;EACnE,IACE,cAAc,aACd,CAAC,cAAc,+BAEf,aAAa,UAAU,iBAAiB;OACnC;GACL,eAAe,iBAAiB;GAChC,EAAE,cAAc,KAAK;EACvB;CACF;CAEA,MAAM,sBAAsB;EAC1B,IAAI;OACE,MACF,OAAO;EAAA;EAGX,OAAO,eACH,EAAE,6BAA6B,EAC7B,OAAO,aAAa,KACtB,CAAC,IACD,EAAE,sBAAsB;CAC9B;CAEA,OACE,oBAAC,QAAD;EACE,SAAQ;EACR,OAAM;EACN,SAAS;EACT,UAAU,aAAa;EACd;EACT,iBAAgB;EAChB,WAAA;EACI;EACJ,eAAY;YAEX,cAAc;CACT,CAAA;AAEZ"}

package/dist/esm/components/BottomSheet/BottomSheet.js

@@ -0,0 +1,46 @@
+import { useGetScrollableContainer } from "../../hooks/useScrollableContainer.js";
+import { modalProps, slotProps } from "../Dialog/Dialog.js";
+import { forwardRef, startTransition, useCallback, useImperativeHandle, useRef, useState } from "react";
+import { Drawer } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/BottomSheet/BottomSheet.tsx
+const BottomSheet = forwardRef(({ elementRef, children, open, onClose, keepMounted = false }, ref) => {
+	const getContainer = useGetScrollableContainer();
+	const openRef = useRef(open);
+	const [drawerOpen, setDrawerOpen] = useState(open);
+	const [isInert, setIsInert] = useState(!open);
+	const close = useCallback(() => {
+		setIsInert(true);
+		startTransition(() => {
+			setDrawerOpen(false);
+			openRef.current = false;
+			onClose?.();
+		});
+	}, [onClose]);
+	useImperativeHandle(ref, () => ({
+		isOpen: () => openRef.current,
+		open: () => {
+			setIsInert(false);
+			setDrawerOpen(true);
+			openRef.current = true;
+		},
+		close
+	}), [close]);
+	return /* @__PURE__ */ jsx(Drawer, {
+		container: getContainer,
+		ref: elementRef,
+		anchor: "bottom",
+		open: drawerOpen,
+		onClose: close,
+		ModalProps: modalProps,
+		slotProps,
+		disableAutoFocus: true,
+		keepMounted,
+		inert: isInert,
+		children
+	});
+});
+//#endregion
+export { BottomSheet };
+
+//# sourceMappingURL=BottomSheet.js.map

package/dist/esm/components/BottomSheet/BottomSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import { Drawer } from '@mui/material'\nimport type { ForwardRefExoticComponent, RefAttributes } from 'react'\nimport {\n  forwardRef,\n  startTransition,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react'\nimport { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js'\nimport { modalProps, slotProps } from '../Dialog/Dialog.js'\nimport type { BottomSheetBase, BottomSheetProps } from './types.js'\n\nexport const BottomSheet: ForwardRefExoticComponent<\n  Omit<BottomSheetProps, 'ref'> & RefAttributes<BottomSheetBase>\n> = forwardRef<BottomSheetBase, BottomSheetProps>(\n  ({ elementRef, children, open, onClose, keepMounted = false }, ref) => {\n    const getContainer = useGetScrollableContainer()\n    const openRef = useRef(open)\n    const [drawerOpen, setDrawerOpen] = useState(open)\n    const [isInert, setIsInert] = useState(!open)\n\n    const close = useCallback(() => {\n      // Set inert first to prevent focus issues\n      setIsInert(true)\n      // Push the state update to the next event loop tick\n      // to ensure the inert is applied to before the drawer is closed\n      startTransition(() => {\n        setDrawerOpen(false)\n        openRef.current = false\n        onClose?.()\n      })\n    }, [onClose])\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        isOpen: () => openRef.current,\n        open: () => {\n          setIsInert(false)\n          setDrawerOpen(true)\n          openRef.current = true\n        },\n        close,\n      }),\n      [close]\n    )\n\n    return (\n      <Drawer\n        container={getContainer}\n        ref={elementRef}\n        anchor=\"bottom\"\n        open={drawerOpen}\n        onClose={close}\n        ModalProps={modalProps}\n        slotProps={slotProps}\n        disableAutoFocus\n        keepMounted={keepMounted}\n        inert={isInert}\n      >\n        {children}\n      </Drawer>\n    )\n  }\n)\n"],"mappings":";;;;;;AAcA,MAAa,cAET,YACD,EAAE,YAAY,UAAU,MAAM,SAAS,cAAc,SAAS,QAAQ;CACrE,MAAM,eAAe,0BAA0B;CAC/C,MAAM,UAAU,OAAO,IAAI;CAC3B,MAAM,CAAC,YAAY,iBAAiB,SAAS,IAAI;CACjD,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC,IAAI;CAE5C,MAAM,QAAQ,kBAAkB;EAE9B,WAAW,IAAI;EAGf,sBAAsB;GACpB,cAAc,KAAK;GACnB,QAAQ,UAAU;GAClB,UAAU;EACZ,CAAC;CACH,GAAG,CAAC,OAAO,CAAC;CAEZ,oBACE,YACO;EACL,cAAc,QAAQ;EACtB,YAAY;GACV,WAAW,KAAK;GAChB,cAAc,IAAI;GAClB,QAAQ,UAAU;EACpB;EACA;CACF,IACA,CAAC,KAAK,CACR;CAEA,OACE,oBAAC,QAAD;EACE,WAAW;EACX,KAAK;EACL,QAAO;EACP,MAAM;EACN,SAAS;EACT,YAAY;EACD;EACX,kBAAA;EACa;EACb,OAAO;EAEN;CACK,CAAA;AAEZ,CACF"}

package/dist/esm/components/ButtonTertiary.js

@@ -0,0 +1,21 @@
+import { Button, buttonClasses, styled } from "@mui/material";
+//#region src/components/ButtonTertiary.tsx
+const ButtonTertiary = styled(Button)(({ theme }) => ({
+	color: theme.vars.palette.text.primary,
+	height: 40,
+	fontSize: 14,
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+	"&:hover, &:active": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` },
+	[`&.${buttonClasses.loading}:disabled`]: { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` },
+	...theme.applyStyles("dark", {
+		color: theme.vars.palette.text.primary,
+		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+		"&:hover, &:active": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` },
+		[`&.${buttonClasses.loading}:disabled`]: { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` }
+	}),
+	[`.${buttonClasses.loadingIndicator}`]: { color: theme.vars.palette.text.primary }
+}));
+//#endregion
+export { ButtonTertiary };
+
+//# sourceMappingURL=ButtonTertiary.js.map

package/dist/esm/components/ButtonTertiary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonTertiary.js","names":[],"sources":["../../../src/components/ButtonTertiary.tsx"],"sourcesContent":["import { Button, buttonClasses, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ButtonTertiary: React.FC<React.ComponentProps<typeof Button>> =\n  styled(Button)(({ theme }) => ({\n    color: theme.vars.palette.text.primary,\n    height: 40,\n    fontSize: 14,\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    '&:hover, &:active': {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n    },\n    [`&.${buttonClasses.loading}:disabled`]: {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    },\n    ...theme.applyStyles('dark', {\n      color: theme.vars.palette.text.primary,\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n      '&:hover, &:active': {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n      },\n      [`&.${buttonClasses.loading}:disabled`]: {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n      },\n    }),\n    [`.${buttonClasses.loadingIndicator}`]: {\n      color: theme.vars.palette.text.primary,\n    },\n  }))\n"],"mappings":";;AAGA,MAAa,iBACX,OAAO,MAAM,GAAG,EAAE,aAAa;CAC7B,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,QAAQ;CACR,UAAU;CACV,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAC9E,qBAAqB,EACnB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;EACC,KAAK,cAAc,QAAQ,aAAa,EACvC,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;CACA,GAAG,MAAM,YAAY,QAAQ;EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC9E,qBAAqB,EACnB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;GACC,KAAK,cAAc,QAAQ,aAAa,EACvC,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;CACF,CAAC;EACA,IAAI,cAAc,qBAAqB,EACtC,OAAO,MAAM,KAAK,QAAQ,KAAK,QACjC;AACF,EAAE"}

package/dist/esm/components/Card/Card.js

@@ -0,0 +1,65 @@
+import { Card, styled } from "@mui/material";
+//#region src/components/Card/Card.tsx
+const Card$1 = styled(Card, { shouldForwardProp: (prop) => ![
+	"type",
+	"indented",
+	"selectionColor"
+].includes(prop) })(({ theme }) => {
+	return {
+		padding: 0,
+		variants: [
+			{
+				props: ({ indented }) => indented,
+				style: { padding: theme.spacing(2) }
+			},
+			{
+				props: {
+					selectionColor: "primary",
+					type: "selected"
+				},
+				style: {
+					borderWidth: 1,
+					borderStyle: "solid",
+					borderColor: theme.vars.palette.primary.main,
+					backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 5%, white)`,
+					"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 10%, white)` },
+					...theme.applyStyles("dark", {
+						backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 35%, black)`,
+						"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 40%, black)` },
+						borderColor: theme.vars.palette.primary.main
+					})
+				}
+			},
+			{
+				props: {
+					selectionColor: "secondary",
+					type: "selected"
+				},
+				style: {
+					borderWidth: 1,
+					borderStyle: "solid",
+					borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,
+					backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,
+					"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)` },
+					...theme.applyStyles("dark", {
+						borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,
+						backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,
+						"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)` }
+					})
+				}
+			},
+			{
+				props: { type: "error" },
+				style: {
+					borderWidth: 1,
+					borderStyle: "solid",
+					borderColor: theme.vars.palette.error.main
+				}
+			}
+		]
+	};
+});
+//#endregion
+export { Card$1 as Card };
+
+//# sourceMappingURL=Card.js.map

package/dist/esm/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","names":["Card","MuiCard"],"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import type { CardProps as MuiCardProps } from '@mui/material'\nimport { Card as MuiCard, styled } from '@mui/material'\nimport type React from 'react'\n\nexport interface CardProps extends MuiCardProps {\n  type?: 'default' | 'selected' | 'error'\n  selectionColor?: 'primary' | 'secondary'\n  indented?: boolean\n}\n\nexport const Card: React.FC<React.ComponentProps<typeof MuiCard> & CardProps> =\n  styled(MuiCard, {\n    shouldForwardProp: (prop) =>\n      !['type', 'indented', 'selectionColor'].includes(prop as string),\n  })<CardProps>(({ theme }) => {\n    return {\n      padding: 0,\n      variants: [\n        {\n          props: ({ indented }) => indented,\n          style: {\n            padding: theme.spacing(2),\n          },\n        },\n        {\n          props: {\n            selectionColor: 'primary',\n            type: 'selected',\n          },\n          style: {\n            borderWidth: 1,\n            borderStyle: 'solid',\n            borderColor: theme.vars.palette.primary.main,\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 5%, white)`,\n            '&:hover': {\n              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 10%, white)`,\n            },\n            ...theme.applyStyles('dark', {\n              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 35%, black)`,\n              '&:hover': {\n                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 40%, black)`,\n              },\n              borderColor: theme.vars.palette.primary.main,\n            }),\n          },\n        },\n        {\n          props: {\n            selectionColor: 'secondary',\n            type: 'selected',\n          },\n          style: {\n            borderWidth: 1,\n            borderStyle: 'solid',\n            borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,\n            '&:hover': {\n              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)`,\n            },\n            ...theme.applyStyles('dark', {\n              borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,\n              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,\n              '&:hover': {\n                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,\n              },\n            }),\n          },\n        },\n        {\n          props: {\n            type: 'error',\n          },\n          style: {\n            borderWidth: 1,\n            borderStyle: 'solid',\n            borderColor: theme.vars.palette.error.main,\n          },\n        },\n      ],\n    }\n  })\n"],"mappings":";;AAUA,MAAaA,SACX,OAAOC,MAAS,EACd,oBAAoB,SAClB,CAAC;CAAC;CAAQ;CAAY;AAAgB,EAAE,SAAS,IAAc,EACnE,CAAC,GAAc,EAAE,YAAY;CAC3B,OAAO;EACL,SAAS;EACT,UAAU;GACR;IACE,QAAQ,EAAE,eAAe;IACzB,OAAO,EACL,SAAS,MAAM,QAAQ,CAAC,EAC1B;GACF;GACA;IACE,OAAO;KACL,gBAAgB;KAChB,MAAM;IACR;IACA,OAAO;KACL,aAAa;KACb,aAAa;KACb,aAAa,MAAM,KAAK,QAAQ,QAAQ;KACxC,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACvE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK,cACzE;KACA,GAAG,MAAM,YAAY,QAAQ;MAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;MACvE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK,cACzE;MACA,aAAa,MAAM,KAAK,QAAQ,QAAQ;KAC1C,CAAC;IACH;GACF;GACA;IACE,OAAO;KACL,gBAAgB;KAChB,MAAM;IACR;IACA,OAAO;KACL,aAAa;KACb,aAAa;KACb,aAAa,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;KACrE,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;KACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,cAC3E;KACA,GAAG,MAAM,YAAY,QAAQ;MAC3B,aAAa,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;MACrE,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;MACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,cAC3E;KACF,CAAC;IACH;GACF;GACA;IACE,OAAO,EACL,MAAM,QACR;IACA,OAAO;KACL,aAAa;KACb,aAAa;KACb,aAAa,MAAM,KAAK,QAAQ,MAAM;IACxC;GACF;EACF;CACF;AACF,CAAC"}

package/dist/esm/components/Card/CardButton.js

@@ -0,0 +1,13 @@
+import { Card } from "./Card.js";
+import { CardRowButton, CardTitleContainer, CardValue } from "./CardButton.style.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Card/CardButton.tsx
+const CardButton = ({ onClick, icon, title, children }) => /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardRowButton, {
+	onClick,
+	disableRipple: true,
+	children: [/* @__PURE__ */ jsxs(CardTitleContainer, { children: [icon, /* @__PURE__ */ jsx(CardValue, { children: title })] }), children]
+}) });
+//#endregion
+export { CardButton };
+
+//# sourceMappingURL=CardButton.js.map

package/dist/esm/components/Card/CardButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButton.js","names":[],"sources":["../../../../src/components/Card/CardButton.tsx"],"sourcesContent":["import type { MouseEventHandler, PropsWithChildren } from 'react'\nimport type { SettingCardTitle } from '../../pages/SettingsPage/SettingsCard/types.js'\nimport { Card } from './Card.js'\nimport {\n  CardRowButton,\n  CardTitleContainer,\n  CardValue,\n} from './CardButton.style.js'\n\ninterface SettingCardButtonProps extends SettingCardTitle {\n  onClick: MouseEventHandler\n}\n\nexport const CardButton: React.FC<\n  PropsWithChildren<SettingCardButtonProps>\n> = ({ onClick, icon, title, children }) => (\n  <Card>\n    <CardRowButton onClick={onClick} disableRipple>\n      <CardTitleContainer>\n        {icon}\n        <CardValue>{title}</CardValue>\n      </CardTitleContainer>\n      {children}\n    </CardRowButton>\n  </Card>\n)\n"],"mappings":";;;;AAaA,MAAa,cAER,EAAE,SAAS,MAAM,OAAO,eAC3B,oBAAC,MAAD,EAAA,UACE,qBAAC,eAAD;CAAwB;CAAS,eAAA;WAAjC,CACE,qBAAC,oBAAD,EAAA,UAAA,CACG,MACD,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA,CACX,EAAA,CAAA,GACnB,QACY;GACX,CAAA"}

package/dist/esm/components/Card/CardButton.style.js

@@ -0,0 +1,29 @@
+import { Box, ButtonBase, Typography, styled } from "@mui/material";
+//#region src/components/Card/CardButton.style.tsx
+const CardRowButton = styled(ButtonBase)(({ theme }) => ({
+	background: "none",
+	color: "inherit",
+	border: "none",
+	font: "inherit",
+	cursor: "pointer",
+	outline: "inherit",
+	display: "flex",
+	width: "100%",
+	justifyContent: "space-between",
+	alignItems: "center",
+	padding: theme.spacing(2),
+	borderRadius: theme.vars.shape.borderRadius
+}));
+const CardValue = styled(Typography)({
+	lineHeight: "1.25",
+	fontWeight: 500
+});
+const CardTitleContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	gap: theme.spacing(1.5)
+}));
+//#endregion
+export { CardRowButton, CardTitleContainer, CardValue };
+
+//# sourceMappingURL=CardButton.style.js.map

package/dist/esm/components/Card/CardButton.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButton.style.js","names":[],"sources":["../../../../src/components/Card/CardButton.style.tsx"],"sourcesContent":["import { Box, ButtonBase, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const CardRowButton: React.FC<React.ComponentProps<typeof ButtonBase>> =\n  styled(ButtonBase)(({ theme }) => ({\n    background: 'none',\n    color: 'inherit',\n    border: 'none',\n    font: 'inherit',\n    cursor: 'pointer',\n    outline: 'inherit',\n    display: 'flex',\n    width: '100%',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    padding: theme.spacing(2),\n    borderRadius: theme.vars.shape.borderRadius,\n  }))\n\nexport const CardValue: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)({\n    lineHeight: '1.25',\n    fontWeight: 500,\n  })\n\nexport const CardTitleContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1.5),\n  }))\n"],"mappings":";;AAGA,MAAa,gBACX,OAAO,UAAU,GAAG,EAAE,aAAa;CACjC,YAAY;CACZ,OAAO;CACP,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,SAAS,MAAM,QAAQ,CAAC;CACxB,cAAc,MAAM,KAAK,MAAM;AACjC,EAAE;AAEJ,MAAa,YACX,OAAO,UAAU,EAAE;CACjB,YAAY;CACZ,YAAY;AACd,CAAC;AAEH,MAAa,qBACX,OAAO,GAAG,GAAG,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,GAAG;AACxB,EAAE"}

package/dist/esm/components/Card/CardHeader.js

@@ -0,0 +1,26 @@
+import { CardHeader, cardHeaderClasses, styled } from "@mui/material";
+//#region src/components/Card/CardHeader.tsx
+const CardHeader$1 = styled(CardHeader)(({ theme }) => ({
+	[`.${cardHeaderClasses.action}`]: {
+		marginTop: -2,
+		alignSelf: "center"
+	},
+	[`.${cardHeaderClasses.title}`]: {
+		fontWeight: 600,
+		fontSize: 18,
+		lineHeight: 1.3334,
+		color: theme.vars.palette.text.primary,
+		textAlign: "left"
+	},
+	[`.${cardHeaderClasses.subheader}`]: {
+		fontWeight: 500,
+		fontSize: 12,
+		lineHeight: 1.3334,
+		color: theme.vars.palette.text.secondary,
+		textAlign: "left"
+	}
+}));
+//#endregion
+export { CardHeader$1 as CardHeader };
+
+//# sourceMappingURL=CardHeader.js.map

package/dist/esm/components/Card/CardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.js","names":["CardHeader","MuiCardHeader"],"sources":["../../../../src/components/Card/CardHeader.tsx"],"sourcesContent":["import {\n  cardHeaderClasses,\n  CardHeader as MuiCardHeader,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const CardHeader: React.FC<React.ComponentProps<typeof MuiCardHeader>> =\n  styled(MuiCardHeader)(({ theme }) => ({\n    [`.${cardHeaderClasses.action}`]: {\n      marginTop: -2,\n      alignSelf: 'center',\n    },\n    [`.${cardHeaderClasses.title}`]: {\n      fontWeight: 600,\n      fontSize: 18,\n      lineHeight: 1.3334,\n      color: theme.vars.palette.text.primary,\n      textAlign: 'left',\n    },\n    [`.${cardHeaderClasses.subheader}`]: {\n      fontWeight: 500,\n      fontSize: 12,\n      lineHeight: 1.3334,\n      color: theme.vars.palette.text.secondary,\n      textAlign: 'left',\n    },\n  }))\n"],"mappings":";;AAOA,MAAaA,eACX,OAAOC,UAAa,GAAG,EAAE,aAAa;EACnC,IAAI,kBAAkB,WAAW;EAChC,WAAW;EACX,WAAW;CACb;EACC,IAAI,kBAAkB,UAAU;EAC/B,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,WAAW;CACb;EACC,IAAI,kBAAkB,cAAc;EACnC,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,WAAW;CACb;AACF,EAAE"}

package/dist/esm/components/Card/CardIconButton.js

@@ -0,0 +1,14 @@
+import { IconButton, styled } from "@mui/material";
+//#region src/components/Card/CardIconButton.tsx
+const CardIconButton = styled(IconButton)(({ theme }) => {
+	return {
+		padding: theme.spacing(.5),
+		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+		"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` },
+		fontSize: "1rem"
+	};
+});
+//#endregion
+export { CardIconButton };
+
+//# sourceMappingURL=CardIconButton.js.map

package/dist/esm/components/Card/CardIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardIconButton.js","names":["MuiIconButton"],"sources":["../../../../src/components/Card/CardIconButton.tsx"],"sourcesContent":["import type { IconButtonProps, LinkProps } from '@mui/material'\nimport { IconButton as MuiIconButton, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const CardIconButton: React.FC<\n  React.ComponentProps<typeof MuiIconButton> &\n    IconButtonProps &\n    Pick<LinkProps, 'href' | 'target' | 'rel'>\n> = styled(MuiIconButton)<\n  IconButtonProps & Pick<LinkProps, 'href' | 'target' | 'rel'>\n>(({ theme }) => {\n  return {\n    padding: theme.spacing(0.5),\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    '&:hover': {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n    },\n    fontSize: '1rem',\n  }\n})\n"],"mappings":";;AAIA,MAAa,iBAIT,OAAOA,UAAa,GAErB,EAAE,YAAY;CACf,OAAO;EACL,SAAS,MAAM,QAAQ,EAAG;EAC1B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC9E,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;EACA,UAAU;CACZ;AACF,CAAC"}

package/dist/esm/components/Card/CardLabel.js

@@ -0,0 +1,62 @@
+import { Box, Typography, styled } from "@mui/material";
+//#region src/components/Card/CardLabel.tsx
+const CardLabel = styled(Box, { shouldForwardProp: (prop) => prop !== "variant" })(({ theme }) => ({
+	borderRadius: theme.vars.shape.borderRadius,
+	padding: 0,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	height: 24,
+	minWidth: 24,
+	userSelect: "none",
+	fontSize: "1rem",
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 88%, black)`,
+	color: theme.vars.palette.text.primary,
+	...theme.applyStyles("dark", { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, white)` }),
+	variants: [
+		{
+			props: { variant: "secondary" },
+			style: {
+				color: theme.palette.getContrastText(theme.palette.secondary.main),
+				backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,
+				...theme.applyStyles("dark", { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})` })
+			}
+		},
+		{
+			props: { variant: "success" },
+			style: {
+				backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, ${theme.vars.palette.success.main})`,
+				color: theme.vars.palette.success.main,
+				...theme.applyStyles("dark", {
+					backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 76%, ${theme.vars.palette.success.main})`,
+					color: `color-mix(in srgb, ${theme.vars.palette.success.main} 76%, white)`
+				})
+			}
+		},
+		{
+			props: { variant: "warning" },
+			style: {
+				backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,
+				color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,
+				...theme.applyStyles("dark", {
+					backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,
+					color: theme.vars.palette.warning.main
+				})
+			}
+		}
+	]
+}));
+const CardLabelTypography = styled(Typography, { shouldForwardProp: (prop) => prop !== "type" })(({ theme }) => ({
+	padding: theme.spacing(.75, 1.5),
+	fontSize: 12,
+	lineHeight: 1,
+	fontWeight: "600",
+	variants: [{
+		props: { type: "icon" },
+		style: { padding: theme.spacing(.75, 0, .75, .75) }
+	}]
+}));
+//#endregion
+export { CardLabel, CardLabelTypography };
+
+//# sourceMappingURL=CardLabel.js.map

package/dist/esm/components/Card/CardLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardLabel.js","names":[],"sources":["../../../../src/components/Card/CardLabel.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const CardLabel: React.FC<\n  React.ComponentProps<typeof Box> & {\n    variant?: 'secondary' | 'success' | 'warning'\n  }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: 'secondary' | 'success' | 'warning' }>(({ theme }) => ({\n  borderRadius: theme.vars.shape.borderRadius,\n  padding: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  height: 24,\n  minWidth: 24,\n  userSelect: 'none',\n  fontSize: '1rem',\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 88%, black)`,\n  color: theme.vars.palette.text.primary,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, white)`,\n  }),\n  variants: [\n    {\n      props: { variant: 'secondary' },\n      style: {\n        color: theme.palette.getContrastText(theme.palette.secondary.main),\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,\n        }),\n      },\n    },\n    {\n      props: { variant: 'success' },\n      style: {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, ${theme.vars.palette.success.main})`,\n        color: theme.vars.palette.success.main,\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 76%, ${theme.vars.palette.success.main})`,\n          color: `color-mix(in srgb, ${theme.vars.palette.success.main} 76%, white)`,\n        }),\n      },\n    },\n    {\n      props: { variant: 'warning' },\n      style: {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,\n        color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,\n          color: theme.vars.palette.warning.main,\n        }),\n      },\n    },\n  ],\n}))\n\nexport const CardLabelTypography: React.FC<\n  React.ComponentProps<typeof Typography> & { type?: 'icon' }\n> = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'type',\n})<{ type?: 'icon' }>(({ theme }) => ({\n  padding: theme.spacing(0.75, 1.5),\n  fontSize: 12,\n  lineHeight: 1,\n  fontWeight: '600',\n  variants: [\n    {\n      props: {\n        type: 'icon',\n      },\n      style: {\n        padding: theme.spacing(0.75, 0, 0.75, 0.75),\n      },\n    },\n  ],\n}))\n"],"mappings":";;AAGA,MAAa,YAIT,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,UACxC,CAAC,GAAsD,EAAE,aAAa;CACpE,cAAc,MAAM,KAAK,MAAM;CAC/B,SAAS;CACT,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,QAAQ;CACR,UAAU;CACV,YAAY;CACZ,UAAU;CACV,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM;CAC3E,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,cAC7E,CAAC;CACD,UAAU;EACR;GACE,OAAO,EAAE,SAAS,YAAY;GAC9B,OAAO;IACL,OAAO,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,UAAU,IAAI;IACjE,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,QAAQ,MAAM,KAAK,QAAQ,UAAU,KAAK;IACrH,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,QAAQ,MAAM,KAAK,QAAQ,UAAU,KAAK,GACvH,CAAC;GACH;EACF;EACA;GACE,OAAO,EAAE,SAAS,UAAU;GAC5B,OAAO;IACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,KAAK;IACnH,OAAO,MAAM,KAAK,QAAQ,QAAQ;IAClC,GAAG,MAAM,YAAY,QAAQ;KAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACnH,OAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;IAC/D,CAAC;GACH;EACF;EACA;GACE,OAAO,EAAE,SAAS,UAAU;GAC5B,OAAO;IACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;IACvE,OAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;IAC7D,GAAG,MAAM,YAAY,QAAQ;KAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACvE,OAAO,MAAM,KAAK,QAAQ,QAAQ;IACpC,CAAC;GACH;EACF;CACF;AACF,EAAE;AAEF,MAAa,sBAET,OAAO,YAAY,EACrB,oBAAoB,SAAS,SAAS,OACxC,CAAC,GAAsB,EAAE,aAAa;CACpC,SAAS,MAAM,QAAQ,KAAM,GAAG;CAChC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,UAAU,CACR;EACE,OAAO,EACL,MAAM,OACR;EACA,OAAO,EACL,SAAS,MAAM,QAAQ,KAAM,GAAG,KAAM,GAAI,EAC5C;CACF,CACF;AACF,EAAE"}

package/dist/esm/components/Card/CardTitle.js

@@ -0,0 +1,22 @@
+import { Typography, styled } from "@mui/material";
+//#region src/components/Card/CardTitle.tsx
+const CardTitle = styled(Typography, { shouldForwardProp: (prop) => !["required"].includes(prop) })(({ theme }) => ({
+	fontSize: 14,
+	lineHeight: 1,
+	fontWeight: 700,
+	padding: theme.spacing(2, 2, 0, 2),
+	textAlign: "left",
+	color: theme.vars.palette.text.primary,
+	"&:after": {
+		content: "none",
+		color: theme.vars.palette.error.main
+	},
+	variants: [{
+		props: ({ required }) => required,
+		style: { "&:after": { content: "\" *\"" } }
+	}]
+}));
+//#endregion
+export { CardTitle };
+
+//# sourceMappingURL=CardTitle.js.map

package/dist/esm/components/Card/CardTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardTitle.js","names":[],"sources":["../../../../src/components/Card/CardTitle.tsx"],"sourcesContent":["import { styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const CardTitle: React.FC<\n  React.ComponentProps<typeof Typography> & { required?: boolean }\n> = styled(Typography, {\n  shouldForwardProp: (prop) => !['required'].includes(prop as string),\n})<{ required?: boolean }>(({ theme }) => ({\n  fontSize: 14,\n  lineHeight: 1,\n  fontWeight: 700,\n  padding: theme.spacing(2, 2, 0, 2),\n  textAlign: 'left',\n  color: theme.vars.palette.text.primary,\n  '&:after': {\n    content: 'none',\n    color: theme.vars.palette.error.main,\n  },\n  variants: [\n    {\n      props: ({ required }) => required,\n      style: {\n        '&:after': {\n          content: '\" *\"',\n        },\n      },\n    },\n  ],\n}))\n"],"mappings":";;AAGA,MAAa,YAET,OAAO,YAAY,EACrB,oBAAoB,SAAS,CAAC,CAAC,UAAU,EAAE,SAAS,IAAc,EACpE,CAAC,GAA2B,EAAE,aAAa;CACzC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;CACjC,WAAW;CACX,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW;EACT,SAAS;EACT,OAAO,MAAM,KAAK,QAAQ,MAAM;CAClC;CACA,UAAU,CACR;EACE,QAAQ,EAAE,eAAe;EACzB,OAAO,EACL,WAAW,EACT,SAAS,SACX,EACF;CACF,CACF;AACF,EAAE"}

package/dist/esm/components/Card/InputCard.js

@@ -0,0 +1,11 @@
+import { Card as Card$1 } from "./Card.js";
+import { styled } from "@mui/material";
+//#region src/components/Card/InputCard.tsx
+const InputCard = styled(Card$1, {
+	name: "MuiInputCard",
+	slot: "root"
+})({});
+//#endregion
+export { InputCard };
+
+//# sourceMappingURL=InputCard.js.map

package/dist/esm/components/Card/InputCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputCard.js","names":["Card"],"sources":["../../../../src/components/Card/InputCard.tsx"],"sourcesContent":["import { styled } from '@mui/material'\nimport type React from 'react'\nimport { Card } from './Card.js'\n\nexport const InputCard: React.FC<React.ComponentProps<typeof Card>> = styled(\n  Card,\n  {\n    name: 'MuiInputCard',\n    slot: 'root',\n  }\n)({})\n"],"mappings":";;;AAIA,MAAa,YAAyD,OACpEA,QACA;CACE,MAAM;CACN,MAAM;AACR,CACF,EAAE,CAAC,CAAC"}