softable-pixels-web 1.2.46 → 1.2.47

package/dist/MonthPicker-RD8OdkPP.js

@@ -0,0 +1,347 @@
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-BRdb57J9.js";
+import { t as Typography } from "./Typography-0qDw3WVA.js";
+import { t as Icon } from "./Icon-UUxBec64.js";
+import { t as capitalize } from "./capitalize-D8uVkWtL.js";
+import { t as BasePopover } from "./BasePopover-BTCH2Kyr.js";
+import { t as Label } from "./Label-bfESBaYl.js";
+import { forwardRef, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ptBR } from "date-fns/locale";
+import { format } from "date-fns/format";
+import { format as format$1 } from "date-fns";
+
+//#region src/components/commons/inputs/MonthPicker/components/MonthGrid/components/MonthButton/utils/getMonthLabel.ts
+function getMonthLabel(month, year) {
+	return capitalize(format$1(new Date(year, month - 1, 1), "MMM", { locale: ptBR }));
+}
+
+//#endregion
+//#region src/components/commons/inputs/MonthPicker/components/MonthGrid/components/MonthButton/styles.ts
+function createMonthButtonStyles(props) {
+	return styled({ button: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		padding: "0.5rem",
+		borderRadius: "0.5rem",
+		cursor: props.isDisabled ? "not-allowed" : "pointer",
+		opacity: props.isDisabled ? .4 : 1,
+		fontWeight: props.isCurrentMonth ? "600" : "400",
+		backgroundColor: props.isSelected ? "var(--px-color-primary)" : "transparent",
+		color: props.isSelected ? "var(--px-color-primary-contrast)" : "var(--px-text-primary)",
+		border: props.isCurrentMonth && !props.isSelected ? "1px solid var(--px-border-primary)" : "1px solid transparent",
+		transition: "background-color 0.15s ease-out",
+		__rules: { "&:hover": { backgroundColor: props.isSelected ? "var(--px-color-primary)" : props.isDisabled ? "transparent" : "var(--color-gray-50)" } }
+	} });
+}
+
+//#endregion
+//#region src/components/commons/inputs/MonthPicker/components/MonthGrid/components/MonthButton/index.tsx
+const MonthButton = ({ month, year, isSelected, isDisabled, isCurrentMonth, onSelect }) => {
+	const { styles, classes } = useThemedStyles({
+		isSelected,
+		isDisabled,
+		isCurrentMonth
+	}, createMonthButtonStyles, { pick: (p) => [
+		p.isSelected,
+		p.isDisabled,
+		p.isCurrentMonth
+	] });
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		disabled: isDisabled,
+		style: styles.button,
+		className: classes.button,
+		onClick: () => !isDisabled && onSelect({
+			year,
+			month
+		}),
+		children: /* @__PURE__ */ jsx(Typography, {
+			variant: "b2",
+			fontWeight: "semibold",
+			color: isSelected ? "var(--px-text-inverse)" : void 0,
+			children: getMonthLabel(month, year)
+		})
+	});
+};
+
+//#endregion
+//#region src/components/commons/inputs/MonthPicker/components/MonthGrid/constants.ts
+const MONTHS = Array.from({ length: 12 }, (_, i) => i + 1);
+
+//#endregion
+//#region src/components/commons/inputs/MonthPicker/components/MonthGrid/styles.ts
+function createMonthGridStyles() {
+	return styled({
+		container: {
+			padding: "1rem",
+			display: "flex",
+			flexDirection: "column",
+			gap: "0.75rem",
+			minWidth: "16rem"
+		},
+		header: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between"
+		},
+		navButton: {
+			display: "flex",
+			cursor: "pointer",
+			padding: "0.125rem",
+			borderRadius: "50%",
+			transition: "background-color 0.2s ease-out",
+			__rules: { "&:hover": { backgroundColor: "var(--color-gray-50)" } }
+		},
+		grid: {
+			display: "grid",
+			gridTemplateColumns: "repeat(3, 1fr)",
+			gap: "0.5rem"
+		}
+	});
+}
+
+//#endregion
+//#region src/components/commons/inputs/MonthPicker/components/MonthGrid/index.tsx
+const MonthGrid = ({ value, disablePastMonths, disableFutureMonths, onSelect }) => {
+	const today = /* @__PURE__ */ new Date();
+	const [displayYear, setDisplayYear] = useState(value?.year ?? today.getFullYear());
+	const { styles } = useThemedStyles({}, createMonthGridStyles, { applyCommonProps: true });
+	function isPastMonth(month) {
+		if (!disablePastMonths) return false;
+		return displayYear < today.getFullYear() || displayYear === today.getFullYear() && month < today.getMonth() + 1;
+	}
+	function isFutureMonth(month) {
+		if (!disableFutureMonths) return false;
+		return displayYear > today.getFullYear() || displayYear === today.getFullYear() && month > today.getMonth() + 1;
+	}
+	const canGoPrev = !disablePastMonths || displayYear > today.getFullYear();
+	const canGoNext = !disableFutureMonths || displayYear < today.getFullYear();
+	return /* @__PURE__ */ jsxs("div", {
+		style: styles.container,
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: styles.header,
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled: !canGoPrev,
+					style: {
+						...styles.navButton,
+						opacity: canGoPrev ? 1 : .3
+					},
+					onClick: () => canGoPrev && setDisplayYear((y) => y - 1),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "chevrons-left",
+						color: "var(--px-text-secondary)"
+					})
+				}),
+				/* @__PURE__ */ jsx(Typography, {
+					variant: "b2",
+					fontWeight: "semibold",
+					children: displayYear
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled: !canGoNext,
+					style: {
+						...styles.navButton,
+						opacity: canGoNext ? 1 : .3,
+						rotate: "180deg"
+					},
+					onClick: () => canGoNext && setDisplayYear((y) => y + 1),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "chevrons-left",
+						color: "var(--px-text-secondary)"
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			style: styles.grid,
+			children: MONTHS.map((month) => /* @__PURE__ */ jsx(MonthButton, {
+				month,
+				year: displayYear,
+				isSelected: value?.year === displayYear && value?.month === month,
+				isDisabled: isPastMonth(month) || isFutureMonth(month),
+				isCurrentMonth: today.getFullYear() === displayYear && today.getMonth() + 1 === month,
+				onSelect
+			}, month))
+		})]
+	});
+};
+
+//#endregion
+//#region src/components/commons/inputs/MonthPicker/components/MonthPickerTrigger/styles.ts
+function createMonthPickerTriggerStyles(props) {
+	return styled({
+		container: {
+			width: "100%",
+			display: "flex",
+			flexDirection: "column",
+			gap: "0.5rem",
+			opacity: props.disabled ? .5 : 1,
+			cursor: props.disabled ? "not-allowed" : "pointer"
+		},
+		button: {
+			width: "100%",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			gap: "0.5rem",
+			borderRadius: "0.5rem",
+			padding: "0.625rem 0.875rem",
+			border: props.errorMessage ? "1px solid var(--px-color-error)" : "1px solid var(--px-border-primary)",
+			__rules: {
+				"&:hover": {
+					boxShadow: "var(--px-shadow-default)",
+					borderColor: "var(--px-color-primary)"
+				},
+				"&:focus-within": {
+					outlineOffset: "-1px",
+					outline: props.errorMessage ? "2px solid var(--px-color-error)" : `2px solid var(--px-color-primary)`
+				}
+			}
+		},
+		buttonContent: {
+			display: "flex",
+			alignItems: "center",
+			gap: "0.5rem"
+		}
+	});
+}
+
+//#endregion
+//#region src/components/commons/inputs/MonthPicker/components/MonthPickerTrigger/index.tsx
+const MonthPickerTrigger = forwardRef(function MonthPickerTrigger$1(props, ref) {
+	const inputId = useId();
+	const { styles, classes } = useThemedStyles(props, createMonthPickerTriggerStyles, {
+		pick: (p) => [p.disabled, p.errorMessage],
+		applyCommonProps: true,
+		commonSlot: "container"
+	});
+	const { label, value, disabled, required, placeholder, onClick } = props;
+	function renderLabel() {
+		if (!value) return placeholder ?? "Selecione um mês";
+		return capitalize(format(new Date(value.year, value.month - 1, 1), "MMMM yyyy", { locale: ptBR }));
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		style: styles.container,
+		children: [
+			/* @__PURE__ */ jsx(Label, {
+				label,
+				htmlFor: inputId,
+				required,
+				requiredColor: "var(--color-error)"
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				ref,
+				id: inputId,
+				type: "button",
+				disabled,
+				style: styles.button,
+				"aria-expanded": props.ariaExpanded,
+				className: classes.button,
+				onClick,
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: styles.buttonContent,
+					children: [/* @__PURE__ */ jsx(Icon, {
+						size: "sm",
+						name: "general-calendar",
+						color: "var(--px-text-primary)"
+					}), /* @__PURE__ */ jsx(Typography, {
+						variant: "b1",
+						className: "font-normal",
+						children: renderLabel()
+					})]
+				}), /* @__PURE__ */ jsx(Icon, {
+					size: "sm",
+					color: "var(--px-text-primary)",
+					name: props.ariaExpanded ? "chevrons-up" : "chevrons-down"
+				})]
+			}),
+			props.errorMessage ? /* @__PURE__ */ jsx(Typography, {
+				variant: "b2",
+				fontSize: "0.75rem",
+				fontWeight: "regular",
+				color: "var(--px-color-error)",
+				children: props.errorMessage
+			}) : null
+		]
+	});
+});
+
+//#endregion
+//#region src/components/commons/inputs/MonthPicker/hooks/useMonthPicker.ts
+function useMonthPicker(params) {
+	const [isOpen, setOpen] = useState(false);
+	const [selectedValue, setSelectedValue] = useState(params.value);
+	function toggleDialog(status) {
+		if (status) setSelectedValue(params.value);
+		setOpen(status);
+	}
+	function handleMonthSelect(value) {
+		setOpen(false);
+		params.onChange(value);
+	}
+	return {
+		isOpen,
+		selectedValue,
+		toggleDialog,
+		handleMonthSelect
+	};
+}
+
+//#endregion
+//#region src/components/commons/inputs/MonthPicker/styles.ts
+function createMonthPickerStyles() {
+	return styled({ container: { width: "100%" } });
+}
+
+//#endregion
+//#region src/components/commons/inputs/MonthPicker/types.ts
+var types_exports = {};
+
+//#endregion
+//#region src/components/commons/inputs/MonthPicker/index.tsx
+const MonthPicker = ({ placementContainer = "bottom-start", ...props }) => {
+	const { isOpen, selectedValue, toggleDialog, handleMonthSelect } = useMonthPicker(props);
+	const { styles } = useThemedStyles(props, createMonthPickerStyles, {
+		applyCommonProps: true,
+		commonSlot: "container"
+	});
+	function renderTrigger({ ref, ariaExpanded, onClick }) {
+		return /* @__PURE__ */ jsx(MonthPickerTrigger, {
+			...props,
+			ref,
+			value: props.value,
+			ariaExpanded,
+			onClick
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		style: styles.container,
+		children: /* @__PURE__ */ jsx(BasePopover, {
+			open: isOpen,
+			maxWidth: "fit-content",
+			minWidth: "fit-content",
+			maxHeight: "fit-content",
+			portalId: props.portalId,
+			trigger: renderTrigger,
+			onOpenChange: toggleDialog,
+			floatingOptions: {
+				strategy: "fixed",
+				placement: placementContainer,
+				scrollContainerId: props.scrollContainerId
+			},
+			children: /* @__PURE__ */ jsx(MonthGrid, {
+				value: selectedValue,
+				disablePastMonths: props.disablePastMonths,
+				disableFutureMonths: props.disableFutureMonths,
+				onSelect: handleMonthSelect
+			})
+		})
+	});
+};
+
+//#endregion
+export { types_exports as n, MonthPicker as t };
+//# sourceMappingURL=MonthPicker-RD8OdkPP.js.map

package/dist/MonthPicker-RD8OdkPP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthPicker-RD8OdkPP.js","names":["format","MonthButton: React.FC<MonthButtonProps>","MonthGrid: React.FC<MonthGridProps>","MonthPickerTrigger","MonthPicker: React.FC<MonthPickerProps>"],"sources":["../src/components/commons/inputs/MonthPicker/components/MonthGrid/components/MonthButton/utils/getMonthLabel.ts","../src/components/commons/inputs/MonthPicker/components/MonthGrid/components/MonthButton/styles.ts","../src/components/commons/inputs/MonthPicker/components/MonthGrid/components/MonthButton/index.tsx","../src/components/commons/inputs/MonthPicker/components/MonthGrid/constants.ts","../src/components/commons/inputs/MonthPicker/components/MonthGrid/styles.ts","../src/components/commons/inputs/MonthPicker/components/MonthGrid/index.tsx","../src/components/commons/inputs/MonthPicker/components/MonthPickerTrigger/styles.ts","../src/components/commons/inputs/MonthPicker/components/MonthPickerTrigger/index.tsx","../src/components/commons/inputs/MonthPicker/hooks/useMonthPicker.ts","../src/components/commons/inputs/MonthPicker/styles.ts","../src/components/commons/inputs/MonthPicker/types.ts","../src/components/commons/inputs/MonthPicker/index.tsx"],"sourcesContent":["// External libraries\nimport { format } from 'date-fns'\nimport { ptBR } from 'date-fns/locale'\n\n// Utils\nimport { capitalize } from '@utils/functions'\n\nexport function getMonthLabel(month: number, year: number) {\n  const date = new Date(year, month - 1, 1)\n  return capitalize(format(date, 'MMM', { locale: ptBR }))\n}\n","import { styled } from '@hooks/useThemedStyles/types'\n\ninterface MonthButtonStyleProps {\n  isSelected: boolean\n  isDisabled: boolean\n  isCurrentMonth: boolean\n}\n\nexport function createMonthButtonStyles(props: MonthButtonStyleProps) {\n  return styled({\n    button: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      padding: '0.5rem',\n      borderRadius: '0.5rem',\n      cursor: props.isDisabled ? 'not-allowed' : 'pointer',\n      opacity: props.isDisabled ? 0.4 : 1,\n      fontWeight: props.isCurrentMonth ? '600' : '400',\n\n      backgroundColor: props.isSelected\n        ? 'var(--px-color-primary)'\n        : 'transparent',\n\n      color: props.isSelected\n        ? 'var(--px-color-primary-contrast)'\n        : 'var(--px-text-primary)',\n\n      border:\n        props.isCurrentMonth && !props.isSelected\n          ? '1px solid var(--px-border-primary)'\n          : '1px solid transparent',\n\n      transition: 'background-color 0.15s ease-out',\n\n      __rules: {\n        '&:hover': {\n          backgroundColor: props.isSelected\n            ? 'var(--px-color-primary)'\n            : props.isDisabled\n              ? 'transparent'\n              : 'var(--color-gray-50)'\n        }\n      }\n    }\n  })\n}\n","// External libraries\nimport type React from 'react'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { getMonthLabel } from './utils'\n\n// Types\nimport type { MonthPickerValue } from '@components/commons/inputs/MonthPicker/types'\n\n// Styles\nimport { createMonthButtonStyles } from './styles'\n\ninterface MonthButtonProps {\n  month: number\n  year: number\n  isSelected: boolean\n  isDisabled: boolean\n  isCurrentMonth: boolean\n  onSelect: (value: MonthPickerValue) => void\n}\n\nexport const MonthButton: React.FC<MonthButtonProps> = ({\n  month,\n  year,\n  isSelected,\n  isDisabled,\n  isCurrentMonth,\n  onSelect\n}) => {\n  const { styles, classes } = useThemedStyles(\n    { isSelected, isDisabled, isCurrentMonth },\n    createMonthButtonStyles,\n    { pick: p => [p.isSelected, p.isDisabled, p.isCurrentMonth] }\n  )\n\n  return (\n    <button\n      type=\"button\"\n      disabled={isDisabled}\n      style={styles.button}\n      className={classes.button}\n      onClick={() => !isDisabled && onSelect({ year, month })}\n    >\n      <Typography\n        variant=\"b2\"\n        fontWeight={'semibold'}\n        color={isSelected ? 'var(--px-text-inverse)' : undefined}\n      >\n        {getMonthLabel(month, year)}\n      </Typography>\n    </button>\n  )\n}\n","export const MONTHS = Array.from({ length: 12 }, (_, i) => i + 1)\n","import { styled } from '@hooks/useThemedStyles/types'\n\nexport function createMonthGridStyles() {\n  return styled({\n    container: {\n      padding: '1rem',\n      display: 'flex',\n      flexDirection: 'column' as const,\n      gap: '0.75rem',\n      minWidth: '16rem'\n    },\n\n    header: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between'\n    },\n\n    navButton: {\n      display: 'flex',\n      cursor: 'pointer',\n      padding: '0.125rem',\n      borderRadius: '50%',\n      transition: 'background-color 0.2s ease-out',\n\n      __rules: {\n        '&:hover': {\n          backgroundColor: 'var(--color-gray-50)'\n        }\n      }\n    },\n\n    grid: {\n      display: 'grid',\n      gridTemplateColumns: 'repeat(3, 1fr)',\n      gap: '0.5rem'\n    }\n  })\n}","// External Libraries\nimport type React from 'react'\nimport { useState } from 'react'\n\n// Components\nimport { MonthButton } from './components/MonthButton'\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { MONTHS } from './constants'\n\n// Types\nimport type { MonthGridProps } from './types'\n\n// Styles\nimport { createMonthGridStyles } from './styles'\n\nexport const MonthGrid: React.FC<MonthGridProps> = ({\n  value,\n  disablePastMonths,\n  disableFutureMonths,\n  onSelect\n}) => {\n  const today = new Date()\n  const [displayYear, setDisplayYear] = useState(\n    value?.year ?? today.getFullYear()\n  )\n\n  const { styles } = useThemedStyles({}, createMonthGridStyles, {\n    applyCommonProps: true\n  })\n\n  function isPastMonth(month: number) {\n    if (!disablePastMonths) return false\n    return (\n      displayYear < today.getFullYear() ||\n      (displayYear === today.getFullYear() && month < today.getMonth() + 1)\n    )\n  }\n\n  function isFutureMonth(month: number) {\n    if (!disableFutureMonths) return false\n    return (\n      displayYear > today.getFullYear() ||\n      (displayYear === today.getFullYear() && month > today.getMonth() + 1)\n    )\n  }\n\n  const canGoPrev = !disablePastMonths || displayYear > today.getFullYear()\n\n  const canGoNext = !disableFutureMonths || displayYear < today.getFullYear()\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.header}>\n        <button\n          type=\"button\"\n          disabled={!canGoPrev}\n          style={{ ...styles.navButton, opacity: canGoPrev ? 1 : 0.3 }}\n          onClick={() => canGoPrev && setDisplayYear(y => y - 1)}\n        >\n          <Icon name=\"chevrons-left\" color=\"var(--px-text-secondary)\" />\n        </button>\n\n        <Typography variant=\"b2\" fontWeight=\"semibold\">\n          {displayYear}\n        </Typography>\n\n        <button\n          type=\"button\"\n          disabled={!canGoNext}\n          style={{\n            ...styles.navButton,\n            opacity: canGoNext ? 1 : 0.3,\n            rotate: '180deg'\n          }}\n          onClick={() => canGoNext && setDisplayYear(y => y + 1)}\n        >\n          <Icon name=\"chevrons-left\" color=\"var(--px-text-secondary)\" />\n        </button>\n      </div>\n\n      <div style={styles.grid}>\n        {MONTHS.map(month => (\n          <MonthButton\n            key={month}\n            month={month}\n            year={displayYear}\n            isSelected={value?.year === displayYear && value?.month === month}\n            isDisabled={isPastMonth(month) || isFutureMonth(month)}\n            isCurrentMonth={\n              today.getFullYear() === displayYear &&\n              today.getMonth() + 1 === month\n            }\n            onSelect={onSelect}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n","import { styled } from '@hooks/useThemedStyles/types'\nimport type { MonthPickerTriggerProps } from './types'\n\nexport function createMonthPickerTriggerStyles(props: MonthPickerTriggerProps) {\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      gap: '0.5rem',\n\n      opacity: props.disabled ? 0.5 : 1,\n      cursor: props.disabled ? 'not-allowed' : 'pointer'\n    },\n    button: {\n      width: '100%',\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n\n      gap: '0.5rem',\n      borderRadius: '0.5rem',\n      padding: '0.625rem 0.875rem',\n\n      border: props.errorMessage\n        ? '1px solid var(--px-color-error)'\n        : '1px solid var(--px-border-primary)',\n\n      __rules: {\n        '&:hover': {\n          boxShadow: 'var(--px-shadow-default)',\n          borderColor: 'var(--px-color-primary)'\n        },\n        '&:focus-within': {\n          outlineOffset: '-1px',\n          outline: props.errorMessage\n            ? '2px solid var(--px-color-error)'\n            : `2px solid var(--px-color-primary)`\n        }\n      }\n    },\n    buttonContent: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '0.5rem'\n    }\n  })\n}\n","// External Libraries\nimport { forwardRef, useId } from 'react'\nimport { ptBR } from 'date-fns/locale'\nimport { format } from 'date-fns/format'\n\n// Components\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { Label } from '@components/commons/toolkit/Label'\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { capitalize } from '@utils/functions'\n\n// Types\nimport type { MonthPickerTriggerProps } from './types'\n\n// Styles\nimport { createMonthPickerTriggerStyles } from './styles'\n\nexport const MonthPickerTrigger = forwardRef<\n  HTMLButtonElement,\n  MonthPickerTriggerProps\n>(function MonthPickerTrigger(props, ref) {\n  const inputId = useId()\n  const { styles, classes } = useThemedStyles(\n    props,\n    createMonthPickerTriggerStyles,\n    {\n      pick: p => [p.disabled, p.errorMessage],\n      applyCommonProps: true,\n      commonSlot: 'container'\n    }\n  )\n\n  // Constants\n  const { label, value, disabled, required, placeholder, onClick } = props\n\n  // Functions\n  function renderLabel() {\n    if (!value) return placeholder ?? 'Selecione um mês'\n\n    const date = new Date(value.year, value.month - 1, 1)\n    return capitalize(format(date, 'MMMM yyyy', { locale: ptBR }))\n  }\n\n  return (\n    <div style={styles.container}>\n      <Label\n        label={label}\n        htmlFor={inputId}\n        required={required}\n        requiredColor=\"var(--color-error)\"\n      />\n\n      <button\n        ref={ref}\n        id={inputId}\n        type=\"button\"\n        disabled={disabled}\n        style={styles.button}\n        aria-expanded={props.ariaExpanded}\n        className={classes.button}\n        onClick={onClick}\n      >\n        <div style={styles.buttonContent}>\n          <Icon\n            size=\"sm\"\n            name=\"general-calendar\"\n            color=\"var(--px-text-primary)\"\n          />\n\n          <Typography variant=\"b1\" className=\"font-normal\">\n            {renderLabel()}\n          </Typography>\n        </div>\n\n        <Icon\n          size=\"sm\"\n          color=\"var(--px-text-primary)\"\n          name={props.ariaExpanded ? 'chevrons-up' : 'chevrons-down'}\n        />\n      </button>\n\n      {props.errorMessage ? (\n        <Typography\n          variant=\"b2\"\n          fontSize=\"0.75rem\"\n          fontWeight=\"regular\"\n          color=\"var(--px-color-error)\"\n        >\n          {props.errorMessage}\n        </Typography>\n      ) : null}\n    </div>\n  )\n})\n","// External Libraries\nimport { useState } from 'react'\n\n// Types\nimport type { MonthPickerProps, MonthPickerValue } from '../types'\n\nexport function useMonthPicker(params: MonthPickerProps) {\n  // States\n  const [isOpen, setOpen] = useState(false)\n  const [selectedValue, setSelectedValue] = useState<\n    MonthPickerValue | undefined\n  >(params.value)\n\n  // Functions\n  function toggleDialog(status: boolean) {\n    if (status) setSelectedValue(params.value)\n    setOpen(status)\n  }\n\n  function handleMonthSelect(value: MonthPickerValue) {\n    setOpen(false)\n    params.onChange(value)\n  }\n\n  return {\n    isOpen,\n    selectedValue,\n    toggleDialog,\n    handleMonthSelect\n  }\n}\n","import { styled } from '@hooks/useThemedStyles/types'\n\nexport function createMonthPickerStyles() {\n  return styled({\n    container: {\n      width: '100%'\n    }\n  })\n}\n","import type { PopoverProps } from '@components/commons/toolkit/Popover/types'\n\nexport interface MonthPickerValue {\n  year: number\n  month: number\n}\n\nexport interface MonthPickerProps {\n  label: string\n  value?: MonthPickerValue\n  onChange: (value: MonthPickerValue) => void\n\n  disabled?: boolean\n  required?: boolean\n  placeholder?: string\n  errorMessage?: string\n  scrollContainerId: string\n  placementContainer?: 'bottom' | 'bottom-end' | 'bottom-start'\n  portalId?: PopoverProps['portalId']\n  disablePastMonths?: boolean\n  disableFutureMonths?: boolean\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { MonthGrid } from './components/MonthGrid'\nimport { MonthPickerTrigger } from './components/MonthPickerTrigger'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useMonthPicker } from './hooks/useMonthPicker'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { MonthPickerProps } from './types'\nimport type { PopoverTriggerRenderProps } from '@components/commons/toolkit/Popover/types'\n\n// Styles\nimport { createMonthPickerStyles } from './styles'\n\nexport * as MonthPickerTypes from './types'\n\nexport const MonthPicker: React.FC<MonthPickerProps> = ({\n  placementContainer = 'bottom-start',\n  ...props\n}) => {\n  // Hooks\n  const { isOpen, selectedValue, toggleDialog, handleMonthSelect } =\n    useMonthPicker(props)\n  const { styles } = useThemedStyles(props, createMonthPickerStyles, {\n    applyCommonProps: true,\n    commonSlot: 'container'\n  })\n\n  // Functions\n  function renderTrigger({\n    ref,\n    ariaExpanded,\n    onClick\n  }: PopoverTriggerRenderProps) {\n    return (\n      <MonthPickerTrigger\n        {...props}\n        ref={ref as any}\n        value={props.value}\n        ariaExpanded={ariaExpanded}\n        onClick={onClick}\n      />\n    )\n  }\n\n  return (\n    <div style={styles.container}>\n      <BasePopover\n        open={isOpen}\n        maxWidth=\"fit-content\"\n        minWidth=\"fit-content\"\n        maxHeight=\"fit-content\"\n        portalId={props.portalId}\n        trigger={renderTrigger}\n        onOpenChange={toggleDialog}\n        floatingOptions={{\n          strategy: 'fixed',\n          placement: placementContainer,\n          scrollContainerId: props.scrollContainerId\n        }}\n      >\n        <MonthGrid\n          value={selectedValue}\n          disablePastMonths={props.disablePastMonths}\n          disableFutureMonths={props.disableFutureMonths}\n          onSelect={handleMonthSelect}\n        />\n      </BasePopover>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/{Pagination-i2_x464D.js → Pagination-4aVbwtyy.js}

@@ -1,8 +1,8 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-Dco_54KA.js";
-import { t as Typography } from "./Typography-CcQTHV-F.js";
-import { t as Icon } from "./Icon-bV19y393.js";
-import { t as IconButton } from "./IconButton-R8wpGZU_.js";
-import { t as Button } from "./Button-CWZvWbMh.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-BRdb57J9.js";
+import { t as Typography } from "./Typography-0qDw3WVA.js";
+import { t as Icon } from "./Icon-UUxBec64.js";
+import { t as IconButton } from "./IconButton-lTDxIz4Y.js";
+import { t as Button } from "./Button-DXCUuf_n.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/commons/toolkit/Pagination/components/ArrowButtons/hooks/usePagination/index.ts
@@ -177,4 +177,4 @@ const Pagination = (props) => {
 
 //#endregion
 export { Pagination as t };
-//# sourceMappingURL=Pagination-i2_x464D.js.map
+//# sourceMappingURL=Pagination-4aVbwtyy.js.map

package/dist/{Pagination-i2_x464D.js.map → Pagination-4aVbwtyy.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Pagination-i2_x464D.js","names":["ArrowButtons: React.FC<ArrowButtonProps>","Pagination: React.FC<PaginationProps>"],"sources":["../src/components/commons/toolkit/Pagination/components/ArrowButtons/hooks/usePagination/index.ts","../src/components/commons/toolkit/Pagination/styles.ts","../src/components/commons/toolkit/Pagination/components/ArrowButtons/index.tsx","../src/components/commons/toolkit/Pagination/utils/getVisiblePages/index.ts","../src/components/commons/toolkit/Pagination/index.tsx"],"sourcesContent":["import type { PaginationInfoProps } from './types'\n\nexport function usePagination({\n  pageNumber,\n  totalPages,\n  onPageChange\n}: PaginationInfoProps) {\n  // Functions\n  function handleFirstPage() {\n    if (pageNumber > 1) return onPageChange(1)\n  }\n\n  function handlePreviousPage() {\n    if (pageNumber > 1) return onPageChange(pageNumber - 1)\n  }\n\n  function handleNextPage() {\n    if (pageNumber < totalPages) return onPageChange(pageNumber + 1)\n  }\n\n  function handleLastPage() {\n    if (pageNumber < totalPages) return onPageChange(totalPages)\n  }\n\n  return {\n    handleFirstPage,\n    handlePreviousPage,\n    handleNextPage,\n    handleLastPage\n  }\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createPaginationStyles() {\n  return styled({\n    container: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      gap: '0.25rem'\n    },\n\n    pagesRow: {\n      display: 'flex',\n      alignItems: 'center',\n\n      gap: '0.25rem'\n    },\n\n    arrowButtons: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      gap: '0.25rem'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { IconButton } from '@components/commons/buttons/IconButton'\n\n// Hooks\nimport { usePagination } from './hooks/usePagination'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ArrowButtonProps } from './types'\n\n// Styles\nimport { createPaginationStyles } from '../../styles'\n\nexport const ArrowButtons: React.FC<ArrowButtonProps> = props => {\n  const { pageNumber, totalPages, direction, onPageChange } = props\n\n  // Constants\n  const isFirstPage = pageNumber === 1\n  const isLastPage = pageNumber === totalPages\n\n  // Hooks\n  const {\n    handleFirstPage,\n    handlePreviousPage,\n    handleNextPage,\n    handleLastPage\n  } = usePagination({ pageNumber, totalPages, onPageChange })\n  const { styles } = useThemedStyles(props, createPaginationStyles)\n\n  // Functions\n  function renderPreviousButtons() {\n    if (totalPages === 1) return null\n\n    return (\n      <div style={styles.arrowButtons}>\n        <IconButton\n          variant=\"outlined\"\n          isDisabled={isFirstPage}\n          icon={<Icon name={'chevrons-double-left'} />}\n          onClick={handleFirstPage}\n        />\n\n        <IconButton\n          variant=\"outlined\"\n          isDisabled={isFirstPage}\n          icon={<Icon name={'chevrons-left'} />}\n          onClick={handlePreviousPage}\n        />\n      </div>\n    )\n  }\n\n  function renderNextButtons() {\n    if (totalPages === 1) return null\n\n    return (\n      <div style={styles.arrowButtons}>\n        <IconButton\n          variant=\"outlined\"\n          isDisabled={isLastPage}\n          icon={<Icon name={'chevrons-right'} />}\n          onClick={handleNextPage}\n        />\n\n        <IconButton\n          variant=\"outlined\"\n          isDisabled={isLastPage}\n          icon={<Icon name={'chevrons-double-right'} />}\n          onClick={handleLastPage}\n        />\n      </div>\n    )\n  }\n\n  return direction === 'left' ? renderPreviousButtons() : renderNextButtons()\n}\n","interface Props {\n  pageNumber: number\n  totalPages: number\n}\n\nexport function getVisiblePages({\n  pageNumber,\n  totalPages\n}: Props): (number | string)[] {\n  if (totalPages <= 4) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1)\n  }\n\n  if (pageNumber <= 3) {\n    return [1, 2, 3, '...', totalPages]\n  }\n\n  if (pageNumber >= totalPages - 2) {\n    return [totalPages - 3, totalPages - 2, totalPages - 1, totalPages]\n  }\n\n  return [pageNumber - 1, pageNumber, pageNumber + 1, '...', totalPages]\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Typography } from '../Typography'\nimport { ArrowButtons } from './components/ArrowButtons'\nimport { Button } from '@components/commons/buttons/Button'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { getVisiblePages } from './utils/getVisiblePages'\n\n// Types\nimport type { PaginationProps } from './types'\n\n// Styles\nimport { createPaginationStyles } from './styles'\n\nexport const Pagination: React.FC<PaginationProps> = props => {\n  const { pageNumber, totalPages, onPageChange } = props\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createPaginationStyles, {\n    applyCommonProps: true,\n    commonSlot: 'container'\n  })\n\n  // Functions\n  function renderPagination() {\n    const pages = getVisiblePages({ pageNumber, totalPages })\n\n    return (\n      <div style={styles.pagesRow}>\n        {pages.map((page, index) =>\n          page === '...' ? (\n            <Typography\n              key={`ellipsis-${index.toString()}`}\n              variant=\"b1\"\n              color={'var(--px-btn-outlined-label)'}\n              styles={{ text: { paddingTop: '0.5rem' } }}\n            >\n              ...\n            </Typography>\n          ) : (\n            <Button\n              key={`${page}-${index.toString()}`}\n              px=\"1rem\"\n              py=\"0.5rem\"\n              label={String(page)}\n              variant={page === pageNumber ? 'filled' : 'outlined'}\n              onClick={() => onPageChange(page as number)}\n            />\n          )\n        )}\n      </div>\n    )\n  }\n\n  return (\n    <div style={styles.container}>\n      <ArrowButtons\n        direction=\"left\"\n        pageNumber={pageNumber}\n        totalPages={totalPages}\n        onPageChange={onPageChange}\n      />\n\n      {renderPagination()}\n\n      <ArrowButtons\n        direction=\"right\"\n        pageNumber={pageNumber}\n        totalPages={totalPages}\n        onPageChange={onPageChange}\n      />\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Pagination-4aVbwtyy.js","names":["ArrowButtons: React.FC<ArrowButtonProps>","Pagination: React.FC<PaginationProps>"],"sources":["../src/components/commons/toolkit/Pagination/components/ArrowButtons/hooks/usePagination/index.ts","../src/components/commons/toolkit/Pagination/styles.ts","../src/components/commons/toolkit/Pagination/components/ArrowButtons/index.tsx","../src/components/commons/toolkit/Pagination/utils/getVisiblePages/index.ts","../src/components/commons/toolkit/Pagination/index.tsx"],"sourcesContent":["import type { PaginationInfoProps } from './types'\n\nexport function usePagination({\n  pageNumber,\n  totalPages,\n  onPageChange\n}: PaginationInfoProps) {\n  // Functions\n  function handleFirstPage() {\n    if (pageNumber > 1) return onPageChange(1)\n  }\n\n  function handlePreviousPage() {\n    if (pageNumber > 1) return onPageChange(pageNumber - 1)\n  }\n\n  function handleNextPage() {\n    if (pageNumber < totalPages) return onPageChange(pageNumber + 1)\n  }\n\n  function handleLastPage() {\n    if (pageNumber < totalPages) return onPageChange(totalPages)\n  }\n\n  return {\n    handleFirstPage,\n    handlePreviousPage,\n    handleNextPage,\n    handleLastPage\n  }\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createPaginationStyles() {\n  return styled({\n    container: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      gap: '0.25rem'\n    },\n\n    pagesRow: {\n      display: 'flex',\n      alignItems: 'center',\n\n      gap: '0.25rem'\n    },\n\n    arrowButtons: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      gap: '0.25rem'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { IconButton } from '@components/commons/buttons/IconButton'\n\n// Hooks\nimport { usePagination } from './hooks/usePagination'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ArrowButtonProps } from './types'\n\n// Styles\nimport { createPaginationStyles } from '../../styles'\n\nexport const ArrowButtons: React.FC<ArrowButtonProps> = props => {\n  const { pageNumber, totalPages, direction, onPageChange } = props\n\n  // Constants\n  const isFirstPage = pageNumber === 1\n  const isLastPage = pageNumber === totalPages\n\n  // Hooks\n  const {\n    handleFirstPage,\n    handlePreviousPage,\n    handleNextPage,\n    handleLastPage\n  } = usePagination({ pageNumber, totalPages, onPageChange })\n  const { styles } = useThemedStyles(props, createPaginationStyles)\n\n  // Functions\n  function renderPreviousButtons() {\n    if (totalPages === 1) return null\n\n    return (\n      <div style={styles.arrowButtons}>\n        <IconButton\n          variant=\"outlined\"\n          isDisabled={isFirstPage}\n          icon={<Icon name={'chevrons-double-left'} />}\n          onClick={handleFirstPage}\n        />\n\n        <IconButton\n          variant=\"outlined\"\n          isDisabled={isFirstPage}\n          icon={<Icon name={'chevrons-left'} />}\n          onClick={handlePreviousPage}\n        />\n      </div>\n    )\n  }\n\n  function renderNextButtons() {\n    if (totalPages === 1) return null\n\n    return (\n      <div style={styles.arrowButtons}>\n        <IconButton\n          variant=\"outlined\"\n          isDisabled={isLastPage}\n          icon={<Icon name={'chevrons-right'} />}\n          onClick={handleNextPage}\n        />\n\n        <IconButton\n          variant=\"outlined\"\n          isDisabled={isLastPage}\n          icon={<Icon name={'chevrons-double-right'} />}\n          onClick={handleLastPage}\n        />\n      </div>\n    )\n  }\n\n  return direction === 'left' ? renderPreviousButtons() : renderNextButtons()\n}\n","interface Props {\n  pageNumber: number\n  totalPages: number\n}\n\nexport function getVisiblePages({\n  pageNumber,\n  totalPages\n}: Props): (number | string)[] {\n  if (totalPages <= 4) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1)\n  }\n\n  if (pageNumber <= 3) {\n    return [1, 2, 3, '...', totalPages]\n  }\n\n  if (pageNumber >= totalPages - 2) {\n    return [totalPages - 3, totalPages - 2, totalPages - 1, totalPages]\n  }\n\n  return [pageNumber - 1, pageNumber, pageNumber + 1, '...', totalPages]\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Typography } from '../Typography'\nimport { ArrowButtons } from './components/ArrowButtons'\nimport { Button } from '@components/commons/buttons/Button'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { getVisiblePages } from './utils/getVisiblePages'\n\n// Types\nimport type { PaginationProps } from './types'\n\n// Styles\nimport { createPaginationStyles } from './styles'\n\nexport const Pagination: React.FC<PaginationProps> = props => {\n  const { pageNumber, totalPages, onPageChange } = props\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createPaginationStyles, {\n    applyCommonProps: true,\n    commonSlot: 'container'\n  })\n\n  // Functions\n  function renderPagination() {\n    const pages = getVisiblePages({ pageNumber, totalPages })\n\n    return (\n      <div style={styles.pagesRow}>\n        {pages.map((page, index) =>\n          page === '...' ? (\n            <Typography\n              key={`ellipsis-${index.toString()}`}\n              variant=\"b1\"\n              color={'var(--px-btn-outlined-label)'}\n              styles={{ text: { paddingTop: '0.5rem' } }}\n            >\n              ...\n            </Typography>\n          ) : (\n            <Button\n              key={`${page}-${index.toString()}`}\n              px=\"1rem\"\n              py=\"0.5rem\"\n              label={String(page)}\n              variant={page === pageNumber ? 'filled' : 'outlined'}\n              onClick={() => onPageChange(page as number)}\n            />\n          )\n        )}\n      </div>\n    )\n  }\n\n  return (\n    <div style={styles.container}>\n      <ArrowButtons\n        direction=\"left\"\n        pageNumber={pageNumber}\n        totalPages={totalPages}\n        onPageChange={onPageChange}\n      />\n\n      {renderPagination()}\n\n      <ArrowButtons\n        direction=\"right\"\n        pageNumber={pageNumber}\n        totalPages={totalPages}\n        onPageChange={onPageChange}\n      />\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/{Popover-BV_1hBez.js → Popover-CED1_qlu.js}

@@ -1,6 +1,6 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-Dco_54KA.js";
-import { t as useDismiss } from "./useDismiss-Dpzg5Xpf.js";
-import { t as useFloating } from "./useFloating-D-2IDIWG.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-BRdb57J9.js";
+import { t as useDismiss } from "./useDismiss-Bk0KtHnr.js";
+import { t as useFloating } from "./useFloating-CJu3mhQW.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
@@ -278,4 +278,4 @@ const Popover = (props) => {
 
 //#endregion
 export { types_exports as n, Popover as t };
-//# sourceMappingURL=Popover-BV_1hBez.js.map
+//# sourceMappingURL=Popover-CED1_qlu.js.map

package/dist/{Popover-BV_1hBez.js.map → Popover-CED1_qlu.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Popover-BV_1hBez.js","names":["node: HTMLElement | null","Popover: React.FC<PopoverProps>"],"sources":["../src/components/commons/toolkit/Popover/hooks/usePortalContainer/index.ts","../src/components/commons/toolkit/Popover/utils/focusNextFrom.ts","../src/components/commons/toolkit/Popover/utils/portal.ts","../src/components/commons/toolkit/Popover/hooks/usePopoverA11yFocus/index.ts","../src/components/commons/toolkit/Popover/hooks/usePopoverFloatingOptions/index.ts","../src/components/commons/toolkit/Popover/styles.ts","../src/components/commons/toolkit/Popover/types.ts","../src/components/commons/toolkit/Popover/index.tsx"],"sourcesContent":["// External Libraries\nimport { useEffect, useMemo, useRef, useState } from 'react'\n\nexport function usePortalContainer(portalId?: string) {\n  const portalRef = useRef<HTMLElement | null>(null)\n  const [portalEl, setPortalEl] = useState<HTMLElement | null>(null)\n\n  useEffect(() => {\n    if (typeof document === 'undefined') return\n\n    if (!portalId) {\n      setPortalEl(null)\n      return\n    }\n\n    const found = document.getElementById(portalId) as HTMLElement | null\n    setPortalEl(found)\n    if (found) return\n\n    const obs = new MutationObserver(() => {\n      const el = document.getElementById(portalId) as HTMLElement | null\n      if (el) {\n        setPortalEl(el)\n        obs.disconnect()\n      }\n    })\n\n    obs.observe(document.documentElement, { childList: true, subtree: true })\n    return () => obs.disconnect()\n  }, [portalId])\n\n  useEffect(() => {\n    portalRef.current = portalEl\n  }, [portalEl])\n\n  const portalContainer = useMemo(() => {\n    if (typeof document === 'undefined') return null\n    return portalEl ?? document.body\n  }, [portalEl])\n\n  return { portalRef, portalEl, portalContainer }\n}\n","const SELECTOR = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n  '[contenteditable=\"true\"]'\n].join(',')\n\nfunction isVisible(el: HTMLElement) {\n  const style = window.getComputedStyle(el)\n  if (style.display === 'none' || style.visibility === 'hidden') return false\n  const r = el.getBoundingClientRect()\n  return r.width > 0 && r.height > 0\n}\n\nexport function focusNextFrom(from: HTMLElement, root: ParentNode = document) {\n  const list = Array.from(root.querySelectorAll<HTMLElement>(SELECTOR)).filter(\n    isVisible\n  )\n\n  const i = list.indexOf(from)\n  const next = i >= 0 ? list[i + 1] : list[0]\n  next?.focus?.()\n  return next ?? null\n}\n","export function resolvePortalContainer(portalId?: string): HTMLElement | null {\n  if (typeof document === 'undefined') return null\n  if (!portalId) return document.body\n  return document.getElementById(portalId) ?? document.body\n}\n\nexport function createsFixedContainingBlock(el: HTMLElement): boolean {\n  let node: HTMLElement | null = el\n  while (node) {\n    const s = getComputedStyle(node)\n    if (\n      s.transform !== 'none' ||\n      s.translate !== 'none' ||\n      s.perspective !== 'none' ||\n      s.filter !== 'none' ||\n      s.backdropFilter !== 'none' ||\n      s.contain.includes('paint')\n    ) {\n      return true\n    }\n    node = node.parentElement\n  }\n  return false\n}\n","// External Libraries\nimport { useEffect, useRef } from 'react'\n\n// Utils\nimport { focusNextFrom } from '../../utils'\n\n// Types\nimport type { CloseReason } from '../../types'\n\ntype Params = {\n  open: boolean\n  restoreFocusOnClose: boolean\n  triggerRef: React.RefObject<HTMLElement | null>\n  lastCloseReasonRef: React.MutableRefObject<CloseReason>\n  setOpen: (v: boolean) => void\n}\n\nexport function usePopoverA11yFocus({\n  open,\n  restoreFocusOnClose,\n  triggerRef,\n  lastCloseReasonRef,\n  setOpen\n}: Params) {\n  const tabFocusFromRef = useRef<HTMLElement | null>(null)\n  const prevOpenRef = useRef<boolean>(open)\n\n  useEffect(() => {\n    if (!open) return\n    if (typeof document === 'undefined') return\n\n    const onKeyDownCapture = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab') return\n      lastCloseReasonRef.current = 'tab'\n      tabFocusFromRef.current = triggerRef.current\n      setOpen(false)\n    }\n\n    document.addEventListener('keydown', onKeyDownCapture, true)\n    return () => document.removeEventListener('keydown', onKeyDownCapture, true)\n  }, [open, setOpen, triggerRef, lastCloseReasonRef])\n\n  useEffect(() => {\n    const wasOpen = prevOpenRef.current\n    prevOpenRef.current = open\n\n    if (open) return\n    if (!wasOpen) return\n\n    if (!restoreFocusOnClose) return\n\n    const reason = lastCloseReasonRef.current\n\n    if (reason === 'tab') {\n      const from = tabFocusFromRef.current\n      tabFocusFromRef.current = null\n      lastCloseReasonRef.current = 'programmatic'\n\n      if (from) {\n        requestAnimationFrame(() => {\n          focusNextFrom(from, document)\n        })\n      }\n      return\n    }\n\n    requestAnimationFrame(() => triggerRef.current?.focus?.())\n    lastCloseReasonRef.current = 'programmatic'\n  }, [open, restoreFocusOnClose, triggerRef, lastCloseReasonRef])\n}\n","// External Libraries\nimport { useMemo } from 'react'\nimport type { RefObject } from 'react'\n\n// Hooks\nimport type { FloatingOptions } from '@hooks/useFloating/types'\n\n// Utils\nimport { createsFixedContainingBlock } from '../../utils'\n\ntype Params = {\n  portalId?: string\n  portalContainer: HTMLElement | null\n  portalRef: RefObject<HTMLElement | null>\n  floatingOptions?: FloatingOptions\n  absoluteReference?: FloatingOptions['absoluteReference']\n}\n\nexport function usePopoverFloatingOptions({\n  portalId,\n  portalContainer,\n  portalRef,\n  floatingOptions,\n  absoluteReference\n}: Params) {\n  return useMemo(() => {\n    const base = {\n      offsetY: 6,\n      keepInViewport: true,\n      placement: 'bottom-start',\n      portalRef\n    } as const\n\n    const userStrategy = floatingOptions?.strategy ?? 'fixed'\n\n    const shouldFixFixedInPortal =\n      !!portalId &&\n      portalContainer &&\n      userStrategy === 'fixed' &&\n      portalContainer !== document.body &&\n      createsFixedContainingBlock(portalContainer)\n\n    if (shouldFixFixedInPortal) {\n      return {\n        ...base,\n        ...floatingOptions,\n        strategy: 'absolute',\n        absoluteReference: 'offsetParent'\n      } as any\n    }\n\n    return {\n      ...base,\n      ...floatingOptions,\n      absoluteReference\n    } as any\n  }, [portalId, portalContainer, portalRef, floatingOptions, absoluteReference])\n}\n","// Types\nimport type { PopoverProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createPopoverStyles({ hideShadow = false }: PopoverProps) {\n  return styled({\n    popoverNode: {\n      position: 'fixed',\n      left: 0,\n      top: 0,\n\n      zIndex: 10,\n\n      padding: '0.25rem',\n\n      backgroundColor: 'var(--px-bg)',\n      boxShadow: hideShadow ? 'none' : 'var(--px-ring-1)',\n\n      borderRadius: '0.75rem',\n      overflow: 'hidden'\n    },\n\n    trigger: {\n      width: 'fit-content',\n      height: 'fit-content'\n    }\n  })\n}\n","// External Libraries\nimport type { MouseEvent, MouseEventHandler, ReactNode, RefObject } from 'react'\n\n// Types\nimport type { createPopoverStyles } from './styles'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\nimport type { PaddingProps, TypeStyles } from '@hooks/useThemedStyles/types'\n\nexport type PopoverTriggerRenderProps = {\n  ariaExpanded: boolean\n  ref: RefObject<HTMLElement>\n  onClick: (event: MouseEvent<HTMLSpanElement>) => void\n}\n\nexport type CloseReason = 'outside' | 'escape' | 'tab' | 'programmatic'\n\nexport interface PopoverProps extends PaddingProps {\n  open?: boolean\n  portalId?: string\n  containerId?: string\n  hideShadow?: boolean\n  dismissScope?: string\n  closeOnEscape?: boolean\n  closeOnOutsideClick?: boolean\n  floatingOptions?: FloatingOptions\n  anchorRef?: RefObject<HTMLElement>\n  absoluteReference?: FloatingOptions['absoluteReference']\n\n  restoreFocusOnClose?: boolean\n\n  onOpenChange?: (v: boolean) => void\n  onMouseEnter?: MouseEventHandler<HTMLDivElement>\n  onMouseLeave?: MouseEventHandler<HTMLDivElement>\n  content: (ctx: { close: () => void; widthTrigger: number }) => ReactNode\n  trigger?: (props: PopoverTriggerRenderProps) => ReactNode\n\n  styles?: TypeStyles<typeof createPopoverStyles>\n}\n","// External Libraries\nimport type React from 'react'\nimport { createPortal } from 'react-dom'\nimport {\n  type MouseEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react'\n\n// Hooks\nimport { useDismiss } from '@hooks/useDismiss'\nimport { useFloating } from '@hooks/useFloating'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\nimport { usePortalContainer } from './hooks/usePortalContainer'\nimport { usePopoverA11yFocus } from './hooks/usePopoverA11yFocus'\nimport { usePopoverFloatingOptions } from './hooks/usePopoverFloatingOptions'\n\n// Types\nimport type { CloseReason, PopoverProps } from './types'\n\n// Styles\nimport { createPopoverStyles } from './styles'\n\nexport * as PopoverTypes from './types'\n\nexport const Popover: React.FC<PopoverProps> = props => {\n  const {\n    portalId,\n    anchorRef,\n    dismissScope,\n    floatingOptions,\n    absoluteReference,\n    closeOnEscape = true,\n    open: controlledOpen,\n    closeOnOutsideClick = true,\n    restoreFocusOnClose = true,\n    trigger,\n    content,\n    onOpenChange,\n    onMouseEnter,\n    onMouseLeave\n  } = props\n\n  const triggerRef = useRef<HTMLElement | null>(null)\n  const popoverRef = useRef<HTMLDivElement | null>(null)\n  const resolvedAnchorRef = (anchorRef ?? triggerRef) as any\n\n  const lastCloseReasonRef = useRef<CloseReason>('programmatic')\n\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false)\n  const [widthTrigger, setWidthTrigger] = useState(0)\n  const open = controlledOpen ?? uncontrolledOpen\n\n  const { portalRef, portalContainer } = usePortalContainer(portalId)\n\n  const { styles } = useThemedStyles(props, createPopoverStyles, {\n    applyCommonProps: true,\n    override: props.styles,\n    commonSlot: 'popoverNode',\n    pick: p => [p.open, p.content, p.trigger]\n  })\n\n  const setOpen = useCallback(\n    (v: boolean) => {\n      onOpenChange?.(v)\n      if (controlledOpen === undefined) setUncontrolledOpen(v)\n    },\n    [controlledOpen, onOpenChange]\n  )\n\n  const effectiveFloating = usePopoverFloatingOptions({\n    portalId,\n    portalContainer: portalContainer as any,\n    portalRef,\n    floatingOptions,\n    absoluteReference\n  })\n\n  const { floatingRef, update } = useFloating(\n    resolvedAnchorRef,\n    effectiveFloating\n  )\n\n  usePopoverA11yFocus({\n    open,\n    triggerRef,\n    lastCloseReasonRef,\n    restoreFocusOnClose,\n    setOpen\n  })\n\n  useDismiss({\n    open,\n    closeOnEscape,\n    closeOnOutsideClick,\n    dismissScope: props.dismissScope,\n    refs: [triggerRef, popoverRef],\n    onClose: () => {\n      lastCloseReasonRef.current = 'outside'\n      setOpen(false)\n    }\n  })\n\n  useEffect(() => {\n    if (!open) return\n    setWidthTrigger(triggerRef.current?.offsetWidth ?? 0)\n    requestAnimationFrame(update)\n  }, [open, update])\n\n  const triggerNode =\n    trigger?.({\n      ariaExpanded: open,\n      ref: triggerRef as any,\n      onClick: handleTriggerClick\n    }) ?? null\n\n  const popoverNode = open ? (\n    <div\n      ref={el => {\n        popoverRef.current = el\n        floatingRef(el as any)\n      }}\n      role=\"dialog\"\n      style={styles.popoverNode}\n      data-dismiss-scope={dismissScope}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      onKeyDown={e => {\n        if (e.key === 'Escape') {\n          e.preventDefault()\n          lastCloseReasonRef.current = 'escape'\n          setOpen(false)\n        }\n      }}\n    >\n      {content({ close: () => setOpen(false), widthTrigger })}\n    </div>\n  ) : null\n\n  // Functions\n  function handleTriggerClick(e: MouseEvent) {\n    e.stopPropagation()\n    e.preventDefault()\n    setOpen(!open)\n  }\n\n  return (\n    <>\n      {triggerNode}\n      {typeof document !== 'undefined'\n        ? createPortal(popoverNode, portalContainer ?? document.body)\n        : null}\n    </>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Popover-CED1_qlu.js","names":["node: HTMLElement | null","Popover: React.FC<PopoverProps>"],"sources":["../src/components/commons/toolkit/Popover/hooks/usePortalContainer/index.ts","../src/components/commons/toolkit/Popover/utils/focusNextFrom.ts","../src/components/commons/toolkit/Popover/utils/portal.ts","../src/components/commons/toolkit/Popover/hooks/usePopoverA11yFocus/index.ts","../src/components/commons/toolkit/Popover/hooks/usePopoverFloatingOptions/index.ts","../src/components/commons/toolkit/Popover/styles.ts","../src/components/commons/toolkit/Popover/types.ts","../src/components/commons/toolkit/Popover/index.tsx"],"sourcesContent":["// External Libraries\nimport { useEffect, useMemo, useRef, useState } from 'react'\n\nexport function usePortalContainer(portalId?: string) {\n  const portalRef = useRef<HTMLElement | null>(null)\n  const [portalEl, setPortalEl] = useState<HTMLElement | null>(null)\n\n  useEffect(() => {\n    if (typeof document === 'undefined') return\n\n    if (!portalId) {\n      setPortalEl(null)\n      return\n    }\n\n    const found = document.getElementById(portalId) as HTMLElement | null\n    setPortalEl(found)\n    if (found) return\n\n    const obs = new MutationObserver(() => {\n      const el = document.getElementById(portalId) as HTMLElement | null\n      if (el) {\n        setPortalEl(el)\n        obs.disconnect()\n      }\n    })\n\n    obs.observe(document.documentElement, { childList: true, subtree: true })\n    return () => obs.disconnect()\n  }, [portalId])\n\n  useEffect(() => {\n    portalRef.current = portalEl\n  }, [portalEl])\n\n  const portalContainer = useMemo(() => {\n    if (typeof document === 'undefined') return null\n    return portalEl ?? document.body\n  }, [portalEl])\n\n  return { portalRef, portalEl, portalContainer }\n}\n","const SELECTOR = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n  '[contenteditable=\"true\"]'\n].join(',')\n\nfunction isVisible(el: HTMLElement) {\n  const style = window.getComputedStyle(el)\n  if (style.display === 'none' || style.visibility === 'hidden') return false\n  const r = el.getBoundingClientRect()\n  return r.width > 0 && r.height > 0\n}\n\nexport function focusNextFrom(from: HTMLElement, root: ParentNode = document) {\n  const list = Array.from(root.querySelectorAll<HTMLElement>(SELECTOR)).filter(\n    isVisible\n  )\n\n  const i = list.indexOf(from)\n  const next = i >= 0 ? list[i + 1] : list[0]\n  next?.focus?.()\n  return next ?? null\n}\n","export function resolvePortalContainer(portalId?: string): HTMLElement | null {\n  if (typeof document === 'undefined') return null\n  if (!portalId) return document.body\n  return document.getElementById(portalId) ?? document.body\n}\n\nexport function createsFixedContainingBlock(el: HTMLElement): boolean {\n  let node: HTMLElement | null = el\n  while (node) {\n    const s = getComputedStyle(node)\n    if (\n      s.transform !== 'none' ||\n      s.translate !== 'none' ||\n      s.perspective !== 'none' ||\n      s.filter !== 'none' ||\n      s.backdropFilter !== 'none' ||\n      s.contain.includes('paint')\n    ) {\n      return true\n    }\n    node = node.parentElement\n  }\n  return false\n}\n","// External Libraries\nimport { useEffect, useRef } from 'react'\n\n// Utils\nimport { focusNextFrom } from '../../utils'\n\n// Types\nimport type { CloseReason } from '../../types'\n\ntype Params = {\n  open: boolean\n  restoreFocusOnClose: boolean\n  triggerRef: React.RefObject<HTMLElement | null>\n  lastCloseReasonRef: React.MutableRefObject<CloseReason>\n  setOpen: (v: boolean) => void\n}\n\nexport function usePopoverA11yFocus({\n  open,\n  restoreFocusOnClose,\n  triggerRef,\n  lastCloseReasonRef,\n  setOpen\n}: Params) {\n  const tabFocusFromRef = useRef<HTMLElement | null>(null)\n  const prevOpenRef = useRef<boolean>(open)\n\n  useEffect(() => {\n    if (!open) return\n    if (typeof document === 'undefined') return\n\n    const onKeyDownCapture = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab') return\n      lastCloseReasonRef.current = 'tab'\n      tabFocusFromRef.current = triggerRef.current\n      setOpen(false)\n    }\n\n    document.addEventListener('keydown', onKeyDownCapture, true)\n    return () => document.removeEventListener('keydown', onKeyDownCapture, true)\n  }, [open, setOpen, triggerRef, lastCloseReasonRef])\n\n  useEffect(() => {\n    const wasOpen = prevOpenRef.current\n    prevOpenRef.current = open\n\n    if (open) return\n    if (!wasOpen) return\n\n    if (!restoreFocusOnClose) return\n\n    const reason = lastCloseReasonRef.current\n\n    if (reason === 'tab') {\n      const from = tabFocusFromRef.current\n      tabFocusFromRef.current = null\n      lastCloseReasonRef.current = 'programmatic'\n\n      if (from) {\n        requestAnimationFrame(() => {\n          focusNextFrom(from, document)\n        })\n      }\n      return\n    }\n\n    requestAnimationFrame(() => triggerRef.current?.focus?.())\n    lastCloseReasonRef.current = 'programmatic'\n  }, [open, restoreFocusOnClose, triggerRef, lastCloseReasonRef])\n}\n","// External Libraries\nimport { useMemo } from 'react'\nimport type { RefObject } from 'react'\n\n// Hooks\nimport type { FloatingOptions } from '@hooks/useFloating/types'\n\n// Utils\nimport { createsFixedContainingBlock } from '../../utils'\n\ntype Params = {\n  portalId?: string\n  portalContainer: HTMLElement | null\n  portalRef: RefObject<HTMLElement | null>\n  floatingOptions?: FloatingOptions\n  absoluteReference?: FloatingOptions['absoluteReference']\n}\n\nexport function usePopoverFloatingOptions({\n  portalId,\n  portalContainer,\n  portalRef,\n  floatingOptions,\n  absoluteReference\n}: Params) {\n  return useMemo(() => {\n    const base = {\n      offsetY: 6,\n      keepInViewport: true,\n      placement: 'bottom-start',\n      portalRef\n    } as const\n\n    const userStrategy = floatingOptions?.strategy ?? 'fixed'\n\n    const shouldFixFixedInPortal =\n      !!portalId &&\n      portalContainer &&\n      userStrategy === 'fixed' &&\n      portalContainer !== document.body &&\n      createsFixedContainingBlock(portalContainer)\n\n    if (shouldFixFixedInPortal) {\n      return {\n        ...base,\n        ...floatingOptions,\n        strategy: 'absolute',\n        absoluteReference: 'offsetParent'\n      } as any\n    }\n\n    return {\n      ...base,\n      ...floatingOptions,\n      absoluteReference\n    } as any\n  }, [portalId, portalContainer, portalRef, floatingOptions, absoluteReference])\n}\n","// Types\nimport type { PopoverProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createPopoverStyles({ hideShadow = false }: PopoverProps) {\n  return styled({\n    popoverNode: {\n      position: 'fixed',\n      left: 0,\n      top: 0,\n\n      zIndex: 10,\n\n      padding: '0.25rem',\n\n      backgroundColor: 'var(--px-bg)',\n      boxShadow: hideShadow ? 'none' : 'var(--px-ring-1)',\n\n      borderRadius: '0.75rem',\n      overflow: 'hidden'\n    },\n\n    trigger: {\n      width: 'fit-content',\n      height: 'fit-content'\n    }\n  })\n}\n","// External Libraries\nimport type { MouseEvent, MouseEventHandler, ReactNode, RefObject } from 'react'\n\n// Types\nimport type { createPopoverStyles } from './styles'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\nimport type { PaddingProps, TypeStyles } from '@hooks/useThemedStyles/types'\n\nexport type PopoverTriggerRenderProps = {\n  ariaExpanded: boolean\n  ref: RefObject<HTMLElement>\n  onClick: (event: MouseEvent<HTMLSpanElement>) => void\n}\n\nexport type CloseReason = 'outside' | 'escape' | 'tab' | 'programmatic'\n\nexport interface PopoverProps extends PaddingProps {\n  open?: boolean\n  portalId?: string\n  containerId?: string\n  hideShadow?: boolean\n  dismissScope?: string\n  closeOnEscape?: boolean\n  closeOnOutsideClick?: boolean\n  floatingOptions?: FloatingOptions\n  anchorRef?: RefObject<HTMLElement>\n  absoluteReference?: FloatingOptions['absoluteReference']\n\n  restoreFocusOnClose?: boolean\n\n  onOpenChange?: (v: boolean) => void\n  onMouseEnter?: MouseEventHandler<HTMLDivElement>\n  onMouseLeave?: MouseEventHandler<HTMLDivElement>\n  content: (ctx: { close: () => void; widthTrigger: number }) => ReactNode\n  trigger?: (props: PopoverTriggerRenderProps) => ReactNode\n\n  styles?: TypeStyles<typeof createPopoverStyles>\n}\n","// External Libraries\nimport type React from 'react'\nimport { createPortal } from 'react-dom'\nimport {\n  type MouseEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react'\n\n// Hooks\nimport { useDismiss } from '@hooks/useDismiss'\nimport { useFloating } from '@hooks/useFloating'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\nimport { usePortalContainer } from './hooks/usePortalContainer'\nimport { usePopoverA11yFocus } from './hooks/usePopoverA11yFocus'\nimport { usePopoverFloatingOptions } from './hooks/usePopoverFloatingOptions'\n\n// Types\nimport type { CloseReason, PopoverProps } from './types'\n\n// Styles\nimport { createPopoverStyles } from './styles'\n\nexport * as PopoverTypes from './types'\n\nexport const Popover: React.FC<PopoverProps> = props => {\n  const {\n    portalId,\n    anchorRef,\n    dismissScope,\n    floatingOptions,\n    absoluteReference,\n    closeOnEscape = true,\n    open: controlledOpen,\n    closeOnOutsideClick = true,\n    restoreFocusOnClose = true,\n    trigger,\n    content,\n    onOpenChange,\n    onMouseEnter,\n    onMouseLeave\n  } = props\n\n  const triggerRef = useRef<HTMLElement | null>(null)\n  const popoverRef = useRef<HTMLDivElement | null>(null)\n  const resolvedAnchorRef = (anchorRef ?? triggerRef) as any\n\n  const lastCloseReasonRef = useRef<CloseReason>('programmatic')\n\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false)\n  const [widthTrigger, setWidthTrigger] = useState(0)\n  const open = controlledOpen ?? uncontrolledOpen\n\n  const { portalRef, portalContainer } = usePortalContainer(portalId)\n\n  const { styles } = useThemedStyles(props, createPopoverStyles, {\n    applyCommonProps: true,\n    override: props.styles,\n    commonSlot: 'popoverNode',\n    pick: p => [p.open, p.content, p.trigger]\n  })\n\n  const setOpen = useCallback(\n    (v: boolean) => {\n      onOpenChange?.(v)\n      if (controlledOpen === undefined) setUncontrolledOpen(v)\n    },\n    [controlledOpen, onOpenChange]\n  )\n\n  const effectiveFloating = usePopoverFloatingOptions({\n    portalId,\n    portalContainer: portalContainer as any,\n    portalRef,\n    floatingOptions,\n    absoluteReference\n  })\n\n  const { floatingRef, update } = useFloating(\n    resolvedAnchorRef,\n    effectiveFloating\n  )\n\n  usePopoverA11yFocus({\n    open,\n    triggerRef,\n    lastCloseReasonRef,\n    restoreFocusOnClose,\n    setOpen\n  })\n\n  useDismiss({\n    open,\n    closeOnEscape,\n    closeOnOutsideClick,\n    dismissScope: props.dismissScope,\n    refs: [triggerRef, popoverRef],\n    onClose: () => {\n      lastCloseReasonRef.current = 'outside'\n      setOpen(false)\n    }\n  })\n\n  useEffect(() => {\n    if (!open) return\n    setWidthTrigger(triggerRef.current?.offsetWidth ?? 0)\n    requestAnimationFrame(update)\n  }, [open, update])\n\n  const triggerNode =\n    trigger?.({\n      ariaExpanded: open,\n      ref: triggerRef as any,\n      onClick: handleTriggerClick\n    }) ?? null\n\n  const popoverNode = open ? (\n    <div\n      ref={el => {\n        popoverRef.current = el\n        floatingRef(el as any)\n      }}\n      role=\"dialog\"\n      style={styles.popoverNode}\n      data-dismiss-scope={dismissScope}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      onKeyDown={e => {\n        if (e.key === 'Escape') {\n          e.preventDefault()\n          lastCloseReasonRef.current = 'escape'\n          setOpen(false)\n        }\n      }}\n    >\n      {content({ close: () => setOpen(false), widthTrigger })}\n    </div>\n  ) : null\n\n  // Functions\n  function handleTriggerClick(e: MouseEvent) {\n    e.stopPropagation()\n    e.preventDefault()\n    setOpen(!open)\n  }\n\n  return (\n    <>\n      {triggerNode}\n      {typeof document !== 'undefined'\n        ? createPortal(popoverNode, portalContainer ?? document.body)\n        : null}\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/{ScrollPaginationContainer-isAA4BsG.js → ScrollPaginationContainer-Chhf6mao.js}

@@ -1,5 +1,5 @@
-import { t as __exportAll } from "./chunk-B4b_RMCp.js";
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-Dco_54KA.js";
+import { t as __exportAll } from "./chunk-eEFKMXb3.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-BRdb57J9.js";
 import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 
@@ -128,4 +128,4 @@ const ScrollPaginationContainer = (props) => {
 
 //#endregion
 export { types_exports as n, ScrollDirection as r, ScrollPaginationContainer as t };
-//# sourceMappingURL=ScrollPaginationContainer-isAA4BsG.js.map
+//# sourceMappingURL=ScrollPaginationContainer-Chhf6mao.js.map

package/dist/{ScrollPaginationContainer-isAA4BsG.js.map → ScrollPaginationContainer-Chhf6mao.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ScrollPaginationContainer-isAA4BsG.js","names":["DEFAULT_SCROLL_END_THRESHOLD: number","ScrollPaginationContainer: React.FC<\n  ScrollPaginationContainerProps\n>"],"sources":["../src/components/commons/toolkit/ScrollPaginationContainer/constants.ts","../src/components/commons/toolkit/ScrollPaginationContainer/utils/getPaginationParams.ts","../src/components/commons/toolkit/ScrollPaginationContainer/types/scrollDirection.ts","../src/components/commons/toolkit/ScrollPaginationContainer/types/index.ts","../src/components/commons/toolkit/ScrollPaginationContainer/hooks/useScrollPaginationContainer/index.ts","../src/components/commons/toolkit/ScrollPaginationContainer/styles.ts","../src/components/commons/toolkit/ScrollPaginationContainer/index.tsx"],"sourcesContent":["export const DEFAULT_SCROLL_END_THRESHOLD: number = 2000\n","// Utils\nimport { DEFAULT_SCROLL_END_THRESHOLD } from '../constants'\n\n// Types\nimport type { Pagination } from '../types'\n\nexport function getPaginationParams(pagination?: Pagination): Pagination {\n  if (!pagination) return makeDefaultPagination()\n\n  return pagination\n}\n\nfunction makeDefaultPagination(): Pagination {\n  return {\n    page: 1,\n    endReached: true,\n    isLoadingMore: false,\n    scrollEndThreshold: DEFAULT_SCROLL_END_THRESHOLD\n  }\n}\n","export enum ScrollDirection {\n  Vertical = 'vertical',\n  Horizontal = 'horizontal',\n  Bidirectional = 'bidirectional'\n}\n","export * from './scrollDirection'\nexport * from './pagination'\nexport * from './props'\n","// External Libraries\nimport { useEffect, useRef } from 'react'\n\n// Utils\nimport { getPaginationParams } from '../../utils'\nimport { DEFAULT_SCROLL_END_THRESHOLD } from '../../constants'\n\n// Types\nimport { ScrollDirection } from '../../types'\nimport type { UsePaginationParams } from './types'\n\nexport function useScrollPaginationContainer(props: UsePaginationParams) {\n  // Hooks\n  const verticalPagination =\n    props.direction !== ScrollDirection.Horizontal\n      ? props.verticalPagination\n      : undefined\n\n  const horizontalPagination =\n    props.direction !== ScrollDirection.Vertical\n      ? props.horizontalPagination\n      : undefined\n\n  // Constants\n  const {\n    page: horizontalPage,\n    endReached: horizontalEndReached,\n    isLoadingMore: horizontalIsLoadingMore,\n    scrollEndThreshold:\n      horizontalScrollEndThreshold = DEFAULT_SCROLL_END_THRESHOLD,\n    onGetPage: onGetHorizontalPage\n  } = getPaginationParams(horizontalPagination)\n\n  const {\n    page: verticalPage,\n    endReached: verticalEndReached,\n    isLoadingMore: verticalIsLoadingMore,\n    scrollEndThreshold:\n      verticalScrollEndThreshold = DEFAULT_SCROLL_END_THRESHOLD,\n    onGetPage: onGetVerticalPage\n  } = getPaginationParams(verticalPagination)\n\n  // Refs\n  const scrollRef = useRef<HTMLDivElement>(null)\n\n  // UseEffects\n  useEffect(() => {\n    if (props.direction === ScrollDirection.Vertical) return\n\n    if (horizontalPage === 1) {\n      if (scrollRef.current) scrollRef.current.scrollTo({ left: 0 })\n    }\n  }, [horizontalPage, props.direction])\n\n  // UseEffects\n  useEffect(() => {\n    if (props.direction === ScrollDirection.Horizontal) return\n\n    if (verticalPage === 1) {\n      if (scrollRef.current) scrollRef.current.scrollTo({ top: 0 })\n    }\n  }, [verticalPage, props.direction])\n\n  useEffect(() => {\n    if (props.direction === ScrollDirection.Horizontal) return\n\n    const handleScroll = () => {\n      if (scrollRef.current && onGetVerticalPage) {\n        const { scrollTop, scrollHeight, clientHeight } = scrollRef.current\n        const scrollEndLimit = scrollHeight - verticalScrollEndThreshold\n\n        if (scrollTop + clientHeight >= scrollEndLimit) {\n          onGetVerticalPage(verticalPage + 1)\n        }\n      }\n    }\n\n    const currentRef = scrollRef.current\n\n    if (currentRef && !verticalEndReached && !verticalIsLoadingMore) {\n      currentRef.addEventListener('scroll', handleScroll)\n    }\n\n    return () => currentRef?.removeEventListener('scroll', handleScroll)\n  }, [\n    verticalPage,\n    props.direction,\n    verticalEndReached,\n    verticalIsLoadingMore,\n    verticalScrollEndThreshold,\n    onGetVerticalPage\n  ])\n\n  useEffect(() => {\n    if (props.direction === ScrollDirection.Vertical) return\n    const handleScroll = () => {\n      if (scrollRef.current && onGetHorizontalPage) {\n        const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current\n        const scrollEndLimit = scrollWidth - horizontalScrollEndThreshold\n\n        if (scrollLeft + clientWidth >= scrollEndLimit) {\n          onGetHorizontalPage(horizontalPage + 1)\n        }\n      }\n    }\n\n    const currentRef = scrollRef.current\n\n    if (currentRef && !horizontalEndReached && !horizontalIsLoadingMore) {\n      currentRef.addEventListener('scroll', handleScroll)\n    }\n\n    return () => currentRef?.removeEventListener('scroll', handleScroll)\n  }, [\n    horizontalPage,\n    props.direction,\n    horizontalEndReached,\n    horizontalIsLoadingMore,\n    horizontalScrollEndThreshold,\n    onGetHorizontalPage\n  ])\n\n  return { scrollRef }\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { ScrollPaginationContainerProps } from './types'\n\nexport function createScrollPaginationContainerStyles(\n  props: ScrollPaginationContainerProps\n) {\n  const { width, fillFlex, maxHeight, maxWidth } = props\n\n  return styled({\n    container: {\n      overflow: 'auto',\n      scrollbarWidth: 'thin',\n      width: width || 'auto',\n      flex: fillFlex ? 1 : undefined,\n      maxWidth: fillFlex ? undefined : maxWidth || '100%',\n      maxHeight: fillFlex ? undefined : maxHeight || '100%',\n\n      __rules: {\n        '&::-webkit-scrollbar': {\n          width: '5px'\n        },\n        '&::-webkit-scrollbar-thumb': {\n          borderRadius: '10px'\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\nimport { useScrollPaginationContainer } from './hooks/useScrollPaginationContainer'\n\n// Types\nimport type { ScrollPaginationContainerProps } from './types'\n\n// Styles\nimport { createScrollPaginationContainerStyles } from './styles'\n\nexport * as ScrollPaginationContainerTypes from './types'\n\nexport const ScrollPaginationContainer: React.FC<\n  ScrollPaginationContainerProps\n> = props => {\n  // Hooks\n  const { scrollRef } = useScrollPaginationContainer(props)\n\n  const { styles } = useThemedStyles(\n    props,\n    createScrollPaginationContainerStyles\n  )\n\n  return (\n    <div ref={scrollRef} style={styles.container}>\n      {props.children}\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"ScrollPaginationContainer-Chhf6mao.js","names":["DEFAULT_SCROLL_END_THRESHOLD: number","ScrollPaginationContainer: React.FC<\n  ScrollPaginationContainerProps\n>"],"sources":["../src/components/commons/toolkit/ScrollPaginationContainer/constants.ts","../src/components/commons/toolkit/ScrollPaginationContainer/utils/getPaginationParams.ts","../src/components/commons/toolkit/ScrollPaginationContainer/types/scrollDirection.ts","../src/components/commons/toolkit/ScrollPaginationContainer/types/index.ts","../src/components/commons/toolkit/ScrollPaginationContainer/hooks/useScrollPaginationContainer/index.ts","../src/components/commons/toolkit/ScrollPaginationContainer/styles.ts","../src/components/commons/toolkit/ScrollPaginationContainer/index.tsx"],"sourcesContent":["export const DEFAULT_SCROLL_END_THRESHOLD: number = 2000\n","// Utils\nimport { DEFAULT_SCROLL_END_THRESHOLD } from '../constants'\n\n// Types\nimport type { Pagination } from '../types'\n\nexport function getPaginationParams(pagination?: Pagination): Pagination {\n  if (!pagination) return makeDefaultPagination()\n\n  return pagination\n}\n\nfunction makeDefaultPagination(): Pagination {\n  return {\n    page: 1,\n    endReached: true,\n    isLoadingMore: false,\n    scrollEndThreshold: DEFAULT_SCROLL_END_THRESHOLD\n  }\n}\n","export enum ScrollDirection {\n  Vertical = 'vertical',\n  Horizontal = 'horizontal',\n  Bidirectional = 'bidirectional'\n}\n","export * from './scrollDirection'\nexport * from './pagination'\nexport * from './props'\n","// External Libraries\nimport { useEffect, useRef } from 'react'\n\n// Utils\nimport { getPaginationParams } from '../../utils'\nimport { DEFAULT_SCROLL_END_THRESHOLD } from '../../constants'\n\n// Types\nimport { ScrollDirection } from '../../types'\nimport type { UsePaginationParams } from './types'\n\nexport function useScrollPaginationContainer(props: UsePaginationParams) {\n  // Hooks\n  const verticalPagination =\n    props.direction !== ScrollDirection.Horizontal\n      ? props.verticalPagination\n      : undefined\n\n  const horizontalPagination =\n    props.direction !== ScrollDirection.Vertical\n      ? props.horizontalPagination\n      : undefined\n\n  // Constants\n  const {\n    page: horizontalPage,\n    endReached: horizontalEndReached,\n    isLoadingMore: horizontalIsLoadingMore,\n    scrollEndThreshold:\n      horizontalScrollEndThreshold = DEFAULT_SCROLL_END_THRESHOLD,\n    onGetPage: onGetHorizontalPage\n  } = getPaginationParams(horizontalPagination)\n\n  const {\n    page: verticalPage,\n    endReached: verticalEndReached,\n    isLoadingMore: verticalIsLoadingMore,\n    scrollEndThreshold:\n      verticalScrollEndThreshold = DEFAULT_SCROLL_END_THRESHOLD,\n    onGetPage: onGetVerticalPage\n  } = getPaginationParams(verticalPagination)\n\n  // Refs\n  const scrollRef = useRef<HTMLDivElement>(null)\n\n  // UseEffects\n  useEffect(() => {\n    if (props.direction === ScrollDirection.Vertical) return\n\n    if (horizontalPage === 1) {\n      if (scrollRef.current) scrollRef.current.scrollTo({ left: 0 })\n    }\n  }, [horizontalPage, props.direction])\n\n  // UseEffects\n  useEffect(() => {\n    if (props.direction === ScrollDirection.Horizontal) return\n\n    if (verticalPage === 1) {\n      if (scrollRef.current) scrollRef.current.scrollTo({ top: 0 })\n    }\n  }, [verticalPage, props.direction])\n\n  useEffect(() => {\n    if (props.direction === ScrollDirection.Horizontal) return\n\n    const handleScroll = () => {\n      if (scrollRef.current && onGetVerticalPage) {\n        const { scrollTop, scrollHeight, clientHeight } = scrollRef.current\n        const scrollEndLimit = scrollHeight - verticalScrollEndThreshold\n\n        if (scrollTop + clientHeight >= scrollEndLimit) {\n          onGetVerticalPage(verticalPage + 1)\n        }\n      }\n    }\n\n    const currentRef = scrollRef.current\n\n    if (currentRef && !verticalEndReached && !verticalIsLoadingMore) {\n      currentRef.addEventListener('scroll', handleScroll)\n    }\n\n    return () => currentRef?.removeEventListener('scroll', handleScroll)\n  }, [\n    verticalPage,\n    props.direction,\n    verticalEndReached,\n    verticalIsLoadingMore,\n    verticalScrollEndThreshold,\n    onGetVerticalPage\n  ])\n\n  useEffect(() => {\n    if (props.direction === ScrollDirection.Vertical) return\n    const handleScroll = () => {\n      if (scrollRef.current && onGetHorizontalPage) {\n        const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current\n        const scrollEndLimit = scrollWidth - horizontalScrollEndThreshold\n\n        if (scrollLeft + clientWidth >= scrollEndLimit) {\n          onGetHorizontalPage(horizontalPage + 1)\n        }\n      }\n    }\n\n    const currentRef = scrollRef.current\n\n    if (currentRef && !horizontalEndReached && !horizontalIsLoadingMore) {\n      currentRef.addEventListener('scroll', handleScroll)\n    }\n\n    return () => currentRef?.removeEventListener('scroll', handleScroll)\n  }, [\n    horizontalPage,\n    props.direction,\n    horizontalEndReached,\n    horizontalIsLoadingMore,\n    horizontalScrollEndThreshold,\n    onGetHorizontalPage\n  ])\n\n  return { scrollRef }\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { ScrollPaginationContainerProps } from './types'\n\nexport function createScrollPaginationContainerStyles(\n  props: ScrollPaginationContainerProps\n) {\n  const { width, fillFlex, maxHeight, maxWidth } = props\n\n  return styled({\n    container: {\n      overflow: 'auto',\n      scrollbarWidth: 'thin',\n      width: width || 'auto',\n      flex: fillFlex ? 1 : undefined,\n      maxWidth: fillFlex ? undefined : maxWidth || '100%',\n      maxHeight: fillFlex ? undefined : maxHeight || '100%',\n\n      __rules: {\n        '&::-webkit-scrollbar': {\n          width: '5px'\n        },\n        '&::-webkit-scrollbar-thumb': {\n          borderRadius: '10px'\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\nimport { useScrollPaginationContainer } from './hooks/useScrollPaginationContainer'\n\n// Types\nimport type { ScrollPaginationContainerProps } from './types'\n\n// Styles\nimport { createScrollPaginationContainerStyles } from './styles'\n\nexport * as ScrollPaginationContainerTypes from './types'\n\nexport const ScrollPaginationContainer: React.FC<\n  ScrollPaginationContainerProps\n> = props => {\n  // Hooks\n  const { scrollRef } = useScrollPaginationContainer(props)\n\n  const { styles } = useThemedStyles(\n    props,\n    createScrollPaginationContainerStyles\n  )\n\n  return (\n    <div ref={scrollRef} style={styles.container}>\n      {props.children}\n    </div>\n  )\n}\n"],"mappings":"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"}