softable-pixels-web 1.2.21 → 1.2.22

package/dist/{Pagination-xaORAUQv.js.map → Pagination-BLRSfr8j.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Pagination-xaORAUQv.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-BLRSfr8j.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-CuTHaY1m.js → Popover-CtS201O7.js}

@@ -1,6 +1,6 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-CUbWXrNN.js";
-import { t as useDismiss } from "./useDismiss-RMIXf1tT.js";
-import { t as useFloating } from "./useFloating-BteZz_UL.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-C2-V1GJa.js";
+import { t as useDismiss } from "./useDismiss-Bv7pzF85.js";
+import { t as useFloating } from "./useFloating-EH6HmChz.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-CuTHaY1m.js.map
+//# sourceMappingURL=Popover-CtS201O7.js.map

package/dist/{Popover-CuTHaY1m.js.map → Popover-CtS201O7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Popover-CuTHaY1m.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-CtS201O7.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-CMpmFODW.js

@@ -0,0 +1,131 @@
+import { t as __exportAll } from "./chunk-BRaU-A3m.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-C2-V1GJa.js";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/commons/toolkit/ScrollPaginationContainer/constants.ts
+const DEFAULT_SCROLL_END_THRESHOLD = 2e3;
+
+//#endregion
+//#region src/components/commons/toolkit/ScrollPaginationContainer/utils/getPaginationParams.ts
+function getPaginationParams(pagination) {
+	if (!pagination) return makeDefaultPagination();
+	return pagination;
+}
+function makeDefaultPagination() {
+	return {
+		page: 1,
+		endReached: true,
+		isLoadingMore: false,
+		scrollEndThreshold: DEFAULT_SCROLL_END_THRESHOLD
+	};
+}
+
+//#endregion
+//#region src/components/commons/toolkit/ScrollPaginationContainer/types/scrollDirection.ts
+let ScrollDirection = /* @__PURE__ */ function(ScrollDirection$1) {
+	ScrollDirection$1["Vertical"] = "vertical";
+	ScrollDirection$1["Horizontal"] = "horizontal";
+	ScrollDirection$1["Bidirectional"] = "bidirectional";
+	return ScrollDirection$1;
+}({});
+
+//#endregion
+//#region src/components/commons/toolkit/ScrollPaginationContainer/types/index.ts
+var types_exports = /* @__PURE__ */ __exportAll({ ScrollDirection: () => ScrollDirection });
+
+//#endregion
+//#region src/components/commons/toolkit/ScrollPaginationContainer/hooks/useScrollPaginationContainer/index.ts
+function useScrollPaginationContainer(props) {
+	const verticalPagination = props.direction !== ScrollDirection.Horizontal ? props.verticalPagination : void 0;
+	const { page: horizontalPage, endReached: horizontalEndReached, isLoadingMore: horizontalIsLoadingMore, scrollEndThreshold: horizontalScrollEndThreshold = DEFAULT_SCROLL_END_THRESHOLD, onGetPage: onGetHorizontalPage } = getPaginationParams(props.direction !== ScrollDirection.Vertical ? props.horizontalPagination : void 0);
+	const { page: verticalPage, endReached: verticalEndReached, isLoadingMore: verticalIsLoadingMore, scrollEndThreshold: verticalScrollEndThreshold = DEFAULT_SCROLL_END_THRESHOLD, onGetPage: onGetVerticalPage } = getPaginationParams(verticalPagination);
+	const scrollRef = useRef(null);
+	useEffect(() => {
+		if (props.direction === ScrollDirection.Vertical) return;
+		if (horizontalPage === 1) {
+			if (scrollRef.current) scrollRef.current.scrollTo({ left: 0 });
+		}
+	}, [horizontalPage, props.direction]);
+	useEffect(() => {
+		if (props.direction === ScrollDirection.Horizontal) return;
+		if (verticalPage === 1) {
+			if (scrollRef.current) scrollRef.current.scrollTo({ top: 0 });
+		}
+	}, [verticalPage, props.direction]);
+	useEffect(() => {
+		if (props.direction === ScrollDirection.Horizontal) return;
+		const handleScroll = () => {
+			if (scrollRef.current && onGetVerticalPage) {
+				const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+				const scrollEndLimit = scrollHeight - verticalScrollEndThreshold;
+				if (scrollTop + clientHeight >= scrollEndLimit) onGetVerticalPage(verticalPage + 1);
+			}
+		};
+		const currentRef = scrollRef.current;
+		if (currentRef && !verticalEndReached && !verticalIsLoadingMore) currentRef.addEventListener("scroll", handleScroll);
+		return () => currentRef?.removeEventListener("scroll", handleScroll);
+	}, [
+		verticalPage,
+		props.direction,
+		verticalEndReached,
+		verticalIsLoadingMore,
+		verticalScrollEndThreshold,
+		onGetVerticalPage
+	]);
+	useEffect(() => {
+		if (props.direction === ScrollDirection.Vertical) return;
+		const handleScroll = () => {
+			if (scrollRef.current && onGetHorizontalPage) {
+				const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
+				const scrollEndLimit = scrollWidth - horizontalScrollEndThreshold;
+				if (scrollLeft + clientWidth >= scrollEndLimit) onGetHorizontalPage(horizontalPage + 1);
+			}
+		};
+		const currentRef = scrollRef.current;
+		if (currentRef && !horizontalEndReached && !horizontalIsLoadingMore) currentRef.addEventListener("scroll", handleScroll);
+		return () => currentRef?.removeEventListener("scroll", handleScroll);
+	}, [
+		horizontalPage,
+		props.direction,
+		horizontalEndReached,
+		horizontalIsLoadingMore,
+		horizontalScrollEndThreshold,
+		onGetHorizontalPage
+	]);
+	return { scrollRef };
+}
+
+//#endregion
+//#region src/components/commons/toolkit/ScrollPaginationContainer/styles.ts
+function createScrollPaginationContainerStyles(props) {
+	const { width, fillFlex, maxHeight, maxWidth } = props;
+	return styled({ container: {
+		overflow: "auto",
+		scrollbarWidth: "thin",
+		width: width || "auto",
+		flex: fillFlex ? 1 : void 0,
+		maxWidth: fillFlex ? void 0 : maxWidth || "100%",
+		maxHeight: fillFlex ? void 0 : maxHeight || "100%",
+		__rules: {
+			"&::-webkit-scrollbar": { width: "5px" },
+			"&::-webkit-scrollbar-thumb": { borderRadius: "10px" }
+		}
+	} });
+}
+
+//#endregion
+//#region src/components/commons/toolkit/ScrollPaginationContainer/index.tsx
+const ScrollPaginationContainer = (props) => {
+	const { scrollRef } = useScrollPaginationContainer(props);
+	const { styles } = useThemedStyles(props, createScrollPaginationContainerStyles);
+	return /* @__PURE__ */ jsx("div", {
+		ref: scrollRef,
+		style: styles.container,
+		children: props.children
+	});
+};
+
+//#endregion
+export { types_exports as n, ScrollDirection as r, ScrollPaginationContainer as t };
+//# sourceMappingURL=ScrollPaginationContainer-CMpmFODW.js.map

package/dist/ScrollPaginationContainer-CMpmFODW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollPaginationContainer-CMpmFODW.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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"}

package/dist/{SearchInput-Bw8FJ2h_.js → SearchInput-CZ6NlgaZ.js}

@@ -1,6 +1,6 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-CUbWXrNN.js";
-import { t as Icon } from "./Icon-DTFfAYeH.js";
-import { t as Label } from "./Label-CaQSxOx8.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-C2-V1GJa.js";
+import { t as Icon } from "./Icon-DsZcccBA.js";
+import { t as Label } from "./Label-CVSeI-Bh.js";
 import { useEffect, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -104,4 +104,4 @@ const SearchInput = ({ delay = 500, ...props }) => {
 
 //#endregion
 export { SearchInput as t };
-//# sourceMappingURL=SearchInput-Bw8FJ2h_.js.map
+//# sourceMappingURL=SearchInput-CZ6NlgaZ.js.map

package/dist/{SearchInput-Bw8FJ2h_.js.map → SearchInput-CZ6NlgaZ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"SearchInput-Bw8FJ2h_.js","names":["SearchInput: React.FC<SearchInputProps>"],"sources":["../src/components/commons/inputs/SearchInput/styles.ts","../src/components/commons/inputs/SearchInput/index.tsx"],"sourcesContent":["import { styled } from '@hooks/useThemedStyles/types'\n\nexport function createSearchInputStyles() {\n  return styled({\n    container: {\n      width: '100%',\n      display: 'flex',\n      flexDirection: 'column',\n      rowGap: '0.5rem'\n    },\n\n    wrapper: {\n      width: '100%',\n      display: 'flex',\n      alignItems: 'center',\n\n      borderWidth: 1,\n      columnGap: '0.5rem',\n      borderRadius: '0.5rem',\n      padding: '0.625rem 0.875rem',\n\n      boxShadow: 'var(--px-shadow-default)',\n      borderColor: 'var(--px-border-primary)',\n\n      __rules: {\n        '&:focus-within': {\n          outlineOffset: '-1px',\n          outline: `2px solid var(--px-color-primary)`\n        }\n      }\n    },\n    input: {\n      flex: 1,\n\n      fontWeight: 500,\n      fontSize: '1rem',\n      lineHeight: '1.5rem',\n      fontFamily: 'inherit',\n      color: 'var(--px-text-primary)',\n\n      __rules: {\n        '&:disabled': {\n          cursor: 'not-allowed'\n        },\n\n        '&:focus': {\n          outline: 'none'\n        },\n\n        '&::placeholder': {\n          fontWeight: 400,\n          color: 'var(--px-text-secondary)'\n        }\n      }\n    }\n  })\n}\n","/** biome-ignore-all lint/a11y/noAutofocus: It's a custom search input component */\n// External Libraries\nimport type React from 'react'\nimport { useEffect, useId, useRef, useState } from 'react'\n\n// Components\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { Label } from '@components/commons/toolkit/Label'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SearchInputProps } from './types'\n\n// Styles\nimport { createSearchInputStyles } from './styles'\n\nexport const SearchInput: React.FC<SearchInputProps> = ({\n  delay = 500,\n  ...props\n}) => {\n  // Constants\n  const inputId = useId()\n  const resolvedProps = { ...props, delay }\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(\n    resolvedProps,\n    createSearchInputStyles,\n    {\n      pick: p => [p.delay, p.value, p.hasSearchIcon],\n      applyCommonProps: true,\n      commonSlot: 'container'\n    }\n  )\n\n  // Refs\n  const timeoutRef = useRef<NodeJS.Timeout>(null)\n\n  // States\n  const [inputValue, setInputValue] = useState(props.value)\n\n  // UseEffects\n  useEffect(() => {\n    setInputValue(props.value)\n  }, [props.value])\n\n  // Functions\n  function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n    setInputValue(e.target.value)\n\n    if (timeoutRef.current) clearTimeout(timeoutRef.current)\n\n    timeoutRef.current = setTimeout(() => {\n      props.onChange(e.target.value)\n    }, delay)\n  }\n\n  return (\n    <div style={styles.container}>\n      {!props.hideLabel ? (\n        <Label htmlFor={inputId} label={props.label} />\n      ) : null}\n\n      <div style={styles.wrapper} className={classes.wrapper}>\n        {props.hasSearchIcon ? (\n          <Icon name=\"general-search\" size=\"sm\" color=\"secondary\" />\n        ) : null}\n\n        <input\n          id={inputId}\n          type=\"search\"\n          value={inputValue}\n          style={styles.input}\n          className={classes.input}\n          autoFocus={props.autoFocus}\n          placeholder={props.placeholder || 'Pesquisar'}\n          aria-label={!props.hideLabel ? undefined : props.label}\n          onChange={handleInput}\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAEA,SAAgB,0BAA0B;AACxC,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GACP,SAAS;GACT,eAAe;GACf,QAAQ;GACT;EAED,SAAS;GACP,OAAO;GACP,SAAS;GACT,YAAY;GAEZ,aAAa;GACb,WAAW;GACX,cAAc;GACd,SAAS;GAET,WAAW;GACX,aAAa;GAEb,SAAS,EACP,kBAAkB;IAChB,eAAe;IACf,SAAS;IACV,EACF;GACF;EACD,OAAO;GACL,MAAM;GAEN,YAAY;GACZ,UAAU;GACV,YAAY;GACZ,YAAY;GACZ,OAAO;GAEP,SAAS;IACP,cAAc,EACZ,QAAQ,eACT;IAED,WAAW,EACT,SAAS,QACV;IAED,kBAAkB;KAChB,YAAY;KACZ,OAAO;KACR;IACF;GACF;EACF,CAAC;;;;;ACrCJ,MAAaA,eAA2C,EACtD,QAAQ,KACR,GAAG,YACC;CAEJ,MAAM,UAAU,OAAO;CAIvB,MAAM,EAAE,QAAQ,YAAY,gBAHN;EAAE,GAAG;EAAO;EAAO,EAKvC,yBACA;EACE,OAAM,MAAK;GAAC,EAAE;GAAO,EAAE;GAAO,EAAE;GAAc;EAC9C,kBAAkB;EAClB,YAAY;EACb,CACF;CAGD,MAAM,aAAa,OAAuB,KAAK;CAG/C,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM,MAAM;AAGzD,iBAAgB;AACd,gBAAc,MAAM,MAAM;IACzB,CAAC,MAAM,MAAM,CAAC;CAGjB,SAAS,YAAY,GAAwC;AAC3D,gBAAc,EAAE,OAAO,MAAM;AAE7B,MAAI,WAAW,QAAS,cAAa,WAAW,QAAQ;AAExD,aAAW,UAAU,iBAAiB;AACpC,SAAM,SAAS,EAAE,OAAO,MAAM;KAC7B,MAAM;;AAGX,QACE,qBAAC;EAAI,OAAO,OAAO;aAChB,CAAC,MAAM,YACN,oBAAC;GAAM,SAAS;GAAS,OAAO,MAAM;IAAS,GAC7C,MAEJ,qBAAC;GAAI,OAAO,OAAO;GAAS,WAAW,QAAQ;cAC5C,MAAM,gBACL,oBAAC;IAAK,MAAK;IAAiB,MAAK;IAAK,OAAM;KAAc,GACxD,MAEJ,oBAAC;IACC,IAAI;IACJ,MAAK;IACL,OAAO;IACP,OAAO,OAAO;IACd,WAAW,QAAQ;IACnB,WAAW,MAAM;IACjB,aAAa,MAAM,eAAe;IAClC,cAAY,CAAC,MAAM,YAAY,SAAY,MAAM;IACjD,UAAU;KACV;IACE;GACF"}
+{"version":3,"file":"SearchInput-CZ6NlgaZ.js","names":["SearchInput: React.FC<SearchInputProps>"],"sources":["../src/components/commons/inputs/SearchInput/styles.ts","../src/components/commons/inputs/SearchInput/index.tsx"],"sourcesContent":["import { styled } from '@hooks/useThemedStyles/types'\n\nexport function createSearchInputStyles() {\n  return styled({\n    container: {\n      width: '100%',\n      display: 'flex',\n      flexDirection: 'column',\n      rowGap: '0.5rem'\n    },\n\n    wrapper: {\n      width: '100%',\n      display: 'flex',\n      alignItems: 'center',\n\n      borderWidth: 1,\n      columnGap: '0.5rem',\n      borderRadius: '0.5rem',\n      padding: '0.625rem 0.875rem',\n\n      boxShadow: 'var(--px-shadow-default)',\n      borderColor: 'var(--px-border-primary)',\n\n      __rules: {\n        '&:focus-within': {\n          outlineOffset: '-1px',\n          outline: `2px solid var(--px-color-primary)`\n        }\n      }\n    },\n    input: {\n      flex: 1,\n\n      fontWeight: 500,\n      fontSize: '1rem',\n      lineHeight: '1.5rem',\n      fontFamily: 'inherit',\n      color: 'var(--px-text-primary)',\n\n      __rules: {\n        '&:disabled': {\n          cursor: 'not-allowed'\n        },\n\n        '&:focus': {\n          outline: 'none'\n        },\n\n        '&::placeholder': {\n          fontWeight: 400,\n          color: 'var(--px-text-secondary)'\n        }\n      }\n    }\n  })\n}\n","/** biome-ignore-all lint/a11y/noAutofocus: It's a custom search input component */\n// External Libraries\nimport type React from 'react'\nimport { useEffect, useId, useRef, useState } from 'react'\n\n// Components\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { Label } from '@components/commons/toolkit/Label'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SearchInputProps } from './types'\n\n// Styles\nimport { createSearchInputStyles } from './styles'\n\nexport const SearchInput: React.FC<SearchInputProps> = ({\n  delay = 500,\n  ...props\n}) => {\n  // Constants\n  const inputId = useId()\n  const resolvedProps = { ...props, delay }\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(\n    resolvedProps,\n    createSearchInputStyles,\n    {\n      pick: p => [p.delay, p.value, p.hasSearchIcon],\n      applyCommonProps: true,\n      commonSlot: 'container'\n    }\n  )\n\n  // Refs\n  const timeoutRef = useRef<NodeJS.Timeout>(null)\n\n  // States\n  const [inputValue, setInputValue] = useState(props.value)\n\n  // UseEffects\n  useEffect(() => {\n    setInputValue(props.value)\n  }, [props.value])\n\n  // Functions\n  function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n    setInputValue(e.target.value)\n\n    if (timeoutRef.current) clearTimeout(timeoutRef.current)\n\n    timeoutRef.current = setTimeout(() => {\n      props.onChange(e.target.value)\n    }, delay)\n  }\n\n  return (\n    <div style={styles.container}>\n      {!props.hideLabel ? (\n        <Label htmlFor={inputId} label={props.label} />\n      ) : null}\n\n      <div style={styles.wrapper} className={classes.wrapper}>\n        {props.hasSearchIcon ? (\n          <Icon name=\"general-search\" size=\"sm\" color=\"secondary\" />\n        ) : null}\n\n        <input\n          id={inputId}\n          type=\"search\"\n          value={inputValue}\n          style={styles.input}\n          className={classes.input}\n          autoFocus={props.autoFocus}\n          placeholder={props.placeholder || 'Pesquisar'}\n          aria-label={!props.hideLabel ? undefined : props.label}\n          onChange={handleInput}\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAEA,SAAgB,0BAA0B;AACxC,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GACP,SAAS;GACT,eAAe;GACf,QAAQ;GACT;EAED,SAAS;GACP,OAAO;GACP,SAAS;GACT,YAAY;GAEZ,aAAa;GACb,WAAW;GACX,cAAc;GACd,SAAS;GAET,WAAW;GACX,aAAa;GAEb,SAAS,EACP,kBAAkB;IAChB,eAAe;IACf,SAAS;IACV,EACF;GACF;EACD,OAAO;GACL,MAAM;GAEN,YAAY;GACZ,UAAU;GACV,YAAY;GACZ,YAAY;GACZ,OAAO;GAEP,SAAS;IACP,cAAc,EACZ,QAAQ,eACT;IAED,WAAW,EACT,SAAS,QACV;IAED,kBAAkB;KAChB,YAAY;KACZ,OAAO;KACR;IACF;GACF;EACF,CAAC;;;;;ACrCJ,MAAaA,eAA2C,EACtD,QAAQ,KACR,GAAG,YACC;CAEJ,MAAM,UAAU,OAAO;CAIvB,MAAM,EAAE,QAAQ,YAAY,gBAHN;EAAE,GAAG;EAAO;EAAO,EAKvC,yBACA;EACE,OAAM,MAAK;GAAC,EAAE;GAAO,EAAE;GAAO,EAAE;GAAc;EAC9C,kBAAkB;EAClB,YAAY;EACb,CACF;CAGD,MAAM,aAAa,OAAuB,KAAK;CAG/C,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM,MAAM;AAGzD,iBAAgB;AACd,gBAAc,MAAM,MAAM;IACzB,CAAC,MAAM,MAAM,CAAC;CAGjB,SAAS,YAAY,GAAwC;AAC3D,gBAAc,EAAE,OAAO,MAAM;AAE7B,MAAI,WAAW,QAAS,cAAa,WAAW,QAAQ;AAExD,aAAW,UAAU,iBAAiB;AACpC,SAAM,SAAS,EAAE,OAAO,MAAM;KAC7B,MAAM;;AAGX,QACE,qBAAC;EAAI,OAAO,OAAO;aAChB,CAAC,MAAM,YACN,oBAAC;GAAM,SAAS;GAAS,OAAO,MAAM;IAAS,GAC7C,MAEJ,qBAAC;GAAI,OAAO,OAAO;GAAS,WAAW,QAAQ;cAC5C,MAAM,gBACL,oBAAC;IAAK,MAAK;IAAiB,MAAK;IAAK,OAAM;KAAc,GACxD,MAEJ,oBAAC;IACC,IAAI;IACJ,MAAK;IACL,OAAO;IACP,OAAO,OAAO;IACd,WAAW,QAAQ;IACnB,WAAW,MAAM;IACjB,aAAa,MAAM,eAAe;IAClC,cAAY,CAAC,MAAM,YAAY,SAAY,MAAM;IACjD,UAAU;KACV;IACE;GACF"}

package/dist/{Select-S6mWQinR.js → Select-Bjf4h9IV.js}

@@ -1,10 +1,11 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-CUbWXrNN.js";
-import { t as Icon } from "./Icon-DTFfAYeH.js";
-import { t as Typography } from "./Typography-4iQDPw2N.js";
-import { t as BasePopover } from "./BasePopover-T1mEexwp.js";
-import { t as Label } from "./Label-CaQSxOx8.js";
-import { t as ErrorMessage } from "./ErrorMessage-C_XOzH00.js";
-import { t as Loader } from "./Loader-1l1G52jQ.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-C2-V1GJa.js";
+import { t as Icon } from "./Icon-DsZcccBA.js";
+import { t as Typography } from "./Typography-DNz74SEg.js";
+import { t as BasePopover } from "./BasePopover-CJ3fgbyR.js";
+import { t as Label } from "./Label-CVSeI-Bh.js";
+import { t as ErrorMessage } from "./ErrorMessage-BlKbgDGA.js";
+import { t as Loader } from "./Loader-COoEBdxD.js";
+import { r as ScrollDirection, t as ScrollPaginationContainer } from "./ScrollPaginationContainer-CMpmFODW.js";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -26,7 +27,7 @@ function createOptionsStyles(props) {
 			__rules: {
 				"&:hover": { backgroundColor: "var(--px-background-card-hover) !important" },
 				"&:focus": {
-					outlineOffset: "-1px",
+					outlineOffset: "-2px",
 					outline: "2px solid var(--px-color-primary)"
 				}
 			}
@@ -301,6 +302,7 @@ function createSelectStyles(props) {
 		},
 		content: {
 			width: "100%",
+			height: "2.75rem",
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "space-between",
@@ -430,11 +432,16 @@ const Select = (props) => {
 				},
 				trigger: renderTrigger,
 				onOpenChange: changeOpen,
-				children: /* @__PURE__ */ jsx("div", {
-					style: styles.panel,
-					role: "listbox",
-					...nav.getListProps(),
-					children: renderOptions()
+				children: /* @__PURE__ */ jsx(ScrollPaginationContainer, {
+					fillFlex: true,
+					direction: ScrollDirection.Vertical,
+					verticalPagination: props.pagination,
+					children: /* @__PURE__ */ jsx("div", {
+						style: styles.panel,
+						role: "listbox",
+						...nav.getListProps(),
+						children: renderOptions()
+					})
 				})
 			}),
 			props.errorMessage ? /* @__PURE__ */ jsx(ErrorMessage, { message: props.errorMessage }) : null
@@ -444,4 +451,4 @@ const Select = (props) => {
 
 //#endregion
 export { types_exports as n, Select as t };
-//# sourceMappingURL=Select-S6mWQinR.js.map
+//# sourceMappingURL=Select-Bjf4h9IV.js.map

package/dist/Select-Bjf4h9IV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select-Bjf4h9IV.js","names":["value","Select: React.FC<SelectProps>"],"sources":["../src/components/commons/inputs/Select/components/OptionItem/styles.ts","../src/components/commons/inputs/Select/components/OptionItem/index.tsx","../src/hooks/useCompositeListNavigation/index.ts","../src/components/commons/inputs/Select/hooks/useSelect/index.ts","../src/components/commons/inputs/Select/styles.ts","../src/components/commons/inputs/Select/types.ts","../src/components/commons/inputs/Select/index.tsx"],"sourcesContent":["import type { OptionItemProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createOptionsStyles(\n  props: OptionItemProps & { ['data-active']?: string }\n) {\n  const { isSelected } = props\n  const isActive = props['data-active'] === 'true'\n  const highlighted = isSelected || isActive\n\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      alignItems: 'center',\n      textAlign: 'left',\n\n      borderRadius: '0.25rem',\n      padding: '0.5rem 0.75rem',\n\n      cursor: 'pointer',\n      transition: 'background-color 0.2s ease-out',\n\n      backgroundColor: highlighted\n        ? 'var(--px-background-card-hover)'\n        : 'transparent',\n\n      __rules: {\n        '&:hover': {\n          backgroundColor: 'var(--px-background-card-hover) !important'\n        },\n\n        '&:focus': {\n          outlineOffset: '-2px',\n          outline: '2px solid var(--px-color-primary)'\n        }\n      }\n    },\n\n    text: {\n      flex: 1,\n\n      fontSize: '1rem',\n      fontWeight: 500,\n      lineHeight: '1.5rem',\n      fontFamily: 'inherit',\n      color: 'var(--px-text-primary)',\n\n      overflow: 'hidden',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis'\n    }\n  })\n}\n","/** biome-ignore-all lint/a11y/useSemanticElements: It's a custom select component */\nimport type React from 'react'\nimport { forwardRef } from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { OptionItemProps } from './types'\n\n// Styles\nimport { createOptionsStyles } from './styles'\n\ntype NativeButtonProps = Omit<\n  React.ComponentPropsWithoutRef<'button'>,\n  'onClick'\n>\n\nexport const OptionItem = forwardRef<\n  HTMLButtonElement,\n  OptionItemProps & NativeButtonProps\n>((props, ref) => {\n  const { styles, classes } = useThemedStyles(props, createOptionsStyles)\n\n  const { option, isSelected, onClick, ...rest } = props\n\n  return (\n    <button\n      {...rest}\n      ref={ref}\n      type=\"button\"\n      role=\"option\"\n      style={styles.container}\n      className={classes.container}\n      aria-label={option.label}\n      aria-selected={isSelected}\n      onClick={() => onClick(option.value)}\n    >\n      <span style={styles.text}>{option.label}</span>\n    </button>\n  )\n})\n\nOptionItem.displayName = 'OptionItem'\n","// External Libraries\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nexport type CompositeItemMeta = {\n  disabled?: boolean\n  hasChildren?: boolean\n  onActivate?: () => void\n  onOpenChildren?: () => void\n  onCloseChildren?: () => void\n}\n\ntype Params = {\n  open: boolean\n  itemCount: number\n  initialIndex?: number\n  onCloseByTab?: () => void\n  setOpen: (v: boolean) => void\n  makeMeta: (index: number) => CompositeItemMeta\n}\n\nfunction findNextEnabled(\n  start: number,\n  dir: 1 | -1,\n  count: number,\n  isDisabled: (i: number) => boolean\n) {\n  if (count <= 0) return 0\n  let i = start\n  for (let step = 0; step < count; step++) {\n    i = (i + dir + count) % count\n    if (!isDisabled(i)) return i\n  }\n  return start\n}\n\nfunction findFirstEnabled(count: number, isDisabled: (i: number) => boolean) {\n  for (let i = 0; i < count; i++) if (!isDisabled(i)) return i\n  return 0\n}\n\nexport function useCompositeListNavigation({\n  open,\n  itemCount,\n  initialIndex,\n  setOpen,\n  makeMeta,\n  onCloseByTab\n}: Params) {\n  const listRef = useRef<HTMLElement | null>(null)\n  const itemRefs = useRef<Array<HTMLButtonElement | null>>([])\n\n  const isDisabled = useCallback(\n    (i: number) => !!makeMeta(i).disabled,\n    [makeMeta]\n  )\n\n  const [activeIndex, setActiveIndex] = useState(0)\n\n  const focusItem = useCallback((i: number) => {\n    const el = itemRefs.current[i]\n    if (!el) return\n    el.focus({ preventScroll: true })\n    el.scrollIntoView({ block: 'nearest' })\n  }, [])\n\n  const openAndFocus = useCallback(\n    (index?: number) => {\n      setOpen(true)\n\n      const next =\n        typeof index === 'number'\n          ? index\n          : typeof initialIndex === 'number'\n            ? initialIndex\n            : findFirstEnabled(itemCount, isDisabled)\n\n      setActiveIndex(next)\n      requestAnimationFrame(() => focusItem(next))\n    },\n    [focusItem, initialIndex, isDisabled, itemCount, setOpen]\n  )\n\n  useEffect(() => {\n    if (!open) return\n    requestAnimationFrame(() => focusItem(activeIndex))\n  }, [open, activeIndex, focusItem])\n\n  const move = useCallback(\n    (dir: 1 | -1) => {\n      const next = findNextEnabled(activeIndex, dir, itemCount, isDisabled)\n      setActiveIndex(next)\n      requestAnimationFrame(() => focusItem(next))\n    },\n    [activeIndex, itemCount, isDisabled, focusItem]\n  )\n\n  const activate = useCallback(() => {\n    const meta = makeMeta(activeIndex)\n    if (meta.disabled) return\n    meta.onActivate?.()\n  }, [activeIndex, makeMeta])\n\n  const onListKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (!open) return\n\n      switch (e.key) {\n        case 'Tab': {\n          // ✅ fecha e deixa o browser focar o próximo\n          // (e NÃO restaura foco pro trigger)\n          onCloseByTab?.()\n          setOpen(false)\n          return\n        }\n\n        case 'ArrowDown':\n          e.preventDefault()\n          move(+1)\n          return\n\n        case 'ArrowUp':\n          e.preventDefault()\n          move(-1)\n          return\n\n        case 'Home': {\n          e.preventDefault()\n          const first = findFirstEnabled(itemCount, isDisabled)\n          setActiveIndex(first)\n          requestAnimationFrame(() => focusItem(first))\n          return\n        }\n\n        case 'End': {\n          e.preventDefault()\n          let last = itemCount - 1\n          for (let i = itemCount - 1; i >= 0; i--) {\n            if (!isDisabled(i)) {\n              last = i\n              break\n            }\n          }\n          setActiveIndex(last)\n          requestAnimationFrame(() => focusItem(last))\n          return\n        }\n\n        case 'Enter':\n        case ' ': {\n          e.preventDefault()\n          activate()\n          return\n        }\n\n        case 'Escape':\n          e.preventDefault()\n          setOpen(false)\n          return\n\n        case 'ArrowRight': {\n          e.preventDefault()\n          const meta = makeMeta(activeIndex)\n          if (meta.hasChildren) meta.onOpenChildren?.()\n          return\n        }\n\n        case 'ArrowLeft': {\n          e.preventDefault()\n          const meta = makeMeta(activeIndex)\n          meta.onCloseChildren?.()\n          return\n        }\n      }\n    },\n    [\n      open,\n      itemCount,\n      activeIndex,\n      move,\n      setOpen,\n      activate,\n      makeMeta,\n      focusItem,\n      isDisabled,\n      onCloseByTab\n    ]\n  )\n\n  const getTriggerProps = useCallback(() => {\n    return {\n      onKeyDown: (e: React.KeyboardEvent) => {\n        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n          e.preventDefault()\n          if (!open) openAndFocus()\n          return\n        }\n\n        if (e.key === 'ArrowUp') {\n          e.preventDefault()\n          if (!open) openAndFocus(itemCount > 0 ? itemCount - 1 : 0)\n        }\n      }\n    }\n  }, [open, openAndFocus, itemCount])\n\n  const getListProps = useCallback(() => {\n    return {\n      ref: (el: HTMLElement | null) => {\n        listRef.current = el\n      },\n      onKeyDown: onListKeyDown\n    }\n  }, [onListKeyDown])\n\n  const getItemProps = useCallback(\n    (index: number) => {\n      const isActive = index === activeIndex\n      return {\n        ref: (el: HTMLButtonElement | null) => {\n          itemRefs.current[index] = el\n        },\n        tabIndex: isActive ? 0 : -1,\n        'data-active': isActive ? 'true' : 'false'\n      } as const\n    },\n    [activeIndex]\n  )\n\n  return {\n    activeIndex,\n    getListProps,\n    getItemProps,\n    openAndFocus,\n    setActiveIndex,\n    getTriggerProps\n  }\n}\n","// External Libraries\nimport { useState } from 'react'\n\n// Types\nimport type { SelectProps } from '../../types'\nimport { useCompositeListNavigation } from '@hooks/useCompositeListNavigation'\n\nexport function useSelect({\n  value,\n  options,\n  multiple,\n  disabled,\n  canClear,\n  onChange\n}: SelectProps) {\n  // States\n  const [open, setOpen] = useState(false)\n\n  // Hooks\n  const nav = useCompositeListNavigation({\n    open,\n    itemCount: options.length,\n    setOpen: changeOpen,\n    makeMeta: makeMeta\n  })\n\n  // Functions\n  function handleOptionClick(option: string) {\n    const isAlreadySelected = value.includes(option)\n\n    if (!multiple) {\n      if (isAlreadySelected) {\n        if (canClear) onChange([])\n      } else onChange([option])\n\n      setOpen(false)\n      return\n    }\n\n    if (isAlreadySelected) {\n      if (value.length === 1) {\n        if (canClear) onChange([])\n      } else onChange(value.filter(v => v !== option))\n    } else onChange([...value, option])\n  }\n\n  function makeMeta(index: number) {\n    const opt = options[index]\n    return {\n      onActivate: () => {\n        if (opt) handleOptionClick(opt.value)\n      }\n    }\n  }\n\n  function changeOpen(value: boolean) {\n    setOpen(value)\n  }\n\n  function togglePanel() {\n    if (disabled) return\n    if (!open) nav.openAndFocus()\n  }\n\n  function closePanel() {\n    setOpen(false)\n  }\n\n  return {\n    nav,\n    open,\n    makeMeta,\n    changeOpen,\n    togglePanel,\n    closePanel,\n    handleOptionClick\n  }\n}\n","import { styled } from '@hooks/useThemedStyles/types'\nimport type { SelectProps } from './types'\n\nexport function createSelectStyles(props: SelectProps) {\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n      position: 'relative',\n\n      rowGap: '0.375rem'\n    },\n\n    content: {\n      width: '100%',\n      height: '2.75rem',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n\n      borderWidth: 1,\n      columnGap: '0.25rem',\n      borderRadius: '0.5rem',\n      padding: '0.625rem 0.875rem',\n\n      opacity: props.disabled || props.isLoading ? 0.5 : 1,\n      cursor: props.isLoading\n        ? 'progress'\n        : props.disabled\n          ? 'not-allowed'\n          : 'pointer',\n      boxShadow: 'var(--px-shadow-default)',\n      borderColor: props.errorMessage\n        ? 'var(--px-color-error)'\n        : 'var(--px-border-primary)',\n\n      __rules: {\n        '&:focus-within': {\n          outlineOffset: '-1px !important',\n          outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'}) !important`\n        }\n      }\n    },\n\n    text: {\n      flex: 1,\n\n      textAlign: 'left',\n\n      overflow: 'hidden',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n\n      fontSize: '1rem',\n      lineHeight: '1.5rem',\n      fontFamily: 'inherit',\n      fontWeight: props.value.length ? 500 : 400,\n      color: props.value.length\n        ? 'var(--px-text-primary)'\n        : 'var(--px-text-secondary)'\n    },\n\n    panel: { width: '100%' }\n  })\n}\n","import type {\n  TextProps,\n  LayoutProps,\n  MarginProps,\n  TypeStyles\n} from '@hooks/useThemedStyles/types'\nimport type { createSelectStyles } from './styles'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\nimport type { PopoverProps } from '@components/commons/toolkit/Popover/types'\nimport type { Pagination } from '@components/commons/toolkit/ScrollPaginationContainer/types'\n\nexport interface SelectProps extends LayoutProps, MarginProps {\n  label: string\n  value: string[]\n  placeholder?: string\n  options: SelectOption[]\n  isLoading?: boolean\n\n  portalId?: PopoverProps['portalId']\n  strategy?: FloatingOptions['strategy']\n  scrollContainerId?: FloatingOptions['scrollContainerId']\n  absoluteReference?: FloatingOptions['absoluteReference']\n  placement?: FloatingOptions['placement']\n\n  canClear?: boolean\n  multiple?: boolean\n  required?: boolean\n  disabled?: boolean\n  hideLabel?: boolean\n  errorMessage?: string\n  maxVisibleItems?: number\n  maxHeightPopover?: string\n\n  pagination?: Pagination\n\n  startIcon?: React.ReactNode\n  styles?: TypeStyles<typeof createSelectStyles>\n\n  requiredColor?: string\n  labelConfig?: TextProps\n\n  onChange: (value: string[]) => void\n}\n\nexport interface SelectOption {\n  label: string\n  value: string\n}\n","/** biome-ignore-all lint/a11y/useSemanticElements: It's a custom select component */\n// External Libraries\nimport type React from 'react'\nimport { useMemo } from 'react'\n\n// Components\nimport { OptionItem } from './components/OptionItem'\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { Label } from '@components/commons/toolkit/Label'\nimport { ErrorMessage } from '../../toolkit/ErrorMessage'\nimport { Loader } from '@components/commons/toolkit/Loader'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\nimport { ScrollPaginationContainer } from '@components/commons/toolkit/ScrollPaginationContainer'\n\n// Hooks\nimport { useSelect } from './hooks/useSelect'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SelectProps } from './types'\nimport type { PopoverTriggerRenderProps } from '@components/commons/toolkit/Popover/types'\n\n// Styles\nimport { createSelectStyles } from './styles'\nimport { ScrollDirection } from '@components/commons/toolkit/ScrollPaginationContainer/types'\n\nexport * as SelectTypes from './types'\n\nexport const Select: React.FC<SelectProps> = props => {\n  const { nav, open, changeOpen, handleOptionClick } = useSelect(props)\n  const { styles, classes } = useThemedStyles(props, createSelectStyles, {\n    pick: p => [p.disabled, p.errorMessage, p.value, p.isLoading],\n    override: props.styles,\n    applyCommonProps: true,\n    commonSlot: 'container'\n  })\n\n  const maxVisible = props.maxVisibleItems ?? Infinity\n  const optionsMap = useMemo(\n    () => new Map(props.options.map(option => [option.value, option.label])),\n    [props.options]\n  )\n\n  // Functions\n  function renderContent() {\n    if (!props.value?.length) return props.placeholder\n\n    const resolvedValues = props.value.map(val => optionsMap.get(val) ?? val)\n    const visibleItems = resolvedValues.slice(0, maxVisible)\n    const hiddenCount = resolvedValues.length - visibleItems.length\n\n    let result = visibleItems.join(', ')\n    if (hiddenCount > 0) result += ` +${hiddenCount}`\n    return result\n  }\n\n  function renderTrigger({\n    ref,\n    ariaExpanded,\n    onClick\n  }: PopoverTriggerRenderProps) {\n    const triggerKeyProps = nav.getTriggerProps()\n\n    return (\n      <button\n        ref={ref as React.RefObject<HTMLButtonElement>}\n        dir=\"ltr\"\n        type=\"button\"\n        role=\"combobox\"\n        style={styles.content}\n        aria-autocomplete=\"none\"\n        aria-label={props.label}\n        className={classes.content}\n        aria-expanded={ariaExpanded}\n        disabled={props.disabled || props.isLoading}\n        {...triggerKeyProps}\n        onClick={onClick}\n      >\n        {props.value.length ? props.startIcon : null}\n\n        <span id=\"text-content\" style={styles.text}>\n          {renderContent()}\n        </span>\n\n        {props.isLoading ? (\n          <Loader size=\"1rem\" color=\"var(--px-color-primary)\" />\n        ) : (\n          <Icon size=\"sm\" name=\"chevrons-down\" />\n        )}\n      </button>\n    )\n  }\n\n  function renderOptions() {\n    if (props.options.length === 0) {\n      return (\n        <Typography variant=\"b2\" textAlign=\"center\">\n          No options\n        </Typography>\n      )\n    }\n\n    return props.options.map((option, idx) => (\n      <OptionItem\n        key={option.value}\n        option={option}\n        onClick={handleOptionClick}\n        isSelected={props.value.includes(option.value)}\n        {...nav.getItemProps(idx)}\n      />\n    ))\n  }\n\n  return (\n    <div style={styles.container}>\n      {props.hideLabel ? null : (\n        <Label\n          label={props.label}\n          required={props.required}\n          requiredColor={props.requiredColor}\n          {...props.labelConfig}\n        />\n      )}\n\n      <BasePopover\n        open={open}\n        portalId={props.portalId}\n        absoluteReference={props.absoluteReference}\n        maxHeight={props.maxHeightPopover}\n        floatingOptions={{\n          viewportMargin: 0,\n          strategy: props.strategy,\n          placement: props.placement,\n          scrollContainerId: props.scrollContainerId\n        }}\n        trigger={renderTrigger}\n        onOpenChange={changeOpen}\n      >\n        <ScrollPaginationContainer\n          fillFlex\n          direction={ScrollDirection.Vertical}\n          verticalPagination={props.pagination}\n        >\n          <div style={styles.panel} role=\"listbox\" {...nav.getListProps()}>\n            {renderOptions()}\n          </div>\n        </ScrollPaginationContainer>\n      </BasePopover>\n\n      {props.errorMessage ? (\n        <ErrorMessage message={props.errorMessage} />\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/{Skeleton-D3Rik5Rl.js → Skeleton-CK7nXld2.js}

@@ -1,4 +1,4 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-CUbWXrNN.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-C2-V1GJa.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/commons/structure/Skeleton/styles.ts
@@ -41,4 +41,4 @@ const Skeleton = (props) => {
 
 //#endregion
 export { Skeleton as t };
-//# sourceMappingURL=Skeleton-D3Rik5Rl.js.map
+//# sourceMappingURL=Skeleton-CK7nXld2.js.map

package/dist/{Skeleton-D3Rik5Rl.js.map → Skeleton-CK7nXld2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Skeleton-D3Rik5Rl.js","names":["Skeleton: React.FC<SkeletonProps>"],"sources":["../src/components/commons/structure/Skeleton/styles.ts","../src/components/commons/structure/Skeleton/index.tsx"],"sourcesContent":["// Types\nimport type { SkeletonProps } from './types'\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createSkeletonStyles(props: SkeletonProps): StyleMap {\n  const { width = '100%', height = '100%', borderRadius = '5px' } = props\n\n  return styled({\n    container: {\n      display: 'flex',\n\n      width,\n      minWidth: width,\n\n      height,\n      minHeight: height,\n\n      borderRadius,\n\n      cursor: 'default',\n      color: 'transparent',\n\n      background: 'var(--px-bg-skeleton)',\n      backgroundSize: '400% 400%',\n      animation: 'gradient 3s ease infinite',\n\n      __keyframes: {\n        gradient: {\n          '0%': { backgroundPosition: '0% 50%' },\n          '50%': { backgroundPosition: '100% 50%' },\n          '100%': { backgroundPosition: '0% 50%' }\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SkeletonProps } from './types'\n\n// Styles\nimport { createSkeletonStyles } from './styles'\n\nexport const Skeleton: React.FC<SkeletonProps> = props => {\n  const { styles } = useThemedStyles(props, createSkeletonStyles, {\n    applyCommonProps: true,\n    override: props.styles,\n    pick: p => [p.width, p.height, p.borderRadius]\n  })\n\n  return <div style={styles.container} />\n}\n"],"mappings":";;;;AAKA,SAAgB,qBAAqB,OAAgC;CACnE,MAAM,EAAE,QAAQ,QAAQ,SAAS,QAAQ,eAAe,UAAU;AAElE,QAAO,OAAO,EACZ,WAAW;EACT,SAAS;EAET;EACA,UAAU;EAEV;EACA,WAAW;EAEX;EAEA,QAAQ;EACR,OAAO;EAEP,YAAY;EACZ,gBAAgB;EAChB,WAAW;EAEX,aAAa,EACX,UAAU;GACR,MAAM,EAAE,oBAAoB,UAAU;GACtC,OAAO,EAAE,oBAAoB,YAAY;GACzC,QAAQ,EAAE,oBAAoB,UAAU;GACzC,EACF;EACF,EACF,CAAC;;;;;ACvBJ,MAAaA,YAAoC,UAAS;CACxD,MAAM,EAAE,WAAW,gBAAgB,OAAO,sBAAsB;EAC9D,kBAAkB;EAClB,UAAU,MAAM;EAChB,OAAM,MAAK;GAAC,EAAE;GAAO,EAAE;GAAQ,EAAE;GAAa;EAC/C,CAAC;AAEF,QAAO,oBAAC,SAAI,OAAO,OAAO,YAAa"}
+{"version":3,"file":"Skeleton-CK7nXld2.js","names":["Skeleton: React.FC<SkeletonProps>"],"sources":["../src/components/commons/structure/Skeleton/styles.ts","../src/components/commons/structure/Skeleton/index.tsx"],"sourcesContent":["// Types\nimport type { SkeletonProps } from './types'\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createSkeletonStyles(props: SkeletonProps): StyleMap {\n  const { width = '100%', height = '100%', borderRadius = '5px' } = props\n\n  return styled({\n    container: {\n      display: 'flex',\n\n      width,\n      minWidth: width,\n\n      height,\n      minHeight: height,\n\n      borderRadius,\n\n      cursor: 'default',\n      color: 'transparent',\n\n      background: 'var(--px-bg-skeleton)',\n      backgroundSize: '400% 400%',\n      animation: 'gradient 3s ease infinite',\n\n      __keyframes: {\n        gradient: {\n          '0%': { backgroundPosition: '0% 50%' },\n          '50%': { backgroundPosition: '100% 50%' },\n          '100%': { backgroundPosition: '0% 50%' }\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SkeletonProps } from './types'\n\n// Styles\nimport { createSkeletonStyles } from './styles'\n\nexport const Skeleton: React.FC<SkeletonProps> = props => {\n  const { styles } = useThemedStyles(props, createSkeletonStyles, {\n    applyCommonProps: true,\n    override: props.styles,\n    pick: p => [p.width, p.height, p.borderRadius]\n  })\n\n  return <div style={styles.container} />\n}\n"],"mappings":";;;;AAKA,SAAgB,qBAAqB,OAAgC;CACnE,MAAM,EAAE,QAAQ,QAAQ,SAAS,QAAQ,eAAe,UAAU;AAElE,QAAO,OAAO,EACZ,WAAW;EACT,SAAS;EAET;EACA,UAAU;EAEV;EACA,WAAW;EAEX;EAEA,QAAQ;EACR,OAAO;EAEP,YAAY;EACZ,gBAAgB;EAChB,WAAW;EAEX,aAAa,EACX,UAAU;GACR,MAAM,EAAE,oBAAoB,UAAU;GACtC,OAAO,EAAE,oBAAoB,YAAY;GACzC,QAAQ,EAAE,oBAAoB,UAAU;GACzC,EACF;EACF,EACF,CAAC;;;;;ACvBJ,MAAaA,YAAoC,UAAS;CACxD,MAAM,EAAE,WAAW,gBAAgB,OAAO,sBAAsB;EAC9D,kBAAkB;EAClB,UAAU,MAAM;EAChB,OAAM,MAAK;GAAC,EAAE;GAAO,EAAE;GAAQ,EAAE;GAAa;EAC/C,CAAC;AAEF,QAAO,oBAAC,SAAI,OAAO,OAAO,YAAa"}

package/dist/{Switch-Bu4IlCGe.js → Switch-CWfHuT5f.js}

@@ -1,4 +1,4 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-CUbWXrNN.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-C2-V1GJa.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/commons/toolkit/Switch/styles.ts
@@ -53,4 +53,4 @@ const Switch = (props) => {
 
 //#endregion
 export { Switch as t };
-//# sourceMappingURL=Switch-Bu4IlCGe.js.map
+//# sourceMappingURL=Switch-CWfHuT5f.js.map

package/dist/{Switch-Bu4IlCGe.js.map → Switch-CWfHuT5f.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Switch-Bu4IlCGe.js","names":["Switch: React.FC<SwitchThumbProps>"],"sources":["../src/components/commons/toolkit/Switch/styles.ts","../src/components/commons/toolkit/Switch/index.tsx"],"sourcesContent":["// Types\nimport type { SwitchThumbProps } from './types'\n\n// Styles\nimport { styled } from '@hooks/useThemedStyles/types'\nexport function createSwitchThumbStyles({\n  checked,\n  colorActive,\n  colorInactive,\n  colorIndicator\n}: SwitchThumbProps) {\n  return styled({\n    container: {\n      width: '2.5rem',\n      height: '1.5rem',\n\n      position: 'relative',\n\n      display: 'inline-flex',\n      alignItems: 'center',\n      marginLeft: '0.5rem',\n\n      borderRadius: '2rem',\n      padding: '0.125rem',\n\n      transition: 'background-color 0.5s',\n      backgroundColor: checked\n        ? (colorActive ?? 'var(--px-color-success)')\n        : (colorInactive ?? 'var(--px-color-disabled)')\n    },\n\n    indicator: {\n      height: '1.25rem',\n      width: '1.25rem',\n\n      position: 'absolute',\n      left: '0.125rem',\n      top: '0.125rem',\n\n      borderRadius: '9999px',\n      backgroundColor: colorIndicator ?? 'var(--px-surface)',\n\n      transition: 'transform 0.5s',\n      transform: checked ? 'translateX(1rem)' : 'translateX(0)',\n      willChange: 'transform'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport type { MouseEvent } from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SwitchThumbProps } from './types'\n\n// Styles\nimport { createSwitchThumbStyles } from './styles'\n\nexport const Switch: React.FC<SwitchThumbProps> = props => {\n  const { checked, onChange } = props\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createSwitchThumbStyles, {\n    applyCommonProps: true,\n    pick: p => [p.checked]\n  })\n\n  // Functions\n  function handleChange(e: MouseEvent<HTMLSpanElement>) {\n    e.stopPropagation()\n    e.preventDefault()\n\n    onChange?.(!checked)\n  }\n\n  return (\n    // biome-ignore lint/a11y/useKeyWithClickEvents: <Not Needed>\n    // biome-ignore lint/a11y/noStaticElementInteractions: <Not Needed>\n    <span style={styles.container} onClick={handleChange}>\n      <span style={styles.indicator} />\n    </span>\n  )\n}\n"],"mappings":";;;;AAKA,SAAgB,wBAAwB,EACtC,SACA,aACA,eACA,kBACmB;AACnB,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GACP,QAAQ;GAER,UAAU;GAEV,SAAS;GACT,YAAY;GACZ,YAAY;GAEZ,cAAc;GACd,SAAS;GAET,YAAY;GACZ,iBAAiB,UACZ,eAAe,4BACf,iBAAiB;GACvB;EAED,WAAW;GACT,QAAQ;GACR,OAAO;GAEP,UAAU;GACV,MAAM;GACN,KAAK;GAEL,cAAc;GACd,iBAAiB,kBAAkB;GAEnC,YAAY;GACZ,WAAW,UAAU,qBAAqB;GAC1C,YAAY;GACb;EACF,CAAC;;;;;ACjCJ,MAAaA,UAAqC,UAAS;CACzD,MAAM,EAAE,SAAS,aAAa;CAG9B,MAAM,EAAE,WAAW,gBAAgB,OAAO,yBAAyB;EACjE,kBAAkB;EAClB,OAAM,MAAK,CAAC,EAAE,QAAQ;EACvB,CAAC;CAGF,SAAS,aAAa,GAAgC;AACpD,IAAE,iBAAiB;AACnB,IAAE,gBAAgB;AAElB,aAAW,CAAC,QAAQ;;AAGtB,QAGE,oBAAC;EAAK,OAAO,OAAO;EAAW,SAAS;YACtC,oBAAC,UAAK,OAAO,OAAO,YAAa;GAC5B"}
+{"version":3,"file":"Switch-CWfHuT5f.js","names":["Switch: React.FC<SwitchThumbProps>"],"sources":["../src/components/commons/toolkit/Switch/styles.ts","../src/components/commons/toolkit/Switch/index.tsx"],"sourcesContent":["// Types\nimport type { SwitchThumbProps } from './types'\n\n// Styles\nimport { styled } from '@hooks/useThemedStyles/types'\nexport function createSwitchThumbStyles({\n  checked,\n  colorActive,\n  colorInactive,\n  colorIndicator\n}: SwitchThumbProps) {\n  return styled({\n    container: {\n      width: '2.5rem',\n      height: '1.5rem',\n\n      position: 'relative',\n\n      display: 'inline-flex',\n      alignItems: 'center',\n      marginLeft: '0.5rem',\n\n      borderRadius: '2rem',\n      padding: '0.125rem',\n\n      transition: 'background-color 0.5s',\n      backgroundColor: checked\n        ? (colorActive ?? 'var(--px-color-success)')\n        : (colorInactive ?? 'var(--px-color-disabled)')\n    },\n\n    indicator: {\n      height: '1.25rem',\n      width: '1.25rem',\n\n      position: 'absolute',\n      left: '0.125rem',\n      top: '0.125rem',\n\n      borderRadius: '9999px',\n      backgroundColor: colorIndicator ?? 'var(--px-surface)',\n\n      transition: 'transform 0.5s',\n      transform: checked ? 'translateX(1rem)' : 'translateX(0)',\n      willChange: 'transform'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport type { MouseEvent } from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SwitchThumbProps } from './types'\n\n// Styles\nimport { createSwitchThumbStyles } from './styles'\n\nexport const Switch: React.FC<SwitchThumbProps> = props => {\n  const { checked, onChange } = props\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createSwitchThumbStyles, {\n    applyCommonProps: true,\n    pick: p => [p.checked]\n  })\n\n  // Functions\n  function handleChange(e: MouseEvent<HTMLSpanElement>) {\n    e.stopPropagation()\n    e.preventDefault()\n\n    onChange?.(!checked)\n  }\n\n  return (\n    // biome-ignore lint/a11y/useKeyWithClickEvents: <Not Needed>\n    // biome-ignore lint/a11y/noStaticElementInteractions: <Not Needed>\n    <span style={styles.container} onClick={handleChange}>\n      <span style={styles.indicator} />\n    </span>\n  )\n}\n"],"mappings":";;;;AAKA,SAAgB,wBAAwB,EACtC,SACA,aACA,eACA,kBACmB;AACnB,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GACP,QAAQ;GAER,UAAU;GAEV,SAAS;GACT,YAAY;GACZ,YAAY;GAEZ,cAAc;GACd,SAAS;GAET,YAAY;GACZ,iBAAiB,UACZ,eAAe,4BACf,iBAAiB;GACvB;EAED,WAAW;GACT,QAAQ;GACR,OAAO;GAEP,UAAU;GACV,MAAM;GACN,KAAK;GAEL,cAAc;GACd,iBAAiB,kBAAkB;GAEnC,YAAY;GACZ,WAAW,UAAU,qBAAqB;GAC1C,YAAY;GACb;EACF,CAAC;;;;;ACjCJ,MAAaA,UAAqC,UAAS;CACzD,MAAM,EAAE,SAAS,aAAa;CAG9B,MAAM,EAAE,WAAW,gBAAgB,OAAO,yBAAyB;EACjE,kBAAkB;EAClB,OAAM,MAAK,CAAC,EAAE,QAAQ;EACvB,CAAC;CAGF,SAAS,aAAa,GAAgC;AACpD,IAAE,iBAAiB;AACnB,IAAE,gBAAgB;AAElB,aAAW,CAAC,QAAQ;;AAGtB,QAGE,oBAAC;EAAK,OAAO,OAAO;EAAW,SAAS;YACtC,oBAAC,UAAK,OAAO,OAAO,YAAa;GAC5B"}

package/dist/{TabSwitch-O8s4dJ84.js → TabSwitch-DSxetCLF.js}

@@ -1,5 +1,5 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-CUbWXrNN.js";
-import { t as Typography } from "./Typography-4iQDPw2N.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-C2-V1GJa.js";
+import { t as Typography } from "./Typography-DNz74SEg.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "framer-motion";
 
@@ -127,4 +127,4 @@ const TabSwitch = (props) => {
 
 //#endregion
 export { types_exports as n, TabSwitch as t };
-//# sourceMappingURL=TabSwitch-O8s4dJ84.js.map
+//# sourceMappingURL=TabSwitch-DSxetCLF.js.map

package/dist/{TabSwitch-O8s4dJ84.js.map → TabSwitch-DSxetCLF.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TabSwitch-O8s4dJ84.js","names":[],"sources":["../src/components/commons/toolkit/TabSwitch/components/TabSwitchItem/styles.ts","../src/components/commons/toolkit/TabSwitch/components/TabSwitchItem/index.tsx","../src/components/commons/toolkit/TabSwitch/styles.ts","../src/components/commons/toolkit/TabSwitch/types.ts","../src/components/commons/toolkit/TabSwitch/index.tsx"],"sourcesContent":["// External Libraries\nimport { styled } from '@hooks/useThemedStyles/types'\n\ninterface Params {\n  disabled?: boolean\n  selected?: boolean\n  selectedColor?: string\n  variant: 'default' | 'underline'\n}\n\nexport function createTabSwitchItemStyles({\n  variant,\n  disabled,\n  selected,\n  selectedColor\n}: Params) {\n  const accent = selectedColor ?? 'var(--px-color-primary)'\n\n  return styled({\n    item: {\n      minHeight: '1.25rem',\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 4,\n      background: 'transparent',\n      border: 0,\n      padding: '8px 10px',\n      cursor: disabled ? 'not-allowed' : 'pointer',\n      opacity: disabled ? 0.5 : 1,\n      userSelect: 'none',\n      whiteSpace: 'nowrap',\n      __rules: { '& > p': { zIndex: 1 } }\n    },\n\n    selectedBg:\n      variant === 'default'\n        ? {\n            position: 'absolute',\n            inset: 0,\n            borderRadius: 6,\n            border: '1px solid var(--px-border-primary)',\n            background: selected ? accent : 'transparent'\n          }\n        : {\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            bottom: -2,\n            height: 2,\n            background: selected ? accent : 'transparent'\n          }\n  })\n}\n","// External Libraries\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SwitchOption } from '../../types'\n\n// Styles\nimport { createTabSwitchItemStyles } from './styles'\n\ntype Props<T> = {\n  option: SwitchOption<T>\n  selected: boolean\n  layoutId?: string\n  disabled?: boolean\n  selectedColor?: string\n  selectedLabelColor?: string\n  variant: 'default' | 'underline'\n  onClick: (value: T) => void\n}\n\nexport const SwitchItem = <T,>(props: Props<T>) => {\n  const { option, disabled, selected, layoutId, onClick } = props\n\n  const { styles, classes } = useThemedStyles(\n    props,\n    createTabSwitchItemStyles,\n    {\n      pick: p => [p.variant, p.selectedColor, p.selectedLabelColor, p.selected]\n    }\n  )\n\n  const isDisabled = disabled || option.disabled\n\n  return (\n    <button\n      type=\"button\"\n      style={styles.item}\n      className={classes.item}\n      tabIndex={isDisabled ? -1 : 0}\n      onClick={() => !isDisabled && onClick(option.value)}\n    >\n      {selected ? (\n        <motion.div\n          layoutId={layoutId || 'pixel-tabswitch-selected'}\n          style={styles.selectedBg}\n        />\n      ) : null}\n\n      {option.icon ? (\n        <span style={{ display: 'inline-flex' }}>{option.icon}</span>\n      ) : null}\n\n      {option.label ? (\n        <Typography variant=\"b1\" fontWeight=\"bold\">\n          {option.label}\n        </Typography>\n      ) : null}\n    </button>\n  )\n}\n","// Types\nimport type { TabSwitchProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createTabSwitchStyles<T>(props: TabSwitchProps<T>) {\n  const { fitContent, backgroundColor, variant } = props\n\n  return styled({\n    container: {\n      display: 'flex',\n      padding: '3px',\n      flexDirection: 'row',\n      alignItems: 'center',\n      borderRadius: '0.5rem',\n      color: 'var(--px-text-primary, #4b5563)',\n      width: fitContent ? 'fit-content' : '100%',\n      backgroundColor: backgroundColor ?? 'transparent',\n      borderBottom:\n        variant === 'underline'\n          ? '1px solid var(--px-border-primary, #e5e7eb)'\n          : 'unset',\n      gap: 0,\n      __rules: { '& svg': { zIndex: 1 } }\n    }\n  })\n}\n","// Types\nimport type { CommonStyleProps, TypeStyles } from '@hooks/useThemedStyles/types'\nimport type { ReactNode } from 'react'\nimport type { createTabSwitchStyles } from './styles'\n\nexport interface SwitchOption<T> {\n  value: T\n  label?: string\n  disabled?: boolean\n\n  icon?: ReactNode\n}\n\nexport interface TabSwitchProps<T> extends CommonStyleProps {\n  currentValue: T\n  options: SwitchOption<T>[]\n\n  disabled?: boolean\n  fitContent?: boolean\n\n  layoutId?: string\n\n  selectedColor?: string\n  backgroundColor?: string\n  selectedLabelColor?: string\n\n  variant?: 'default' | 'underline'\n\n  styles?: TypeStyles<typeof createTabSwitchStyles>\n\n  onChange: (value: T) => void\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Components\nimport { SwitchItem } from './components/TabSwitchItem'\n\n// Types\nimport type { TabSwitchProps } from './types'\n\n// Styles\nimport { createTabSwitchStyles } from './styles'\n\nexport * as TabSwitchTypes from './types'\n\nexport const TabSwitch = <T,>(props: TabSwitchProps<T>) => {\n  {\n    const {\n      options,\n      disabled,\n      layoutId,\n      currentValue,\n      variant = 'default',\n      onChange\n    } = props\n\n    const { styles, classes } = useThemedStyles(props, createTabSwitchStyles, {\n      pick: p => [p.disabled, p.currentValue],\n      override: props.styles,\n      applyCommonProps: true\n    })\n\n    return (\n      <div style={styles.container} className={classes.container}>\n        {options.map(opt => (\n          <SwitchItem\n            key={String(opt.value)}\n            option={opt}\n            variant={variant}\n            layoutId={layoutId}\n            disabled={disabled}\n            selectedColor={props.selectedColor}\n            selected={currentValue === opt.value}\n            selectedLabelColor={props.selectedLabelColor}\n            onClick={onChange}\n          />\n        ))}\n      </div>\n    )\n  }\n}\n"],"mappings":";;;;;;AAUA,SAAgB,0BAA0B,EACxC,SACA,UACA,UACA,iBACS;CACT,MAAM,SAAS,iBAAiB;AAEhC,QAAO,OAAO;EACZ,MAAM;GACJ,WAAW;GACX,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,QAAQ,WAAW,gBAAgB;GACnC,SAAS,WAAW,KAAM;GAC1B,YAAY;GACZ,YAAY;GACZ,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;GACpC;EAED,YACE,YAAY,YACR;GACE,UAAU;GACV,OAAO;GACP,cAAc;GACd,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC,GACD;GACE,UAAU;GACV,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC;EACR,CAAC;;;;;AC3BJ,MAAa,cAAkB,UAAoB;CACjD,MAAM,EAAE,QAAQ,UAAU,UAAU,UAAU,YAAY;CAE1D,MAAM,EAAE,QAAQ,YAAY,gBAC1B,OACA,2BACA,EACE,OAAM,MAAK;EAAC,EAAE;EAAS,EAAE;EAAe,EAAE;EAAoB,EAAE;EAAS,EAC1E,CACF;CAED,MAAM,aAAa,YAAY,OAAO;AAEtC,QACE,qBAAC;EACC,MAAK;EACL,OAAO,OAAO;EACd,WAAW,QAAQ;EACnB,UAAU,aAAa,KAAK;EAC5B,eAAe,CAAC,cAAc,QAAQ,OAAO,MAAM;;GAElD,WACC,oBAAC,OAAO;IACN,UAAU,YAAY;IACtB,OAAO,OAAO;KACd,GACA;GAEH,OAAO,OACN,oBAAC;IAAK,OAAO,EAAE,SAAS,eAAe;cAAG,OAAO;KAAY,GAC3D;GAEH,OAAO,QACN,oBAAC;IAAW,SAAQ;IAAK,YAAW;cACjC,OAAO;KACG,GACX;;GACG;;;;;AC3Db,SAAgB,sBAAyB,OAA0B;CACjE,MAAM,EAAE,YAAY,iBAAiB,YAAY;AAEjD,QAAO,OAAO,EACZ,WAAW;EACT,SAAS;EACT,SAAS;EACT,eAAe;EACf,YAAY;EACZ,cAAc;EACd,OAAO;EACP,OAAO,aAAa,gBAAgB;EACpC,iBAAiB,mBAAmB;EACpC,cACE,YAAY,cACR,gDACA;EACN,KAAK;EACL,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;EACpC,EACF,CAAC;;;;;;;;;AEVJ,MAAa,aAAiB,UAA6B;CACzD;EACE,MAAM,EACJ,SACA,UACA,UACA,cACA,UAAU,WACV,aACE;EAEJ,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,uBAAuB;GACxE,OAAM,MAAK,CAAC,EAAE,UAAU,EAAE,aAAa;GACvC,UAAU,MAAM;GAChB,kBAAkB;GACnB,CAAC;AAEF,SACE,oBAAC;GAAI,OAAO,OAAO;GAAW,WAAW,QAAQ;aAC9C,QAAQ,KAAI,QACX,oBAAC;IAEC,QAAQ;IACC;IACC;IACA;IACV,eAAe,MAAM;IACrB,UAAU,iBAAiB,IAAI;IAC/B,oBAAoB,MAAM;IAC1B,SAAS;MARJ,OAAO,IAAI,MAAM,CAStB,CACF;IACE"}
+{"version":3,"file":"TabSwitch-DSxetCLF.js","names":[],"sources":["../src/components/commons/toolkit/TabSwitch/components/TabSwitchItem/styles.ts","../src/components/commons/toolkit/TabSwitch/components/TabSwitchItem/index.tsx","../src/components/commons/toolkit/TabSwitch/styles.ts","../src/components/commons/toolkit/TabSwitch/types.ts","../src/components/commons/toolkit/TabSwitch/index.tsx"],"sourcesContent":["// External Libraries\nimport { styled } from '@hooks/useThemedStyles/types'\n\ninterface Params {\n  disabled?: boolean\n  selected?: boolean\n  selectedColor?: string\n  variant: 'default' | 'underline'\n}\n\nexport function createTabSwitchItemStyles({\n  variant,\n  disabled,\n  selected,\n  selectedColor\n}: Params) {\n  const accent = selectedColor ?? 'var(--px-color-primary)'\n\n  return styled({\n    item: {\n      minHeight: '1.25rem',\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 4,\n      background: 'transparent',\n      border: 0,\n      padding: '8px 10px',\n      cursor: disabled ? 'not-allowed' : 'pointer',\n      opacity: disabled ? 0.5 : 1,\n      userSelect: 'none',\n      whiteSpace: 'nowrap',\n      __rules: { '& > p': { zIndex: 1 } }\n    },\n\n    selectedBg:\n      variant === 'default'\n        ? {\n            position: 'absolute',\n            inset: 0,\n            borderRadius: 6,\n            border: '1px solid var(--px-border-primary)',\n            background: selected ? accent : 'transparent'\n          }\n        : {\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            bottom: -2,\n            height: 2,\n            background: selected ? accent : 'transparent'\n          }\n  })\n}\n","// External Libraries\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SwitchOption } from '../../types'\n\n// Styles\nimport { createTabSwitchItemStyles } from './styles'\n\ntype Props<T> = {\n  option: SwitchOption<T>\n  selected: boolean\n  layoutId?: string\n  disabled?: boolean\n  selectedColor?: string\n  selectedLabelColor?: string\n  variant: 'default' | 'underline'\n  onClick: (value: T) => void\n}\n\nexport const SwitchItem = <T,>(props: Props<T>) => {\n  const { option, disabled, selected, layoutId, onClick } = props\n\n  const { styles, classes } = useThemedStyles(\n    props,\n    createTabSwitchItemStyles,\n    {\n      pick: p => [p.variant, p.selectedColor, p.selectedLabelColor, p.selected]\n    }\n  )\n\n  const isDisabled = disabled || option.disabled\n\n  return (\n    <button\n      type=\"button\"\n      style={styles.item}\n      className={classes.item}\n      tabIndex={isDisabled ? -1 : 0}\n      onClick={() => !isDisabled && onClick(option.value)}\n    >\n      {selected ? (\n        <motion.div\n          layoutId={layoutId || 'pixel-tabswitch-selected'}\n          style={styles.selectedBg}\n        />\n      ) : null}\n\n      {option.icon ? (\n        <span style={{ display: 'inline-flex' }}>{option.icon}</span>\n      ) : null}\n\n      {option.label ? (\n        <Typography variant=\"b1\" fontWeight=\"bold\">\n          {option.label}\n        </Typography>\n      ) : null}\n    </button>\n  )\n}\n","// Types\nimport type { TabSwitchProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createTabSwitchStyles<T>(props: TabSwitchProps<T>) {\n  const { fitContent, backgroundColor, variant } = props\n\n  return styled({\n    container: {\n      display: 'flex',\n      padding: '3px',\n      flexDirection: 'row',\n      alignItems: 'center',\n      borderRadius: '0.5rem',\n      color: 'var(--px-text-primary, #4b5563)',\n      width: fitContent ? 'fit-content' : '100%',\n      backgroundColor: backgroundColor ?? 'transparent',\n      borderBottom:\n        variant === 'underline'\n          ? '1px solid var(--px-border-primary, #e5e7eb)'\n          : 'unset',\n      gap: 0,\n      __rules: { '& svg': { zIndex: 1 } }\n    }\n  })\n}\n","// Types\nimport type { CommonStyleProps, TypeStyles } from '@hooks/useThemedStyles/types'\nimport type { ReactNode } from 'react'\nimport type { createTabSwitchStyles } from './styles'\n\nexport interface SwitchOption<T> {\n  value: T\n  label?: string\n  disabled?: boolean\n\n  icon?: ReactNode\n}\n\nexport interface TabSwitchProps<T> extends CommonStyleProps {\n  currentValue: T\n  options: SwitchOption<T>[]\n\n  disabled?: boolean\n  fitContent?: boolean\n\n  layoutId?: string\n\n  selectedColor?: string\n  backgroundColor?: string\n  selectedLabelColor?: string\n\n  variant?: 'default' | 'underline'\n\n  styles?: TypeStyles<typeof createTabSwitchStyles>\n\n  onChange: (value: T) => void\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Components\nimport { SwitchItem } from './components/TabSwitchItem'\n\n// Types\nimport type { TabSwitchProps } from './types'\n\n// Styles\nimport { createTabSwitchStyles } from './styles'\n\nexport * as TabSwitchTypes from './types'\n\nexport const TabSwitch = <T,>(props: TabSwitchProps<T>) => {\n  {\n    const {\n      options,\n      disabled,\n      layoutId,\n      currentValue,\n      variant = 'default',\n      onChange\n    } = props\n\n    const { styles, classes } = useThemedStyles(props, createTabSwitchStyles, {\n      pick: p => [p.disabled, p.currentValue],\n      override: props.styles,\n      applyCommonProps: true\n    })\n\n    return (\n      <div style={styles.container} className={classes.container}>\n        {options.map(opt => (\n          <SwitchItem\n            key={String(opt.value)}\n            option={opt}\n            variant={variant}\n            layoutId={layoutId}\n            disabled={disabled}\n            selectedColor={props.selectedColor}\n            selected={currentValue === opt.value}\n            selectedLabelColor={props.selectedLabelColor}\n            onClick={onChange}\n          />\n        ))}\n      </div>\n    )\n  }\n}\n"],"mappings":";;;;;;AAUA,SAAgB,0BAA0B,EACxC,SACA,UACA,UACA,iBACS;CACT,MAAM,SAAS,iBAAiB;AAEhC,QAAO,OAAO;EACZ,MAAM;GACJ,WAAW;GACX,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,QAAQ,WAAW,gBAAgB;GACnC,SAAS,WAAW,KAAM;GAC1B,YAAY;GACZ,YAAY;GACZ,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;GACpC;EAED,YACE,YAAY,YACR;GACE,UAAU;GACV,OAAO;GACP,cAAc;GACd,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC,GACD;GACE,UAAU;GACV,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC;EACR,CAAC;;;;;AC3BJ,MAAa,cAAkB,UAAoB;CACjD,MAAM,EAAE,QAAQ,UAAU,UAAU,UAAU,YAAY;CAE1D,MAAM,EAAE,QAAQ,YAAY,gBAC1B,OACA,2BACA,EACE,OAAM,MAAK;EAAC,EAAE;EAAS,EAAE;EAAe,EAAE;EAAoB,EAAE;EAAS,EAC1E,CACF;CAED,MAAM,aAAa,YAAY,OAAO;AAEtC,QACE,qBAAC;EACC,MAAK;EACL,OAAO,OAAO;EACd,WAAW,QAAQ;EACnB,UAAU,aAAa,KAAK;EAC5B,eAAe,CAAC,cAAc,QAAQ,OAAO,MAAM;;GAElD,WACC,oBAAC,OAAO;IACN,UAAU,YAAY;IACtB,OAAO,OAAO;KACd,GACA;GAEH,OAAO,OACN,oBAAC;IAAK,OAAO,EAAE,SAAS,eAAe;cAAG,OAAO;KAAY,GAC3D;GAEH,OAAO,QACN,oBAAC;IAAW,SAAQ;IAAK,YAAW;cACjC,OAAO;KACG,GACX;;GACG;;;;;AC3Db,SAAgB,sBAAyB,OAA0B;CACjE,MAAM,EAAE,YAAY,iBAAiB,YAAY;AAEjD,QAAO,OAAO,EACZ,WAAW;EACT,SAAS;EACT,SAAS;EACT,eAAe;EACf,YAAY;EACZ,cAAc;EACd,OAAO;EACP,OAAO,aAAa,gBAAgB;EACpC,iBAAiB,mBAAmB;EACpC,cACE,YAAY,cACR,gDACA;EACN,KAAK;EACL,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;EACpC,EACF,CAAC;;;;;;;;;AEVJ,MAAa,aAAiB,UAA6B;CACzD;EACE,MAAM,EACJ,SACA,UACA,UACA,cACA,UAAU,WACV,aACE;EAEJ,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,uBAAuB;GACxE,OAAM,MAAK,CAAC,EAAE,UAAU,EAAE,aAAa;GACvC,UAAU,MAAM;GAChB,kBAAkB;GACnB,CAAC;AAEF,SACE,oBAAC;GAAI,OAAO,OAAO;GAAW,WAAW,QAAQ;aAC9C,QAAQ,KAAI,QACX,oBAAC;IAEC,QAAQ;IACC;IACC;IACA;IACV,eAAe,MAAM;IACrB,UAAU,iBAAiB,IAAI;IAC/B,oBAAoB,MAAM;IAC1B,SAAS;MARJ,OAAO,IAAI,MAAM,CAStB,CACF;IACE"}