@tipp/ui 1.5.0 → 1.5.1

package/dist/atoms/dialog.cjs

@@ -64,87 +64,18 @@ __export(dialog_exports, {
 module.exports = __toCommonJS(dialog_exports);
 var RadixDialog = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_react_icons2 = require("@radix-ui/react-icons");
-var import_themes2 = require("@radix-ui/themes");
-
-// src/atoms/button.tsx
-var import_react = require("react");
-var import_themes = require("@radix-ui/themes");
-
-// src/utils/convert-button-size.ts
-var convertSizeStr = (size) => {
-  switch (size) {
-    case "small":
-      return "1";
-    case "medium":
-      return "2";
-    case "large":
-      return "3";
-    default:
-      return "2";
-  }
-};
-var convertSizeResponse = (size) => {
-  if (typeof size === "string" || typeof size === "undefined") {
-    return convertSizeStr(size);
-  }
-  const radixSize = {};
-  let key = "initial";
-  for (key in size) {
-    radixSize[key] = convertSizeStr(size[key]);
-  }
-  return radixSize;
-};
-var convertSize = (size) => {
-  if (typeof size === "string") {
-    return convertSizeStr(size);
-  }
-  return convertSizeResponse(size);
-};
-
-// src/atoms/button.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var Button = (0, import_react.forwardRef)(
-  (props, ref) => {
-    const _a = props, { size, style, variant } = _a, restProps = __objRest(_a, ["size", "style", "variant"]);
-    const radixSize = (0, import_react.useMemo)(() => {
-      return convertSize(size);
-    }, [size]);
-    const mergedStyle = (0, import_react.useMemo)(() => {
-      const baseStyle = {
-        background: variant === "transparent" ? "transparent" : void 0,
-        fontWeight: 400
-      };
-      return __spreadValues(__spreadValues({}, baseStyle), style);
-    }, [style, variant]);
-    const radixVariant = (0, import_react.useMemo)(() => {
-      if (variant === "transparent")
-        return "ghost";
-      return variant;
-    }, [variant]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_themes.Button,
-      __spreadProps(__spreadValues({
-        style: mergedStyle,
-        variant: radixVariant
-      }, restProps), {
-        ref,
-        size: radixSize
-      })
-    );
-  }
-);
-Button.displayName = "Button";
+var import_themes4 = require("@radix-ui/themes");
 
 // src/atoms/toast.tsx
 var import_react_icons = require("@radix-ui/react-icons");
 var import_react_toastify = require("react-toastify");
 var import_react_toastify2 = require("react-toastify");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 function CloseButton() {
   return null;
 }
 function ToastContainer(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_toastify.ToastContainer,
     __spreadValues({
       autoClose: 5e3,
@@ -152,7 +83,7 @@ function ToastContainer(props) {
       closeOnClick: true,
       draggable: true,
       hideProgressBar: true,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_icons.InfoCircledIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.InfoCircledIcon, {}),
       newestOnTop: true,
       pauseOnFocusLoss: true,
       pauseOnHover: true,
@@ -163,6 +94,35 @@ function ToastContainer(props) {
   );
 }
 
+// src/atoms/heading.tsx
+var import_themes = require("@radix-ui/themes");
+var import_react = require("react");
+var import_themes2 = require("@radix-ui/themes");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Heading2(props) {
+  const _a = props, { size, children, variant } = _a, rest = __objRest(_a, ["size", "children", "variant"]);
+  const radixSize = (0, import_react.useMemo)(() => {
+    switch (variant) {
+      case "heading1":
+        return "7";
+      case "heading2":
+        return "6";
+      case "heading3":
+        return "5";
+      case "heading4":
+        return "4";
+      case "heading5":
+        return "3";
+      default:
+        return size;
+    }
+  }, [size, variant]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
+}
+
+// src/atoms/icon-button.tsx
+var import_themes3 = require("@radix-ui/themes");
+
 // src/atoms/dialog.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var preventDefault = (e) => {
@@ -177,7 +137,9 @@ function Content2(props) {
     minWidth,
     maxHeight,
     height,
-    minHeight
+    minHeight,
+    title,
+    buttons
   } = _a, rest = __objRest(_a, [
     "children",
     "style",
@@ -186,10 +148,12 @@ function Content2(props) {
     "minWidth",
     "maxHeight",
     "height",
-    "minHeight"
+    "minHeight",
+    "title",
+    "buttons"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RadixDialog.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes2.Theme, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(RadixDialog.Overlay, { className: "DialogOverlay", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RadixDialog.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes4.Theme, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(RadixDialog.Overlay, { className: "DialogOverlay", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       RadixDialog.Content,
       __spreadProps(__spreadValues({
         className: "DialogContent",
@@ -203,10 +167,14 @@ function Content2(props) {
           minHeight
         }, style)
       }, rest), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_themes2.Flex, { direction: "column", style: { position: "relative" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RadixDialog.Close, { asChild: true, className: "DialogClose", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { color: "gray", variant: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_icons2.Cross1Icon, { height: "18px", width: "18px" }) }) }),
-          children
-        ] })
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_themes4.Flex, { gap: "2", justify: "between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RadixDialog.Title, { asChild: true, children: typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Heading2, { variant: "heading3", children: title }) : title }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RadixDialog.Close, { asChild: true, className: "DialogClose", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes3.IconButton, { color: "gray", variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_icons2.Cross1Icon, {}) }) })
+          ] }),
+          children,
+          buttons ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes4.Flex, { gap: "3", justify: "end", mt: "3", children: buttons }) : null
+        ]
       })
     ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ToastContainer, {})

package/dist/atoms/dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/atoms/dialog.tsx","../../src/atoms/button.tsx","../../src/utils/convert-button-size.ts","../../src/atoms/toast.tsx"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { Flex, Theme } from '@radix-ui/themes';\nimport { Button } from './button';\nimport { ToastContainer } from './toast';\n\ntype ContentProps = RadixDialog.DialogContentProps & {\n  width?: string;\n  maxWidth?: string;\n  minWidth?: string;\n  height?: string;\n  maxHeight?: string;\n  minHeight?: string;\n};\n\nconst preventDefault: RadixDialog.DialogContentProps['onPointerDownOutside'] = (\n  e\n) => {\n  e.preventDefault();\n};\n\nfunction Content(props: ContentProps): React.ReactElement {\n  const {\n    children,\n    style = {},\n    width,\n    maxWidth,\n    minWidth,\n    maxHeight,\n    height,\n    minHeight,\n    ...rest\n  } = props;\n\n  return (\n    <RadixDialog.Portal>\n      <Theme asChild>\n        <RadixDialog.Overlay className=\"DialogOverlay\">\n          <RadixDialog.Content\n            className=\"DialogContent\"\n            onPointerDownOutside={preventDefault}\n            style={{\n              width,\n              maxWidth,\n              minWidth,\n              maxHeight,\n              height,\n              minHeight,\n              ...style,\n            }}\n            {...rest}\n          >\n            <Flex direction=\"column\" style={{ position: 'relative' }}>\n              <RadixDialog.Close asChild className=\"DialogClose\">\n                <Button color=\"gray\" variant=\"transparent\">\n                  <Cross1Icon height=\"18px\" width=\"18px\" />\n                </Button>\n              </RadixDialog.Close>\n              {children}\n            </Flex>\n          </RadixDialog.Content>\n          <ToastContainer />\n        </RadixDialog.Overlay>\n      </Theme>\n    </RadixDialog.Portal>\n  );\n}\n\nfunction Close({\n  children,\n  ...rest\n}: RadixDialog.DialogCloseProps): React.ReactElement {\n  return (\n    <RadixDialog.Close asChild {...rest}>\n      {children}\n    </RadixDialog.Close>\n  );\n}\n\nfunction Trigger({\n  children,\n  ...rest\n}: RadixDialog.DialogTriggerProps): React.ReactElement {\n  return (\n    <RadixDialog.Trigger asChild {...rest}>\n      {children}\n    </RadixDialog.Trigger>\n  );\n}\n\nexport const Dialog = {\n  Root: RadixDialog.Root,\n  Trigger,\n  Content,\n  Close,\n  Description: RadixDialog.Description,\n  Title: RadixDialog.Title,\n};\n","import React, { forwardRef, useMemo } from 'react';\nimport { Button as RadixButton } from '@radix-ui/themes';\nimport { convertSize } from '../utils/convert-button-size';\nimport type { ButtonProps } from './button.type';\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref): React.ReactElement => {\n    const { size, style, variant, ...restProps } = props;\n\n    const radixSize = useMemo(() => {\n      return convertSize(size);\n    }, [size]);\n\n    const mergedStyle = useMemo<ButtonProps['style']>(() => {\n      const baseStyle = {\n        background: variant === 'transparent' ? 'transparent' : undefined,\n        fontWeight: 400,\n      };\n      return { ...baseStyle, ...style };\n    }, [style, variant]);\n\n    const radixVariant = useMemo(() => {\n      if (variant === 'transparent') return 'ghost';\n      return variant;\n    }, [variant]);\n\n    return (\n      <RadixButton\n        style={mergedStyle}\n        variant={radixVariant}\n        {...restProps}\n        ref={ref}\n        size={radixSize}\n      />\n    );\n  }\n);\n\nButton.displayName = 'Button';\n","import { type ButtonProps as RadixButtonProps } from '@radix-ui/themes';\nimport type { Breakpoint } from '@radix-ui/themes/props';\nimport type { ButtonProps } from '../atoms/button.type';\n\nexport const convertSizeStr = (\n  size: ButtonProps['size']\n): '1' | '2' | '3' | '4' => {\n  switch (size) {\n    case 'small':\n      return '1';\n    case 'medium':\n      return '2';\n    case 'large':\n      return '3';\n    default:\n      return '2';\n  }\n};\n\nexport const convertSizeResponse = (\n  size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n  if (typeof size === 'string' || typeof size === 'undefined') {\n    return convertSizeStr(size);\n  }\n  const radixSize: RadixButtonProps['size'] = {};\n  let key: Breakpoint = 'initial';\n  for (key in size) {\n    radixSize[key] = convertSizeStr(size[key]);\n  }\n  return radixSize;\n};\n\nexport const convertSize = (\n  size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n  if (typeof size === 'string') {\n    return convertSizeStr(size);\n  }\n  return convertSizeResponse(size);\n};\n","import { InfoCircledIcon } from '@radix-ui/react-icons';\nimport {\n  ToastContainer as ToastifyContainer,\n  type ToastContainerProps,\n} from 'react-toastify';\n\nexport { toast } from 'react-toastify';\n\nfunction CloseButton(): React.ReactNode {\n  return null;\n}\n\nexport function ToastContainer(props: ToastContainerProps): React.ReactElement {\n  return (\n    <ToastifyContainer\n      autoClose={5000}\n      closeButton={CloseButton}\n      closeOnClick\n      draggable\n      hideProgressBar\n      icon={<InfoCircledIcon />}\n      newestOnTop\n      pauseOnFocusLoss\n      pauseOnHover\n      position=\"bottom-right\"\n      rtl={false}\n      style={{ zIndex: 999999 }}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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","names":["import_react_icons","import_themes","RadixButton","import_react_toastify","import_jsx_runtime","ToastifyContainer","import_jsx_runtime","Content","Close","Trigger"]}
+{"version":3,"sources":["../../src/atoms/dialog.tsx","../../src/atoms/toast.tsx","../../src/atoms/heading.tsx","../../src/atoms/icon-button.tsx"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { Flex, Theme } from '@radix-ui/themes';\nimport { ToastContainer } from './toast';\nimport { Heading } from './heading';\nimport { IconButton } from './icon-button';\n\ntype ContentProps = RadixDialog.DialogContentProps & {\n  width?: string;\n  maxWidth?: string;\n  minWidth?: string;\n  height?: string;\n  maxHeight?: string;\n  minHeight?: string;\n  title?: React.ReactNode;\n  buttons?: React.ReactElement;\n};\n\nconst preventDefault: RadixDialog.DialogContentProps['onPointerDownOutside'] = (\n  e\n) => {\n  e.preventDefault();\n};\n\nfunction Content(props: ContentProps): React.ReactElement {\n  const {\n    children,\n    style = {},\n    width,\n    maxWidth,\n    minWidth,\n    maxHeight,\n    height,\n    minHeight,\n    title,\n    buttons,\n    ...rest\n  } = props;\n\n  return (\n    <RadixDialog.Portal>\n      <Theme asChild>\n        <RadixDialog.Overlay className=\"DialogOverlay\">\n          <RadixDialog.Content\n            className=\"DialogContent\"\n            onPointerDownOutside={preventDefault}\n            style={{\n              width,\n              maxWidth,\n              minWidth,\n              maxHeight,\n              height,\n              minHeight,\n              ...style,\n            }}\n            {...rest}\n          >\n            <Flex gap=\"2\" justify=\"between\">\n              <RadixDialog.Title asChild>\n                {typeof title === 'string' ? (\n                  <Heading variant=\"heading3\">{title}</Heading>\n                ) : (\n                  title\n                )}\n              </RadixDialog.Title>\n              <RadixDialog.Close asChild className=\"DialogClose\">\n                <IconButton color=\"gray\" variant=\"ghost\">\n                  <Cross1Icon />\n                </IconButton>\n              </RadixDialog.Close>\n            </Flex>\n            {children}\n            {buttons ? (\n              <Flex gap=\"3\" justify=\"end\" mt=\"3\">\n                {buttons}\n              </Flex>\n            ) : null}\n          </RadixDialog.Content>\n          <ToastContainer />\n        </RadixDialog.Overlay>\n      </Theme>\n    </RadixDialog.Portal>\n  );\n}\n\nfunction Close({\n  children,\n  ...rest\n}: RadixDialog.DialogCloseProps): React.ReactElement {\n  return (\n    <RadixDialog.Close asChild {...rest}>\n      {children}\n    </RadixDialog.Close>\n  );\n}\n\nfunction Trigger({\n  children,\n  ...rest\n}: RadixDialog.DialogTriggerProps): React.ReactElement {\n  return (\n    <RadixDialog.Trigger asChild {...rest}>\n      {children}\n    </RadixDialog.Trigger>\n  );\n}\n\nexport const Dialog = {\n  Root: RadixDialog.Root,\n  Trigger,\n  Content,\n  Close,\n  Description: RadixDialog.Description,\n  Title: RadixDialog.Title,\n};\n","import { InfoCircledIcon } from '@radix-ui/react-icons';\nimport {\n  ToastContainer as ToastifyContainer,\n  type ToastContainerProps,\n} from 'react-toastify';\n\nexport { toast } from 'react-toastify';\n\nfunction CloseButton(): React.ReactNode {\n  return null;\n}\n\nexport function ToastContainer(props: ToastContainerProps): React.ReactElement {\n  return (\n    <ToastifyContainer\n      autoClose={5000}\n      closeButton={CloseButton}\n      closeOnClick\n      draggable\n      hideProgressBar\n      icon={<InfoCircledIcon />}\n      newestOnTop\n      pauseOnFocusLoss\n      pauseOnHover\n      position=\"bottom-right\"\n      rtl={false}\n      style={{ zIndex: 999999 }}\n      {...props}\n    />\n  );\n}\n","import {\n  Heading as RadixHeading,\n  type HeadingProps as RadixHeadingProps,\n} from '@radix-ui/themes';\nimport { useMemo } from 'react';\n\nexport { Heading as RadixHeading } from '@radix-ui/themes';\n\nexport type HeadingProps = RadixHeadingProps & {\n  variant?: 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5';\n};\n\nexport function Heading(props: HeadingProps): React.ReactElement {\n  const { size, children, variant, ...rest } = props;\n  const radixSize = useMemo<RadixHeadingProps['size']>(() => {\n    switch (variant) {\n      case 'heading1':\n        return '7';\n      case 'heading2':\n        return '6';\n      case 'heading3':\n        return '5';\n      case 'heading4':\n        return '4';\n      case 'heading5':\n        return '3';\n      default:\n        return size;\n    }\n  }, [size, variant]);\n\n  return (\n    <RadixHeading {...rest} size={radixSize}>\n      {children}\n    </RadixHeading>\n  );\n}\n","export { IconButton, type IconButtonProps } from '@radix-ui/themes';\n"],"mappings":"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","names":["import_react_icons","import_themes","import_react_toastify","ToastifyContainer","import_themes","import_jsx_runtime","Heading","RadixHeading","import_themes","import_jsx_runtime","Content","Heading","Close","Trigger"]}

package/dist/atoms/dialog.d.cts

@@ -8,6 +8,8 @@ type ContentProps = Dialog$1.DialogContentProps & {
     height?: string;
     maxHeight?: string;
     minHeight?: string;
+    title?: React.ReactNode;
+    buttons?: React.ReactElement;
 };
 declare function Content(props: ContentProps): React.ReactElement;
 declare function Close({ children, ...rest }: Dialog$1.DialogCloseProps): React.ReactElement;

package/dist/atoms/dialog.d.ts

@@ -8,6 +8,8 @@ type ContentProps = Dialog$1.DialogContentProps & {
     height?: string;
     maxHeight?: string;
     minHeight?: string;
+    title?: React.ReactNode;
+    buttons?: React.ReactElement;
 };
 declare function Content(props: ContentProps): React.ReactElement;
 declare function Close({ children, ...rest }: Dialog$1.DialogCloseProps): React.ReactElement;

package/dist/atoms/dialog.js

@@ -1,9 +1,9 @@
 import {
   Dialog
-} from "../chunk-XZRRRMPQ.js";
+} from "../chunk-CEMVFONQ.js";
 import "../chunk-CYYWMYE7.js";
-import "../chunk-U7JPP7WJ.js";
-import "../chunk-LQY4RKWI.js";
+import "../chunk-HK224ADT.js";
+import "../chunk-O3DNDMV3.js";
 import "../chunk-N552FDTV.js";
 export {
   Dialog

package/dist/atoms/drawer.js

@@ -3,11 +3,11 @@ import {
   Drawer,
   Root,
   Trigger
-} from "../chunk-ODNY3R6A.js";
+} from "../chunk-7SM2C75W.js";
+import "../chunk-UNTA4JJU.js";
 import "../chunk-HYITAA4J.js";
 import "../chunk-O3DNDMV3.js";
 import "../chunk-25HMMI7R.js";
-import "../chunk-UNTA4JJU.js";
 import "../chunk-N552FDTV.js";
 export {
   Content,

package/dist/atoms/index.cjs

@@ -82,14 +82,14 @@ __export(atoms_exports, {
   Drawer: () => Drawer,
   DropdownMenu: () => DropdownMenu,
   EllipsisTooltip: () => EllipsisTooltip,
-  Em: () => import_themes18.Em,
+  Em: () => import_themes21.Em,
   FieldErrorWrapper: () => FieldErrorWrapper,
-  Flex: () => import_themes19.Flex,
+  Flex: () => import_themes22.Flex,
   Form: () => Form,
-  Grid: () => import_themes20.Grid,
+  Grid: () => import_themes23.Grid,
   Heading: () => Heading2,
-  HoverCard: () => import_themes23.HoverCard,
-  IconButton: () => import_themes24.IconButton,
+  HoverCard: () => import_themes24.HoverCard,
+  IconButton: () => import_themes18.IconButton,
   Inset: () => import_themes25.Inset,
   Kbd: () => import_themes26.Kbd,
   Link: () => Link,
@@ -366,7 +366,7 @@ var import_themes15 = require("@radix-ui/themes");
 // src/atoms/dialog.tsx
 var RadixDialog = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_react_icons2 = require("@radix-ui/react-icons");
-var import_themes16 = require("@radix-ui/themes");
+var import_themes19 = require("@radix-ui/themes");
 
 // src/atoms/toast.tsx
 var import_react_icons = require("@radix-ui/react-icons");
@@ -396,8 +396,37 @@ function ToastContainer(props) {
   );
 }
 
-// src/atoms/dialog.tsx
+// src/atoms/heading.tsx
+var import_themes16 = require("@radix-ui/themes");
+var import_react7 = require("react");
+var import_themes17 = require("@radix-ui/themes");
 var import_jsx_runtime8 = require("react/jsx-runtime");
+function Heading2(props) {
+  const _a = props, { size, children, variant } = _a, rest = __objRest(_a, ["size", "children", "variant"]);
+  const radixSize = (0, import_react7.useMemo)(() => {
+    switch (variant) {
+      case "heading1":
+        return "7";
+      case "heading2":
+        return "6";
+      case "heading3":
+        return "5";
+      case "heading4":
+        return "4";
+      case "heading5":
+        return "3";
+      default:
+        return size;
+    }
+  }, [size, variant]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes16.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
+}
+
+// src/atoms/icon-button.tsx
+var import_themes18 = require("@radix-ui/themes");
+
+// src/atoms/dialog.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var preventDefault = (e) => {
   e.preventDefault();
 };
@@ -410,7 +439,9 @@ function Content2(props) {
     minWidth,
     maxHeight,
     height,
-    minHeight
+    minHeight,
+    title,
+    buttons
   } = _a, rest = __objRest(_a, [
     "children",
     "style",
@@ -419,10 +450,12 @@ function Content2(props) {
     "minWidth",
     "maxHeight",
     "height",
-    "minHeight"
+    "minHeight",
+    "title",
+    "buttons"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixDialog.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes16.Theme, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(RadixDialog.Overlay, { className: "DialogOverlay", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixDialog.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes19.Theme, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(RadixDialog.Overlay, { className: "DialogOverlay", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       RadixDialog.Content,
       __spreadProps(__spreadValues({
         className: "DialogContent",
@@ -436,13 +469,17 @@ function Content2(props) {
           minHeight
         }, style)
       }, rest), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_themes16.Flex, { direction: "column", style: { position: "relative" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixDialog.Close, { asChild: true, className: "DialogClose", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { color: "gray", variant: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_icons2.Cross1Icon, { height: "18px", width: "18px" }) }) }),
-          children
-        ] })
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_themes19.Flex, { gap: "2", justify: "between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixDialog.Title, { asChild: true, children: typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Heading2, { variant: "heading3", children: title }) : title }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixDialog.Close, { asChild: true, className: "DialogClose", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes18.IconButton, { color: "gray", variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_icons2.Cross1Icon, {}) }) })
+          ] }),
+          children,
+          buttons ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes19.Flex, { gap: "3", justify: "end", mt: "3", children: buttons }) : null
+        ]
       })
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToastContainer, {})
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ToastContainer, {})
   ] }) }) });
 }
 function Close2(_a) {
@@ -451,7 +488,7 @@ function Close2(_a) {
   } = _b, rest = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixDialog.Close, __spreadProps(__spreadValues({ asChild: true }, rest), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixDialog.Close, __spreadProps(__spreadValues({ asChild: true }, rest), { children }));
 }
 function Trigger2(_a) {
   var _b = _a, {
@@ -459,7 +496,7 @@ function Trigger2(_a) {
   } = _b, rest = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixDialog.Trigger, __spreadProps(__spreadValues({ asChild: true }, rest), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixDialog.Trigger, __spreadProps(__spreadValues({ asChild: true }, rest), { children }));
 }
 var Dialog = {
   Root: RadixDialog.Root,
@@ -471,17 +508,17 @@ var Dialog = {
 };
 
 // src/atoms/dropdown-menu.tsx
-var import_themes17 = require("@radix-ui/themes");
-var import_react7 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Content3 = (0, import_react7.forwardRef)((props, ref) => {
+var import_themes20 = require("@radix-ui/themes");
+var import_react8 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Content3 = (0, import_react8.forwardRef)((props, ref) => {
   const _a = props, { isNavigation, className } = _a, rest = __objRest(_a, ["isNavigation", "className"]);
-  const contentClassName = (0, import_react7.useMemo)(() => {
+  const contentClassName = (0, import_react8.useMemo)(() => {
     const cls = isNavigation ? "dropdown-navigation" : "";
     return [cls, className].join(" ");
   }, [isNavigation, className]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    import_themes17.DropdownMenu.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_themes20.DropdownMenu.Content,
     __spreadProps(__spreadValues({
       ref
     }, rest), {
@@ -490,49 +527,20 @@ var Content3 = (0, import_react7.forwardRef)((props, ref) => {
   );
 });
 Content3.displayName = "DropdownMenu.Content";
-var DropdownMenu = __spreadProps(__spreadValues({}, import_themes17.DropdownMenu), {
+var DropdownMenu = __spreadProps(__spreadValues({}, import_themes20.DropdownMenu), {
   Content: Content3
 });
 
 // src/atoms/em.tsx
-var import_themes18 = require("@radix-ui/themes");
+var import_themes21 = require("@radix-ui/themes");
 
 // src/atoms/flex.tsx
-var import_themes19 = require("@radix-ui/themes");
-
-// src/atoms/grid.tsx
-var import_themes20 = require("@radix-ui/themes");
-
-// src/atoms/heading.tsx
-var import_themes21 = require("@radix-ui/themes");
-var import_react8 = require("react");
 var import_themes22 = require("@radix-ui/themes");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function Heading2(props) {
-  const _a = props, { size, children, variant } = _a, rest = __objRest(_a, ["size", "children", "variant"]);
-  const radixSize = (0, import_react8.useMemo)(() => {
-    switch (variant) {
-      case "heading1":
-        return "7";
-      case "heading2":
-        return "6";
-      case "heading3":
-        return "5";
-      case "heading4":
-        return "4";
-      case "heading5":
-        return "3";
-      default:
-        return size;
-    }
-  }, [size, variant]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes21.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
-}
 
-// src/atoms/hover-card.tsx
+// src/atoms/grid.tsx
 var import_themes23 = require("@radix-ui/themes");
 
-// src/atoms/icon-button.tsx
+// src/atoms/hover-card.tsx
 var import_themes24 = require("@radix-ui/themes");
 
 // src/atoms/inset.tsx
@@ -836,9 +844,9 @@ function Pagination(props) {
     size: "3",
     style: { borderRadius: "50%" }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_themes19.Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_themes22.Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_themes24.IconButton,
+      import_themes18.IconButton,
       __spreadProps(__spreadValues({
         disabled: !doublePrev,
         onClick: onClickDoublePrev
@@ -846,8 +854,8 @@ function Pagination(props) {
         children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons3.DoubleArrowLeftIcon, __spreadValues({}, iconSize))
       })
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes24.IconButton, __spreadProps(__spreadValues({ disabled: !prev, onClick: onClickPrev }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons3.ChevronLeftIcon, __spreadValues({}, iconSize)) })),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes19.Flex, { gap: "1", children: visibleItems.map((item) => {
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes18.IconButton, __spreadProps(__spreadValues({ disabled: !prev, onClick: onClickPrev }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons3.ChevronLeftIcon, __spreadValues({}, iconSize)) })),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes22.Flex, { gap: "1", children: visibleItems.map((item) => {
       return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "button",
         {
@@ -861,9 +869,9 @@ function Pagination(props) {
         item
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes24.IconButton, __spreadProps(__spreadValues({ disabled: !next, onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons3.ChevronRightIcon, __spreadValues({}, iconSize)) })),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes18.IconButton, __spreadProps(__spreadValues({ disabled: !next, onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons3.ChevronRightIcon, __spreadValues({}, iconSize)) })),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_themes24.IconButton,
+      import_themes18.IconButton,
       __spreadProps(__spreadValues({
         disabled: !doubleNext,
         onClick: onClickDoubleNext
@@ -880,7 +888,7 @@ function FieldErrorWrapper({
   children,
   error
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_themes19.Flex, { direction: "column", gap: "1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_themes22.Flex, { direction: "column", gap: "1", children: [
     children,
     error ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Typo, { color: "red", variant: "caption", children: error }) : null
   ] });
@@ -999,12 +1007,12 @@ function Content6(props) {
       }, rest), {
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_themes19.Flex,
+            import_themes22.Flex,
             {
               align: "center",
               px: { initial: "4", md: "6" },
               py: { initial: "2", md: "4" },
-              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_themes24.IconButton, { color: "gray", variant: "outline", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ClosePanelArrowIcon, {}) }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_themes18.IconButton, { color: "gray", variant: "outline", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ClosePanelArrowIcon, {}) }) })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_themes39.Separator, { orientation: "horizontal", size: "4" }),
@@ -1177,7 +1185,7 @@ function BulletText(_a) {
   } = _b, rest = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes19.Flex, { gap: "1", ml: "2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes22.Flex, { gap: "1", ml: "2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, __spreadProps(__spreadValues({}, rest), { children: "\u2022" })),
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, __spreadProps(__spreadValues({}, rest), { children }))
   ] });