@jbpark/ui-kit 2.11.2 → 2.12.0

package/dist/components/organisms/drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.mjs","names":["drawer"],"sources":["../../../src/components/organisms/drawer.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\n\nimport { X } from 'lucide-react';\n\nimport { drawer } from '@repo/ui/core';\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\nconst {\n  DrawerContent,\n  Drawer: DrawerCore,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n} = drawer;\n\nexport interface Props {\n  open: boolean;\n  children?: React.ReactNode;\n  title?: React.ReactNode;\n  extra?: React.ReactNode;\n  footer?: React.ReactNode;\n  closable?: boolean;\n  closeIcon?: React.ReactNode;\n  direction?: 'top' | 'bottom' | 'left' | 'right';\n  size?: 'small' | 'medium' | 'large' | 'full' | string;\n  maskClosable?: boolean;\n  handlebar?: boolean;\n  draggable?: boolean;\n  rounded?: boolean;\n  mask?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  classNames?: {\n    mask?: string;\n    content?: string;\n    handlebar?: string;\n    header?: string;\n    title?: string;\n    close?: string;\n    extra?: string;\n    body?: string;\n    footer?: string;\n  };\n  container?: HTMLElement;\n  onClose: () => void;\n}\n\nconst SIZES: Record<string, string> = {\n  small: '30%',\n  medium: '50%',\n  large: '75%',\n  full: '90%',\n};\n\nconst getSizeStyles = (\n  direction: 'top' | 'bottom' | 'left' | 'right',\n  size: string,\n): React.CSSProperties => {\n  const value = SIZES[size] || size;\n\n  return direction === 'top' || direction === 'bottom'\n    ? { height: value }\n    : { width: value };\n};\n\nconst Drawer = ({\n  open,\n  title,\n  extra,\n  footer,\n  closable = true,\n  closeIcon,\n  direction = 'bottom',\n  size = 'medium',\n  maskClosable = true,\n  handlebar = true,\n  draggable = false,\n  rounded = false,\n  mask = true,\n  className,\n  classNames,\n  style,\n  children,\n  container,\n  onClose,\n  ...props\n}: Props) => {\n  useEffect(() => {\n    if (!open || mask) {\n      return;\n    }\n\n    const originalPointerEvents = document.body.style.pointerEvents;\n\n    const raf = window.requestAnimationFrame(() => {\n      document.body.style.pointerEvents = 'auto';\n    });\n\n    return () => {\n      window.cancelAnimationFrame(raf);\n      document.body.style.pointerEvents = originalPointerEvents;\n    };\n  }, [open, mask]);\n\n  return (\n    <DrawerCore\n      open={open}\n      direction={direction}\n      handleOnly={!draggable}\n      container={container}\n      onOpenChange={open => {\n        if (!open && maskClosable) {\n          onClose();\n        }\n      }}\n      {...props}\n    >\n      <DrawerContent\n        className={cn(\n          'border-none outline-none',\n          rounded ? 'rounded-t-[30px]!' : 'rounded-none!',\n          classNames?.content,\n          className,\n          //\n        )}\n        handlebar={handlebar}\n        mask={mask}\n        classNames={{\n          mask: classNames?.mask || '',\n          handlebar: classNames?.handlebar || '',\n        }}\n        style={{\n          ...getSizeStyles(direction, size),\n          ...style,\n        }}\n      >\n        <DrawerHeader\n          className={cn(\n            classNames?.header,\n            !title && 'p-0',\n            //\n          )}\n        >\n          <div className=\"flex items-start gap-2\">\n            {renderConditional(closable ? closeIcon || <X /> : null, v => (\n              <Button\n                type=\"text\"\n                shape=\"circle\"\n                size=\"small\"\n                aria-label=\"닫기\"\n                icon={v}\n                onClick={onClose}\n                className={cn(classNames?.close)}\n              />\n            ))}\n            <div className=\"flex flex-1 items-start justify-between gap-2\">\n              <DrawerTitle className={cn(classNames?.title)}>\n                {title}\n              </DrawerTitle>\n              {renderConditional(extra, v => (\n                <div className={cn('shrink-0', classNames?.extra)}>{v}</div>\n              ))}\n            </div>\n          </div>\n          <DrawerDescription className=\"hidden\" />\n        </DrawerHeader>\n        <div\n          className={cn(\n            'overflow-auto p-5',\n            classNames?.body,\n            //\n          )}\n        >\n          {children}\n        </div>\n        {renderConditional(footer, v => (\n          <DrawerFooter className={cn(classNames?.footer)}>{v}</DrawerFooter>\n        ))}\n      </DrawerContent>\n    </DrawerCore>\n  );\n};\n\nexport default Drawer;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,EACJ,eACA,QAAQ,YACR,mBACA,cACA,cACA,gBACEA;AAkCJ,MAAM,QAAgC;CACpC,OAAO;CACP,QAAQ;CACR,OAAO;CACP,MAAM;CACP;AAED,MAAM,iBACJ,WACA,SACwB;CACxB,MAAM,QAAQ,MAAM,SAAS;AAE7B,QAAO,cAAc,SAAS,cAAc,WACxC,EAAE,QAAQ,OAAO,GACjB,EAAE,OAAO,OAAO;;AAGtB,MAAM,UAAU,EACd,MACA,OACA,OACA,QACA,WAAW,MACX,WACA,YAAY,UACZ,OAAO,UACP,eAAe,MACf,YAAY,MACZ,YAAY,OACZ,UAAU,OACV,OAAO,MACP,WACA,YACA,OACA,UACA,WACA,SACA,GAAG,YACQ;AACX,iBAAgB;AACd,MAAI,CAAC,QAAQ,KACX;EAGF,MAAM,wBAAwB,SAAS,KAAK,MAAM;EAElD,MAAM,MAAM,OAAO,4BAA4B;AAC7C,YAAS,KAAK,MAAM,gBAAgB;IACpC;AAEF,eAAa;AACX,UAAO,qBAAqB,IAAI;AAChC,YAAS,KAAK,MAAM,gBAAgB;;IAErC,CAAC,MAAM,KAAK,CAAC;AAEhB,QACE,oBAAC;EACO;EACK;EACX,YAAY,CAAC;EACF;EACX,eAAc,SAAQ;AACpB,OAAI,CAAC,QAAQ,aACX,UAAS;;EAGb,GAAI;YAEJ,qBAAC;GACC,WAAW,GACT,4BACA,UAAU,sBAAsB,iBAChC,YAAY,SACZ,UAED;GACU;GACL;GACN,YAAY;IACV,MAAM,YAAY,QAAQ;IAC1B,WAAW,YAAY,aAAa;IACrC;GACD,OAAO;IACL,GAAG,cAAc,WAAW,KAAK;IACjC,GAAG;IACJ;;IAED,qBAAC;KACC,WAAW,GACT,YAAY,QACZ,CAAC,SAAS,MAEX;gBAED,qBAAC;MAAI,WAAU;iBACZ,kBAAkB,WAAW,aAAa,oBAAC,MAAI,GAAG,OAAM,MACvD,oBAAC;OACC,MAAK;OACL,OAAM;OACN,MAAK;OACL,cAAW;OACX,MAAM;OACN,SAAS;OACT,WAAW,GAAG,YAAY,MAAM;QAChC,CACF,EACF,qBAAC;OAAI,WAAU;kBACb,oBAAC;QAAY,WAAW,GAAG,YAAY,MAAM;kBAC1C;SACW,EACb,kBAAkB,QAAO,MACxB,oBAAC;QAAI,WAAW,GAAG,YAAY,YAAY,MAAM;kBAAG;SAAQ,CAC5D;QACE;OACF,EACN,oBAAC,qBAAkB,WAAU,WAAW;MAC3B;IACf,oBAAC;KACC,WAAW,GACT,qBACA,YAAY,KAEb;KAEA;MACG;IACL,kBAAkB,SAAQ,MACzB,oBAAC;KAAa,WAAW,GAAG,YAAY,OAAO;eAAG;MAAiB,CACnE;;IACY;GACL"}
+{"version":3,"file":"drawer.mjs","names":["drawer"],"sources":["../../../src/components/organisms/drawer.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\n\nimport { X } from 'lucide-react';\n\nimport { drawer } from '@repo/ui/core';\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\nconst {\n  DrawerContent,\n  Drawer: DrawerCore,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n} = drawer;\n\nexport interface Props {\n  open: boolean;\n  children?: React.ReactNode;\n  title?: React.ReactNode;\n  extra?: React.ReactNode;\n  footer?: React.ReactNode;\n  closable?: boolean;\n  closeIcon?: React.ReactNode;\n  direction?: 'top' | 'bottom' | 'left' | 'right';\n  size?: 'small' | 'medium' | 'large' | 'full' | string;\n  maskClosable?: boolean;\n  handlebar?: boolean;\n  draggable?: boolean;\n  rounded?: boolean;\n  mask?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  classNames?: {\n    mask?: string;\n    content?: string;\n    handlebar?: string;\n    header?: string;\n    title?: string;\n    close?: string;\n    extra?: string;\n    body?: string;\n    footer?: string;\n  };\n  container?: HTMLElement;\n  onClose: () => void;\n}\n\nconst SIZES: Record<string, string> = {\n  small: '30%',\n  medium: '50%',\n  large: '75%',\n  full: '90%',\n};\n\nconst getSizeStyles = (\n  direction: 'top' | 'bottom' | 'left' | 'right',\n  size: string,\n): React.CSSProperties => {\n  const value = SIZES[size] || size;\n\n  return direction === 'top' || direction === 'bottom'\n    ? { height: value }\n    : { width: value };\n};\n\nconst Drawer = ({\n  open,\n  title,\n  extra,\n  footer,\n  closable = true,\n  closeIcon,\n  direction = 'bottom',\n  size = 'medium',\n  maskClosable = true,\n  handlebar = true,\n  draggable = false,\n  rounded = false,\n  mask = true,\n  className,\n  classNames,\n  style,\n  children,\n  container,\n  onClose,\n  ...props\n}: Props) => {\n  useEffect(() => {\n    if (!open || mask) {\n      return;\n    }\n\n    const originalPointerEvents = document.body.style.pointerEvents;\n\n    const raf = window.requestAnimationFrame(() => {\n      document.body.style.pointerEvents = 'auto';\n    });\n\n    return () => {\n      window.cancelAnimationFrame(raf);\n      document.body.style.pointerEvents = originalPointerEvents;\n    };\n  }, [open, mask]);\n\n  return (\n    <DrawerCore\n      open={open}\n      direction={direction}\n      handleOnly={!draggable}\n      container={container}\n      onOpenChange={open => {\n        if (!open) {\n          onClose();\n        }\n      }}\n      {...props}\n    >\n      <DrawerContent\n        className={cn(\n          'border-none outline-none',\n          rounded ? 'rounded-t-[30px]!' : 'rounded-none!',\n          classNames?.content,\n          className,\n          //\n        )}\n        handlebar={handlebar}\n        mask={mask}\n        onPointerDownOutside={event => {\n          if (!maskClosable) {\n            event.preventDefault();\n          }\n        }}\n        classNames={{\n          mask: classNames?.mask || '',\n          handlebar: classNames?.handlebar || '',\n        }}\n        style={{\n          ...getSizeStyles(direction, size),\n          ...style,\n        }}\n      >\n        <DrawerHeader\n          className={cn(\n            classNames?.header,\n            !title && 'p-0',\n            //\n          )}\n        >\n          <div className=\"flex items-start gap-2\">\n            {renderConditional(closable ? closeIcon || <X /> : null, v => (\n              <Button\n                type=\"text\"\n                shape=\"circle\"\n                size=\"small\"\n                aria-label=\"닫기\"\n                icon={v}\n                onClick={onClose}\n                className={cn(classNames?.close)}\n              />\n            ))}\n            <div className=\"flex flex-1 items-start justify-between gap-2\">\n              <DrawerTitle className={cn(classNames?.title)}>\n                {title}\n              </DrawerTitle>\n              {renderConditional(extra, v => (\n                <div className={cn('shrink-0', classNames?.extra)}>{v}</div>\n              ))}\n            </div>\n          </div>\n          <DrawerDescription className=\"hidden\" />\n        </DrawerHeader>\n        <div\n          className={cn(\n            'overflow-auto p-5',\n            classNames?.body,\n            //\n          )}\n        >\n          {children}\n        </div>\n        {renderConditional(footer, v => (\n          <DrawerFooter className={cn(classNames?.footer)}>{v}</DrawerFooter>\n        ))}\n      </DrawerContent>\n    </DrawerCore>\n  );\n};\n\nexport default Drawer;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,EACJ,eACA,QAAQ,YACR,mBACA,cACA,cACA,gBACEA;AAkCJ,MAAM,QAAgC;CACpC,OAAO;CACP,QAAQ;CACR,OAAO;CACP,MAAM;CACP;AAED,MAAM,iBACJ,WACA,SACwB;CACxB,MAAM,QAAQ,MAAM,SAAS;AAE7B,QAAO,cAAc,SAAS,cAAc,WACxC,EAAE,QAAQ,OAAO,GACjB,EAAE,OAAO,OAAO;;AAGtB,MAAM,UAAU,EACd,MACA,OACA,OACA,QACA,WAAW,MACX,WACA,YAAY,UACZ,OAAO,UACP,eAAe,MACf,YAAY,MACZ,YAAY,OACZ,UAAU,OACV,OAAO,MACP,WACA,YACA,OACA,UACA,WACA,SACA,GAAG,YACQ;AACX,iBAAgB;AACd,MAAI,CAAC,QAAQ,KACX;EAGF,MAAM,wBAAwB,SAAS,KAAK,MAAM;EAElD,MAAM,MAAM,OAAO,4BAA4B;AAC7C,YAAS,KAAK,MAAM,gBAAgB;IACpC;AAEF,eAAa;AACX,UAAO,qBAAqB,IAAI;AAChC,YAAS,KAAK,MAAM,gBAAgB;;IAErC,CAAC,MAAM,KAAK,CAAC;AAEhB,QACE,oBAAC;EACO;EACK;EACX,YAAY,CAAC;EACF;EACX,eAAc,SAAQ;AACpB,OAAI,CAAC,KACH,UAAS;;EAGb,GAAI;YAEJ,qBAAC;GACC,WAAW,GACT,4BACA,UAAU,sBAAsB,iBAChC,YAAY,SACZ,UAED;GACU;GACL;GACN,uBAAsB,UAAS;AAC7B,QAAI,CAAC,aACH,OAAM,gBAAgB;;GAG1B,YAAY;IACV,MAAM,YAAY,QAAQ;IAC1B,WAAW,YAAY,aAAa;IACrC;GACD,OAAO;IACL,GAAG,cAAc,WAAW,KAAK;IACjC,GAAG;IACJ;;IAED,qBAAC;KACC,WAAW,GACT,YAAY,QACZ,CAAC,SAAS,MAEX;gBAED,qBAAC;MAAI,WAAU;iBACZ,kBAAkB,WAAW,aAAa,oBAAC,MAAI,GAAG,OAAM,MACvD,oBAAC;OACC,MAAK;OACL,OAAM;OACN,MAAK;OACL,cAAW;OACX,MAAM;OACN,SAAS;OACT,WAAW,GAAG,YAAY,MAAM;QAChC,CACF,EACF,qBAAC;OAAI,WAAU;kBACb,oBAAC;QAAY,WAAW,GAAG,YAAY,MAAM;kBAC1C;SACW,EACb,kBAAkB,QAAO,MACxB,oBAAC;QAAI,WAAW,GAAG,YAAY,YAAY,MAAM;kBAAG;SAAQ,CAC5D;QACE;OACF,EACN,oBAAC,qBAAkB,WAAU,WAAW;MAC3B;IACf,oBAAC;KACC,WAAW,GACT,qBACA,YAAY,KAEb;KAEA;MACG;IACL,kBAAkB,SAAQ,MACzB,oBAAC;KAAa,WAAW,GAAG,YAAY,OAAO;eAAG;MAAiB,CACnE;;IACY;GACL"}

package/dist/components/organisms/modal.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.mts","names":[],"sources":["../../../src/components/organisms/modal.tsx"],"mappings":";;;;UA6BU,KAAA;EACR,IAAA;EACA,YAAA;EACA,QAAA;IAGM,SAAA,GAAY,KAAA,CAAM,SAAA;IAClB,QAAA;EAAA;EAEN,SAAA,GAAY,KAAA,CAAM,SAAA;EAClB,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,OAAA,GAAU,KAAA,CAAM,SAAA;EAChB,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,SAAA;EACA,UAAA;IACE,IAAA;IACA,MAAA;IACA,IAAA;IACA,MAAA;EAAA;EAEF,KAAA,GAAQ,KAAA,CAAM,aAAA;EACd,MAAA;EACA,UAAA;EACA,SAAA,GAAY,WAAA;EACZ,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,IAAA;EACA,QAAA;AAAA;AAAA,UAGQ,WAAA,SAAoB,KAAA;EAC5B,IAAA;EACA,EAAA;EACA,IAAA,GAAO,KAAA,CAAM,SAAA;EACb,SAAA,GAAY,WAAA;AAAA;AAAA,cAiCR,KAAA;EAAA;;;;;;;;;;;;;;;;;KAiBH,KAAA,GAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;;;cA+Na,WAAA;iBACG,WAAA;eAEF,WAAA;iBACE,WAAA;iBAEA,WAAA;AAAA"}
+{"version":3,"file":"modal.d.mts","names":[],"sources":["../../../src/components/organisms/modal.tsx"],"mappings":";;;;UA6BU,KAAA;EACR,IAAA;EACA,YAAA;EACA,QAAA;IAGM,SAAA,GAAY,KAAA,CAAM,SAAA;IAClB,QAAA;EAAA;EAEN,SAAA,GAAY,KAAA,CAAM,SAAA;EAClB,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,OAAA,GAAU,KAAA,CAAM,SAAA;EAChB,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,SAAA;EACA,UAAA;IACE,IAAA;IACA,MAAA;IACA,IAAA;IACA,MAAA;EAAA;EAEF,KAAA,GAAQ,KAAA,CAAM,aAAA;EACd,MAAA;EACA,UAAA;EACA,SAAA,GAAY,WAAA;EACZ,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,IAAA;EACA,QAAA;AAAA;AAAA,UAGQ,WAAA,SAAoB,KAAA;EAC5B,IAAA;EACA,EAAA;EACA,IAAA,GAAO,KAAA,CAAM,SAAA;EACb,SAAA,GAAY,WAAA;AAAA;AAAA,cA+CR,KAAA;EAAA;;;;;;;;;;;;;;;;;KAiBH,KAAA,GAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;;;cAwPa,WAAA;iBACG,WAAA;eAEF,WAAA;iBACE,WAAA;iBAEA,WAAA;AAAA"}

package/dist/components/organisms/modal.mjs

@@ -13,9 +13,18 @@ import { v4 } from "uuid";
 //#region src/components/organisms/modal.tsx
 const { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } = dialog_exports;
 const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
-let modalRoot = null;
-let modalStack = [];
-let updateStack = null;
+const containerStates = /* @__PURE__ */ new Map();
+const getContainerState = (container) => {
+	let state = containerStates.get(container);
+	if (!state) {
+		state = {
+			stack: [],
+			update: null
+		};
+		containerStates.set(container, state);
+	}
+	return state;
+};
 const createModalRoot = (container) => {
 	if (!isBrowser) return null;
 	const targetContainer = container || document.body;
@@ -36,7 +45,7 @@ const Modal = ({ open = false, maskClosable = false, closable = false, closeIcon
 	return /* @__PURE__ */ jsx(Dialog, {
 		open,
 		onOpenChange: (open) => {
-			if (!open && maskClosable) onCancel?.();
+			if (!open) onCancel?.();
 		},
 		...props,
 		children: /* @__PURE__ */ jsxs(DialogContent, {
@@ -46,10 +55,12 @@ const Modal = ({ open = false, maskClosable = false, closable = false, closeIcon
 				mask: cn("bg-black/60", classNames?.mask)
 			},
 			style,
-			showCloseButton: !!closable,
+			closable,
 			closeIcon,
 			container,
-			onCancel,
+			onPointerDownOutside: (event) => {
+				if (!maskClosable) event.preventDefault();
+			},
 			children: [
 				/* @__PURE__ */ jsxs(DialogHeader, {
 					className: cn(classNames?.header, !title && "hidden"),
@@ -127,15 +138,17 @@ const StaticModal = ({ type, title, content, okText = "OK", cancelText = "Cancel
 		children: content
 	}), createModalRoot(container));
 };
-const ModalStackRenderer = () => {
+const ModalStackRenderer = ({ container }) => {
 	const [, forceUpdate] = useState({});
 	useEffect(() => {
-		updateStack = () => forceUpdate({});
+		const state = getContainerState(container);
+		state.update = () => forceUpdate({});
 		return () => {
-			updateStack = null;
+			state.update = null;
 		};
-	}, []);
-	return /* @__PURE__ */ jsx(Fragment$1, { children: modalStack.map(({ id, ...props }) => /* @__PURE__ */ jsx(StaticModal, {
+	}, [container]);
+	const { stack } = getContainerState(container);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: stack.map(({ id, ...props }) => /* @__PURE__ */ jsx(StaticModal, {
 		id,
 		...props
 	}, id)) });
@@ -148,23 +161,38 @@ const renderModal = (props) => {
 	if (!modalRoots.has(targetContainer)) {
 		const root = createRoot(rootElement);
 		modalRoots.set(targetContainer, root);
-		root.render(/* @__PURE__ */ jsx(ModalStackRenderer, {}));
+		root.render(/* @__PURE__ */ jsx(ModalStackRenderer, { container: targetContainer }));
 	}
+	const state = getContainerState(targetContainer);
 	const id = props.id || v4();
-	modalStack.push({
+	state.stack.push({
 		...props,
 		id
 	});
-	updateStack?.();
+	state.update?.();
 	return id;
 };
 Modal.destroy = (id) => {
-	modalStack = id ? modalStack.filter((modal) => modal.id !== id) : [];
-	updateStack?.();
-	if (!modalStack.length && modalRoot) {
-		modalRoot.unmount();
-		modalRoot = null;
+	if (!id) {
+		containerStates.forEach((state) => {
+			state.stack = [];
+			state.update?.();
+		});
+		modalRoots.forEach((root) => root.unmount());
+		modalRoots.clear();
+		containerStates.clear();
+		return;
 	}
+	containerStates.forEach((state, container) => {
+		if (!state.stack.some((modal) => modal.id === id)) return;
+		state.stack = state.stack.filter((modal) => modal.id !== id);
+		state.update?.();
+		if (!state.stack.length) {
+			modalRoots.get(container)?.unmount();
+			modalRoots.delete(container);
+			containerStates.delete(container);
+		}
+	});
 };
 Modal.destroyAll = () => {
 	Modal.destroy();

package/dist/components/organisms/modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"modal.mjs","names":["dialog","uuid"],"sources":["../../../src/components/organisms/modal.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Root, createRoot } from 'react-dom/client';\n\nimport {\n  Check,\n  CircleQuestionMark,\n  Info,\n  OctagonAlert,\n  OctagonX,\n} from 'lucide-react';\nimport { v4 as uuid } from 'uuid';\n\nimport { dialog } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\nconst {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} = dialog;\n\ninterface Props {\n  open?: boolean;\n  maskClosable?: boolean;\n  closable?:\n    | boolean\n    | {\n        closeIcon?: React.ReactNode;\n        disabled?: boolean;\n      };\n  closeIcon?: React.ReactNode;\n  title?: React.ReactNode;\n  content?: React.ReactNode;\n  footer?: React.ReactNode;\n  className?: string;\n  classNames?: {\n    mask?: string;\n    header?: string;\n    body?: string;\n    footer?: string;\n  };\n  style?: React.CSSProperties;\n  okText?: string;\n  cancelText?: string;\n  container?: HTMLElement;\n  children?: React.ReactNode;\n  onOk?: () => void;\n  onCancel?: () => void;\n}\n\ninterface StaticProps extends Props {\n  type?: 'info' | 'success' | 'error' | 'warning' | 'confirm';\n  id?: string;\n  icon?: React.ReactNode;\n  container?: HTMLElement;\n}\n\nconst isBrowser =\n  typeof window !== 'undefined' && typeof document !== 'undefined';\n\nlet modalRoot: Root | null = null;\nlet modalStack: StaticProps[] = [];\nlet updateStack: (() => void) | null = null;\n\nconst createModalRoot = (container?: HTMLElement) => {\n  if (!isBrowser) {\n    return null;\n  }\n\n  const targetContainer = container || document.body;\n  let rootEl = targetContainer.querySelector(\n    '#modal-root',\n  ) as HTMLElement | null;\n\n  if (!rootEl) {\n    rootEl = document.createElement('div');\n    rootEl.setAttribute('id', 'modal-root');\n    rootEl.setAttribute('role', 'dialog');\n    rootEl.setAttribute('aria-modal', 'true');\n    rootEl.style.zIndex = '10000';\n    rootEl.style.position = 'absolute';\n    targetContainer.appendChild(rootEl);\n  }\n\n  return rootEl;\n};\n\nconst Modal = ({\n  open = false,\n  maskClosable = false,\n  closable = false,\n  closeIcon,\n  className,\n  classNames,\n  style,\n  title,\n  footer,\n  container,\n  children,\n  okText = 'OK',\n  cancelText = 'Cancel',\n  onOk,\n  onCancel,\n  ...props\n}: Props) => {\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(open: boolean) => {\n        if (!open && maskClosable) {\n          onCancel?.();\n        }\n      }}\n      {...props}\n    >\n      <DialogContent\n        className={cn(\n          'rounded-lg p-4 max-sm:max-w-[80%]',\n          'border-none outline-none',\n          className,\n        )}\n        classNames={{\n          ...classNames,\n          mask: cn('bg-black/60', classNames?.mask),\n        }}\n        style={style}\n        showCloseButton={!!closable}\n        closeIcon={closeIcon}\n        container={container}\n        onCancel={onCancel}\n      >\n        {/**\n         * @todo [Dialog & AlertDialog] fix: can't get id correctly in shadow dom\n         * @see https://github.com/radix-ui/primitives/pull/3384\n         **/}\n        <DialogHeader\n          className={cn(\n            classNames?.header,\n            !title && 'hidden',\n            //\n          )}\n        >\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription className=\"hidden\" />\n        </DialogHeader>\n        <div className={cn('break-all', classNames?.body)}>{children}</div>\n        {footer !== null && (\n          <DialogFooter\n            className={cn('flex-row justify-end gap-x-2', classNames?.footer)}\n          >\n            {footer || (\n              <>\n                <Button onClick={onOk}>{okText}</Button>\n                <Button variant=\"outlined\" onClick={onCancel}>\n                  {cancelText}\n                </Button>\n              </>\n            )}\n          </DialogFooter>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nconst STATIC_ICONS = {\n  info: <Info className=\"text-blue-400\" />,\n  success: <Check className=\"text-green-400\" />,\n  error: <OctagonX className=\"text-red-400\" />,\n  warning: <OctagonAlert className=\"text-yellow-400\" />,\n  confirm: <CircleQuestionMark />,\n};\n\nconst StaticModal = ({\n  type,\n  title,\n  content,\n  okText = 'OK',\n  cancelText = 'Cancel',\n  id,\n  container,\n  icon,\n  onOk,\n  onCancel,\n  ...props\n}: StaticProps) => {\n  const [open, setOpen] = useState(true);\n\n  const closeModal = (callback?: () => void) => {\n    callback?.();\n    setOpen(false);\n    setTimeout(() => {\n      Modal.destroy(id);\n    }, 200);\n  };\n\n  const footer =\n    type === 'confirm' ? (\n      <div className=\"grid w-full grid-cols-5 gap-x-2\">\n        <Button\n          variant=\"outlined\"\n          className=\"col-span-2\"\n          onClick={() => closeModal(onCancel)}\n        >\n          {cancelText}\n        </Button>\n        <Button className=\"col-span-3\" onClick={() => closeModal(onOk)}>\n          {okText}\n        </Button>\n      </div>\n    ) : (\n      <Button\n        className={cn(\n          'grow',\n          //\n        )}\n        onClick={() => closeModal(onOk)}\n      >\n        {okText}\n      </Button>\n    );\n\n  if (!isBrowser) {\n    return null;\n  }\n\n  return createPortal(\n    <Modal\n      open={open}\n      footer={footer}\n      className={cn(\n        'z-10000',\n        'box-content w-100',\n        'rounded-3xl p-4',\n        'gap-y-0',\n      )}\n      classNames={{\n        mask: 'z-10000 bg-black/[.6]',\n        body: cn(\n          'text-black-70 whitespace-pre-wrap text-center',\n          content && 'mt-3',\n        ),\n        footer: 'mt-9',\n      }}\n      title={\n        <p\n          className={cn(\n            'text-center text-lg leading-normal whitespace-pre-wrap',\n            'flex items-center justify-center gap-x-2',\n            //\n          )}\n        >\n          {icon || (type && STATIC_ICONS[type])}\n          {title}\n        </p>\n      }\n      container={container}\n      onCancel={() => closeModal(onOk)}\n      {...props}\n    >\n      {content}\n    </Modal>,\n    createModalRoot(container)!,\n  );\n};\n\nconst ModalStackRenderer = () => {\n  const [, forceUpdate] = useState({});\n\n  useEffect(() => {\n    updateStack = () => forceUpdate({});\n    return () => {\n      updateStack = null;\n    };\n  }, []);\n\n  return (\n    <>\n      {modalStack.map(({ id, ...props }) => (\n        <StaticModal key={id} id={id} {...props} />\n      ))}\n    </>\n  );\n};\n\nconst modalRoots = new Map<HTMLElement, Root>();\n\nconst renderModal = (props: StaticProps) => {\n  if (!isBrowser) {\n    return;\n  }\n\n  const targetContainer = props.container || document.body;\n  const rootElement = createModalRoot(targetContainer)!;\n\n  if (!modalRoots.has(targetContainer)) {\n    const root = createRoot(rootElement);\n    modalRoots.set(targetContainer, root);\n    root.render(<ModalStackRenderer />);\n  }\n\n  const id = props.id || uuid();\n  modalStack.push({ ...props, id });\n  updateStack?.();\n\n  return id;\n};\n\nModal.destroy = (id?: string) => {\n  modalStack = id ? modalStack.filter(modal => modal.id !== id) : [];\n\n  updateStack?.();\n\n  if (!modalStack.length && modalRoot) {\n    modalRoot.unmount();\n    modalRoot = null;\n  }\n};\n\nModal.destroyAll = () => {\n  Modal.destroy();\n};\n\nModal.info = (props: StaticProps) => renderModal({ type: 'info', ...props });\nModal.success = (props: StaticProps) =>\n  renderModal({ type: 'success', ...props });\nModal.error = (props: StaticProps) => renderModal({ type: 'error', ...props });\nModal.warning = (props: StaticProps) =>\n  renderModal({ type: 'warning', ...props });\nModal.confirm = (props: StaticProps) =>\n  renderModal({ type: 'confirm', ...props });\n\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"file":"modal.mjs","names":["dialog","uuid"],"sources":["../../../src/components/organisms/modal.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Root, createRoot } from 'react-dom/client';\n\nimport {\n  Check,\n  CircleQuestionMark,\n  Info,\n  OctagonAlert,\n  OctagonX,\n} from 'lucide-react';\nimport { v4 as uuid } from 'uuid';\n\nimport { dialog } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\nconst {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} = dialog;\n\ninterface Props {\n  open?: boolean;\n  maskClosable?: boolean;\n  closable?:\n    | boolean\n    | {\n        closeIcon?: React.ReactNode;\n        disabled?: boolean;\n      };\n  closeIcon?: React.ReactNode;\n  title?: React.ReactNode;\n  content?: React.ReactNode;\n  footer?: React.ReactNode;\n  className?: string;\n  classNames?: {\n    mask?: string;\n    header?: string;\n    body?: string;\n    footer?: string;\n  };\n  style?: React.CSSProperties;\n  okText?: string;\n  cancelText?: string;\n  container?: HTMLElement;\n  children?: React.ReactNode;\n  onOk?: () => void;\n  onCancel?: () => void;\n}\n\ninterface StaticProps extends Props {\n  type?: 'info' | 'success' | 'error' | 'warning' | 'confirm';\n  id?: string;\n  icon?: React.ReactNode;\n  container?: HTMLElement;\n}\n\nconst isBrowser =\n  typeof window !== 'undefined' && typeof document !== 'undefined';\n\ntype ContainerState = {\n  stack: StaticProps[];\n  update: (() => void) | null;\n};\n\nconst containerStates = new Map<HTMLElement, ContainerState>();\n\nconst getContainerState = (container: HTMLElement): ContainerState => {\n  let state = containerStates.get(container);\n\n  if (!state) {\n    state = { stack: [], update: null };\n    containerStates.set(container, state);\n  }\n\n  return state;\n};\n\nconst createModalRoot = (container?: HTMLElement) => {\n  if (!isBrowser) {\n    return null;\n  }\n\n  const targetContainer = container || document.body;\n  let rootEl = targetContainer.querySelector(\n    '#modal-root',\n  ) as HTMLElement | null;\n\n  if (!rootEl) {\n    rootEl = document.createElement('div');\n    rootEl.setAttribute('id', 'modal-root');\n    rootEl.setAttribute('role', 'dialog');\n    rootEl.setAttribute('aria-modal', 'true');\n    rootEl.style.zIndex = '10000';\n    rootEl.style.position = 'absolute';\n    targetContainer.appendChild(rootEl);\n  }\n\n  return rootEl;\n};\n\nconst Modal = ({\n  open = false,\n  maskClosable = false,\n  closable = false,\n  closeIcon,\n  className,\n  classNames,\n  style,\n  title,\n  footer,\n  container,\n  children,\n  okText = 'OK',\n  cancelText = 'Cancel',\n  onOk,\n  onCancel,\n  ...props\n}: Props) => {\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(open: boolean) => {\n        if (!open) {\n          onCancel?.();\n        }\n      }}\n      {...props}\n    >\n      <DialogContent\n        className={cn(\n          'rounded-lg p-4 max-sm:max-w-[80%]',\n          'border-none outline-none',\n          className,\n        )}\n        classNames={{\n          ...classNames,\n          mask: cn('bg-black/60', classNames?.mask),\n        }}\n        style={style}\n        closable={closable}\n        closeIcon={closeIcon}\n        container={container}\n        onPointerDownOutside={event => {\n          if (!maskClosable) {\n            event.preventDefault();\n          }\n        }}\n      >\n        {/**\n         * @todo [Dialog & AlertDialog] fix: can't get id correctly in shadow dom\n         * @see https://github.com/radix-ui/primitives/pull/3384\n         **/}\n        <DialogHeader\n          className={cn(\n            classNames?.header,\n            !title && 'hidden',\n            //\n          )}\n        >\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription className=\"hidden\" />\n        </DialogHeader>\n        <div className={cn('break-all', classNames?.body)}>{children}</div>\n        {footer !== null && (\n          <DialogFooter\n            className={cn('flex-row justify-end gap-x-2', classNames?.footer)}\n          >\n            {footer || (\n              <>\n                <Button onClick={onOk}>{okText}</Button>\n                <Button variant=\"outlined\" onClick={onCancel}>\n                  {cancelText}\n                </Button>\n              </>\n            )}\n          </DialogFooter>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nconst STATIC_ICONS = {\n  info: <Info className=\"text-blue-400\" />,\n  success: <Check className=\"text-green-400\" />,\n  error: <OctagonX className=\"text-red-400\" />,\n  warning: <OctagonAlert className=\"text-yellow-400\" />,\n  confirm: <CircleQuestionMark />,\n};\n\nconst StaticModal = ({\n  type,\n  title,\n  content,\n  okText = 'OK',\n  cancelText = 'Cancel',\n  id,\n  container,\n  icon,\n  onOk,\n  onCancel,\n  ...props\n}: StaticProps) => {\n  const [open, setOpen] = useState(true);\n\n  const closeModal = (callback?: () => void) => {\n    callback?.();\n    setOpen(false);\n    setTimeout(() => {\n      Modal.destroy(id);\n    }, 200);\n  };\n\n  const footer =\n    type === 'confirm' ? (\n      <div className=\"grid w-full grid-cols-5 gap-x-2\">\n        <Button\n          variant=\"outlined\"\n          className=\"col-span-2\"\n          onClick={() => closeModal(onCancel)}\n        >\n          {cancelText}\n        </Button>\n        <Button className=\"col-span-3\" onClick={() => closeModal(onOk)}>\n          {okText}\n        </Button>\n      </div>\n    ) : (\n      <Button\n        className={cn(\n          'grow',\n          //\n        )}\n        onClick={() => closeModal(onOk)}\n      >\n        {okText}\n      </Button>\n    );\n\n  if (!isBrowser) {\n    return null;\n  }\n\n  return createPortal(\n    <Modal\n      open={open}\n      footer={footer}\n      className={cn(\n        'z-10000',\n        'box-content w-100',\n        'rounded-3xl p-4',\n        'gap-y-0',\n      )}\n      classNames={{\n        mask: 'z-10000 bg-black/[.6]',\n        body: cn(\n          'text-black-70 whitespace-pre-wrap text-center',\n          content && 'mt-3',\n        ),\n        footer: 'mt-9',\n      }}\n      title={\n        <p\n          className={cn(\n            'text-center text-lg leading-normal whitespace-pre-wrap',\n            'flex items-center justify-center gap-x-2',\n            //\n          )}\n        >\n          {icon || (type && STATIC_ICONS[type])}\n          {title}\n        </p>\n      }\n      container={container}\n      onCancel={() => closeModal(onOk)}\n      {...props}\n    >\n      {content}\n    </Modal>,\n    createModalRoot(container)!,\n  );\n};\n\nconst ModalStackRenderer = ({ container }: { container: HTMLElement }) => {\n  const [, forceUpdate] = useState({});\n\n  useEffect(() => {\n    const state = getContainerState(container);\n    state.update = () => forceUpdate({});\n    return () => {\n      state.update = null;\n    };\n  }, [container]);\n\n  const { stack } = getContainerState(container);\n\n  return (\n    <>\n      {stack.map(({ id, ...props }) => (\n        <StaticModal key={id} id={id} {...props} />\n      ))}\n    </>\n  );\n};\n\nconst modalRoots = new Map<HTMLElement, Root>();\n\nconst renderModal = (props: StaticProps) => {\n  if (!isBrowser) {\n    return;\n  }\n\n  const targetContainer = props.container || document.body;\n  const rootElement = createModalRoot(targetContainer)!;\n\n  if (!modalRoots.has(targetContainer)) {\n    const root = createRoot(rootElement);\n    modalRoots.set(targetContainer, root);\n    root.render(<ModalStackRenderer container={targetContainer} />);\n  }\n\n  const state = getContainerState(targetContainer);\n  const id = props.id || uuid();\n  state.stack.push({ ...props, id });\n  state.update?.();\n\n  return id;\n};\n\nModal.destroy = (id?: string) => {\n  if (!id) {\n    containerStates.forEach(state => {\n      state.stack = [];\n      state.update?.();\n    });\n    modalRoots.forEach(root => root.unmount());\n    modalRoots.clear();\n    containerStates.clear();\n    return;\n  }\n\n  containerStates.forEach((state, container) => {\n    if (!state.stack.some(modal => modal.id === id)) {\n      return;\n    }\n\n    state.stack = state.stack.filter(modal => modal.id !== id);\n    state.update?.();\n\n    if (!state.stack.length) {\n      modalRoots.get(container)?.unmount();\n      modalRoots.delete(container);\n      containerStates.delete(container);\n    }\n  });\n};\n\nModal.destroyAll = () => {\n  Modal.destroy();\n};\n\nModal.info = (props: StaticProps) => renderModal({ type: 'info', ...props });\nModal.success = (props: StaticProps) =>\n  renderModal({ type: 'success', ...props });\nModal.error = (props: StaticProps) => renderModal({ type: 'error', ...props });\nModal.warning = (props: StaticProps) =>\n  renderModal({ type: 'warning', ...props });\nModal.confirm = (props: StaticProps) =>\n  renderModal({ type: 'confirm', ...props });\n\nexport default Modal;\n"],"mappings":"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"}

package/dist/components/templates/layout/content.mjs

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/templates/layout/content.tsx
 const Content = ({ children, className, ...props }) => {
 	return /* @__PURE__ */ jsx("main", {
-		className: cn("min-h-0 min-w-0 shrink grow basis-0", className),
+		className: cn("min-w-0 shrink grow basis-auto", className),
 		...props,
 		children
 	});

package/dist/components/templates/layout/content.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"content.mjs","names":[],"sources":["../../../../src/components/templates/layout/content.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'main'> {}\n\nconst Content = ({ children, className, ...props }: Props) => {\n  return (\n    <main\n      className={cn('min-h-0 min-w-0 shrink grow basis-0', className)}\n      {...props}\n    >\n      {children}\n    </main>\n  );\n};\n\nexport default Content;\n"],"mappings":";;;;AAIA,MAAM,WAAW,EAAE,UAAU,WAAW,GAAG,YAAmB;AAC5D,QACE,oBAAC;EACC,WAAW,GAAG,uCAAuC,UAAU;EAC/D,GAAI;EAEH;GACI"}
+{"version":3,"file":"content.mjs","names":[],"sources":["../../../../src/components/templates/layout/content.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'main'> {}\n\nconst Content = ({ children, className, ...props }: Props) => {\n  return (\n    <main\n      className={cn(\n        'min-w-0 shrink grow basis-auto',\n        // basis-auto (not basis-0) sizes Content from its actual content\n        // height first, so flex-grow only adds extra space when content is\n        // shorter than the viewport — when content is taller, Content\n        // keeps its natural (larger) height instead of clipping to\n        // available space and pushes Footer below it. min-h-0 is\n        // intentionally omitted here: with basis-auto, the default\n        // min-height:auto (content-based) is what makes that possible; on\n        // the Sider row's cross axis it's harmless since min-height there\n        // governs stretch, not main-axis growth.\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </main>\n  );\n};\n\nexport default Content;\n"],"mappings":";;;;AAIA,MAAM,WAAW,EAAE,UAAU,WAAW,GAAG,YAAmB;AAC5D,QACE,oBAAC;EACC,WAAW,GACT,kCAUA,UACD;EACD,GAAI;EAEH;GACI"}

package/dist/core/dialog.d.mts

@@ -29,7 +29,6 @@ interface CustomContentProps {
     disabled?: boolean;
   };
   container?: HTMLElement;
-  onCancel?: () => void;
 }
 declare function DialogContent({
   className,
@@ -38,11 +37,8 @@ declare function DialogContent({
   closeIcon: _closeIcon,
   closable,
   container,
-  onCancel,
   ...props
-}: React$1.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean;
-} & CustomContentProps): react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof DialogPrimitive.Content> & CustomContentProps): react_jsx_runtime0.JSX.Element;
 declare function DialogHeader({
   className,
   ...props

package/dist/core/dialog.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.mts","names":[],"sources":["../../src/core/dialog.tsx"],"mappings":";;;;;;;;iBAWS,MAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI3C,aAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9C,YAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,MAAA,IAAO,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI7C,WAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI5C,aAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,UAe7C,kBAAA;EACR,UAAA,GAAa,MAAA;EACb,SAAA,GAAY,OAAA,CAAM,SAAA;EAClB,QAAA;IAAuB,QAAA;EAAA;EACvB,SAAA,GAAY,WAAA;EACZ,QAAA;AAAA;AAAA,iBAGO,aAAA,CAAA;EACP,SAAA;EACA,QAAA;EAEA,UAAA;EACA,SAAA,EAAW,UAAA;EACX,QAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,OAAA;EAC7C,eAAA;AAAA,IACE,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAuDb,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUjE,YAAA,CAAA;EACP,SAAA;EACA,eAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA;EACP,eAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoBQ,WAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU5C,iBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,WAAA,IAAY,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"dialog.d.mts","names":[],"sources":["../../src/core/dialog.tsx"],"mappings":";;;;;;;;iBAWS,MAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI3C,aAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9C,YAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,MAAA,IAAO,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI7C,WAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI5C,aAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,UAe7C,kBAAA;EACR,UAAA,GAAa,MAAA;EACb,SAAA,GAAY,OAAA,CAAM,SAAA;EAClB,QAAA;IAAuB,QAAA;EAAA;EACvB,SAAA,GAAY,WAAA;AAAA;AAAA,iBAGL,aAAA,CAAA;EACP,SAAA;EACA,QAAA;EACA,UAAA;EACA,SAAA,EAAW,UAAA;EACX,QAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,OAAA,IAAW,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAyCnE,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUjE,YAAA,CAAA;EACP,SAAA;EACA,eAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA;EACP,eAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoBQ,WAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU5C,iBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,WAAA,IAAY,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/core/dialog.mjs

@@ -54,12 +54,11 @@ function DialogOverlay({ className, ...props }) {
 		...props
 	});
 }
-function DialogContent({ className, children, classNames, closeIcon: _closeIcon, closable, container, onCancel, ...props }) {
+function DialogContent({ className, children, classNames, closeIcon: _closeIcon, closable, container, ...props }) {
 	const closeIcon = /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
 		"data-slot": "dialog-close",
 		className: "ring-offset-background focus:ring-ring\n        data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\n        absolute top-4 right-4 rounded-xs opacity-70 transition-opacity\n        hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden\n        disabled:pointer-events-none [&_svg]:pointer-events-none\n        [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		disabled: typeof closable === "object" && closable.disabled,
-		onClick: onCancel,
 		children: [_closeIcon || /* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "Close"

package/dist/core/dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.mjs","names":[],"sources":["../../src/core/dialog.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { XIcon } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../components/atoms/button';\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        `data-[state=open]:animate-in data-[state=closed]:animate-out\n        data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0\n        z-50 bg-black/50`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ninterface CustomContentProps {\n  classNames?: Record<string, string>;\n  closeIcon?: React.ReactNode;\n  closable?: boolean | { disabled?: boolean };\n  container?: HTMLElement;\n  onCancel?: () => void;\n}\n\nfunction DialogContent({\n  className,\n  children,\n  // showCloseButton = true,\n  classNames,\n  closeIcon: _closeIcon,\n  closable,\n  container,\n  onCancel,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean;\n} & CustomContentProps) {\n  const closeIcon = (\n    <DialogPrimitive.Close\n      data-slot=\"dialog-close\"\n      className=\"ring-offset-background focus:ring-ring\n        data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\n        absolute top-4 right-4 rounded-xs opacity-70 transition-opacity\n        hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden\n        disabled:pointer-events-none [&_svg]:pointer-events-none\n        [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n      disabled={typeof closable === 'object' && closable.disabled}\n      onClick={onCancel}\n    >\n      {_closeIcon || <XIcon />}\n      <span className=\"sr-only\">Close</span>\n    </DialogPrimitive.Close>\n  );\n\n  return (\n    <DialogPortal data-slot=\"dialog-portal\" container={container}>\n      <DialogOverlay className={cn(classNames?.mask)} />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          `bg-background data-[state=open]:animate-in\n          data-[state=closed]:animate-out data-[state=closed]:fade-out-0\n          data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95\n          data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid\n          w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]\n          gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none\n          sm:max-w-lg`,\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {closable && closeIcon}\n        {/* {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent\n              data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs\n              opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2\n              focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none\n              [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )} */}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outlined\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  );\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn('text-lg leading-none font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAWA,SAAS,OAAO,EACd,GAAG,SACiD;AACpD,QAAO,oBAAC,gBAAgB;EAAK,aAAU;EAAS,GAAI;GAAS;;AAG/D,SAAS,cAAc,EACrB,GAAG,SACoD;AACvD,QAAO,oBAAC,gBAAgB;EAAQ,aAAU;EAAiB,GAAI;GAAS;;AAG1E,SAAS,aAAa,EACpB,GAAG,SACmD;AACtD,QAAO,oBAAC,gBAAgB;EAAO,aAAU;EAAgB,GAAI;GAAS;;AAGxE,SAAS,YAAY,EACnB,GAAG,SACkD;AACrD,QAAO,oBAAC,gBAAgB;EAAM,aAAU;EAAe,GAAI;GAAS;;AAGtE,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;AACvD,QACE,oBAAC,gBAAgB;EACf,aAAU;EACV,WAAW,GACT;;2BAGA,UACD;EACD,GAAI;GACJ;;AAYN,SAAS,cAAc,EACrB,WACA,UAEA,YACA,WAAW,YACX,UACA,WACA,UACA,GAAG,SAGmB;CACtB,MAAM,YACJ,qBAAC,gBAAgB;EACf,aAAU;EACV,WAAU;EAMV,UAAU,OAAO,aAAa,YAAY,SAAS;EACnD,SAAS;aAER,cAAc,oBAAC,UAAQ,EACxB,oBAAC;GAAK,WAAU;aAAU;IAAY;GAChB;AAG1B,QACE,qBAAC;EAAa,aAAU;EAA2B;aACjD,oBAAC,iBAAc,WAAW,GAAG,YAAY,KAAK,GAAI,EAClD,qBAAC,gBAAgB;GACf,aAAU;GACV,WAAW,GACT;;;;;;wBAOA,UACD;GACD,GAAI;cAEH,UACA,YAAY;IAcW;GACb;;AAInB,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GAAG,gDAAgD,UAAU;EACxE,GAAI;GACJ;;AAIN,SAAS,aAAa,EACpB,WACA,kBAAkB,OAClB,UACA,GAAG,SAGF;AACD,QACE,qBAAC;EACC,aAAU;EACV,WAAW,GACT,0DACA,UACD;EACD,GAAI;aAEH,UACA,mBACC,oBAAC,gBAAgB;GAAM;aACrB,oBAAC;IAAO,SAAQ;cAAW;KAAc;IACnB;GAEtB;;AAIV,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;AACrD,QACE,oBAAC,gBAAgB;EACf,aAAU;EACV,WAAW,GAAG,sCAAsC,UAAU;EAC9D,GAAI;GACJ;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;AAC3D,QACE,oBAAC,gBAAgB;EACf,aAAU;EACV,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;GACJ"}
+{"version":3,"file":"dialog.mjs","names":[],"sources":["../../src/core/dialog.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { XIcon } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../components/atoms/button';\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        `data-[state=open]:animate-in data-[state=closed]:animate-out\n        data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0\n        z-50 bg-black/50`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ninterface CustomContentProps {\n  classNames?: Record<string, string>;\n  closeIcon?: React.ReactNode;\n  closable?: boolean | { disabled?: boolean };\n  container?: HTMLElement;\n}\n\nfunction DialogContent({\n  className,\n  children,\n  classNames,\n  closeIcon: _closeIcon,\n  closable,\n  container,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & CustomContentProps) {\n  const closeIcon = (\n    <DialogPrimitive.Close\n      data-slot=\"dialog-close\"\n      className=\"ring-offset-background focus:ring-ring\n        data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\n        absolute top-4 right-4 rounded-xs opacity-70 transition-opacity\n        hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden\n        disabled:pointer-events-none [&_svg]:pointer-events-none\n        [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n      disabled={typeof closable === 'object' && closable.disabled}\n    >\n      {_closeIcon || <XIcon />}\n      <span className=\"sr-only\">Close</span>\n    </DialogPrimitive.Close>\n  );\n\n  return (\n    <DialogPortal data-slot=\"dialog-portal\" container={container}>\n      <DialogOverlay className={cn(classNames?.mask)} />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          `bg-background data-[state=open]:animate-in\n          data-[state=closed]:animate-out data-[state=closed]:fade-out-0\n          data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95\n          data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid\n          w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]\n          gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none\n          sm:max-w-lg`,\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {closable && closeIcon}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outlined\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  );\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn('text-lg leading-none font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAWA,SAAS,OAAO,EACd,GAAG,SACiD;AACpD,QAAO,oBAAC,gBAAgB;EAAK,aAAU;EAAS,GAAI;GAAS;;AAG/D,SAAS,cAAc,EACrB,GAAG,SACoD;AACvD,QAAO,oBAAC,gBAAgB;EAAQ,aAAU;EAAiB,GAAI;GAAS;;AAG1E,SAAS,aAAa,EACpB,GAAG,SACmD;AACtD,QAAO,oBAAC,gBAAgB;EAAO,aAAU;EAAgB,GAAI;GAAS;;AAGxE,SAAS,YAAY,EACnB,GAAG,SACkD;AACrD,QAAO,oBAAC,gBAAgB;EAAM,aAAU;EAAe,GAAI;GAAS;;AAGtE,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;AACvD,QACE,oBAAC,gBAAgB;EACf,aAAU;EACV,WAAW,GACT;;2BAGA,UACD;EACD,GAAI;GACJ;;AAWN,SAAS,cAAc,EACrB,WACA,UACA,YACA,WAAW,YACX,UACA,WACA,GAAG,SACyE;CAC5E,MAAM,YACJ,qBAAC,gBAAgB;EACf,aAAU;EACV,WAAU;EAMV,UAAU,OAAO,aAAa,YAAY,SAAS;aAElD,cAAc,oBAAC,UAAQ,EACxB,oBAAC;GAAK,WAAU;aAAU;IAAY;GAChB;AAG1B,QACE,qBAAC;EAAa,aAAU;EAA2B;aACjD,oBAAC,iBAAc,WAAW,GAAG,YAAY,KAAK,GAAI,EAClD,qBAAC,gBAAgB;GACf,aAAU;GACV,WAAW,GACT;;;;;;wBAOA,UACD;GACD,GAAI;cAEH,UACA,YAAY;IACW;GACb;;AAInB,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GAAG,gDAAgD,UAAU;EACxE,GAAI;GACJ;;AAIN,SAAS,aAAa,EACpB,WACA,kBAAkB,OAClB,UACA,GAAG,SAGF;AACD,QACE,qBAAC;EACC,aAAU;EACV,WAAW,GACT,0DACA,UACD;EACD,GAAI;aAEH,UACA,mBACC,oBAAC,gBAAgB;GAAM;aACrB,oBAAC;IAAO,SAAQ;cAAW;KAAc;IACnB;GAEtB;;AAIV,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;AACrD,QACE,oBAAC,gBAAgB;EACf,aAAU;EACV,WAAW,GAAG,sCAAsC,UAAU;EAC9D,GAAI;GACJ;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;AAC3D,QACE,oBAAC,gBAAgB;EACf,aAAU;EACV,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;GACJ"}

package/dist/style.css

@@ -609,11 +609,14 @@
   .shrink-0 {
     flex-shrink: 0;
   }
+  .flex-grow {
+    flex-grow: 1;
+  }
   .grow {
     flex-grow: 1;
   }
-  .basis-0 {
-    flex-basis: calc(var(--spacing) * 0);
+  .basis-auto {
+    flex-basis: auto;
   }
   .origin-\(--radix-popover-content-transform-origin\) {
     transform-origin: var(--radix-popover-content-transform-origin);
@@ -988,9 +991,6 @@
   .bg-transparent {
     background-color: transparent;
   }
-  .bg-white {
-    background-color: var(--color-white);
-  }
   .bg-yellow-500\/10 {
     background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "2.11.2",
+  "version": "2.12.0",
   "description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
   "keywords": [
     "react",

package/dist/enums.d.mts

@@ -1,5 +0,0 @@
-//#region src/lib/enums/index.d.ts
-declare const TEXT_LEVELS: Record<string, string>;
-//#endregion
-export { TEXT_LEVELS };
-//# sourceMappingURL=enums.d.mts.map

package/dist/enums.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"enums.d.mts","names":[],"sources":["../src/lib/enums/index.ts"],"mappings":";cAAa,WAAA,EAAa,MAAA"}

package/dist/enums.mjs

@@ -1,13 +0,0 @@
-//#region src/lib/enums/index.ts
-const TEXT_LEVELS = {
-	1: "text-2xl",
-	2: "text-xl",
-	3: "text-lg",
-	4: "text-base",
-	5: "text-sm",
-	6: "text-xs"
-};
-
-//#endregion
-export { TEXT_LEVELS };
-//# sourceMappingURL=enums.mjs.map

package/dist/enums.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"enums.mjs","names":[],"sources":["../src/lib/enums/index.ts"],"sourcesContent":["export const TEXT_LEVELS: Record<string, string> = {\n  1: 'text-2xl',\n  2: 'text-xl',\n  3: 'text-lg',\n  4: 'text-base',\n  5: 'text-sm',\n  6: 'text-xs',\n};\n"],"mappings":";AAAA,MAAa,cAAsC;CACjD,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ"}