@foi/design-system 0.0.13 → 0.0.15

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/components/atoms/Skeleton/Skeleton.emotion.ts","../src/components/atoms/Skeleton/Skeleton.tsx","../src/components/organisms/DataGrid/DataGrid.emotion.ts","../src/components/organisms/DataGrid/DataGridMenu/DataGridMenu.emotion.ts","../src/components/organisms/DataGrid/DataGridMenu/components/DataGridMenuSearch.tsx","../src/components/organisms/DataGrid/DataGridMenu/components/DataGridMenuMultiSelect.tsx","../src/components/organisms/DataGrid/DataGridMenu/DataGridMenu.tsx","../src/components/organisms/DataGrid/DataGridMenu/index.tsx","../src/components/organisms/DataGrid/DataGridSkeleton/DataGridSkeleton.tsx","../src/components/atoms/Pagination/Pagination.emotion.ts","../src/components/atoms/Pagination/PaginationMenu/PaginationMenu.emotion.ts","../src/components/atoms/Pagination/PaginationMenu/PaginationMenu.tsx","../src/components/atoms/Pagination/PaginationMenu/index.tsx","../src/components/atoms/Pagination/Pagination.tsx","../src/components/atoms/Pagination/index.tsx","../src/components/organisms/DataGrid/DataGrid.tsx","../src/components/organisms/DataGrid/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\n\nconst shimmer = keyframes`\n  0% { background-position: 200% center; }\n  100% { background-position: -200% center; }\n`;\n\nconst Style = css`\n  &.--SKELETON {\n    display: block;\n    background: linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0.05) 0%,\n      rgba(255, 255, 255, 0.13) 50%,\n      rgba(255, 255, 255, 0.05) 100%\n    );\n    background-size: 200% 100%;\n    animation: ${shimmer} 1.4s ease infinite;\n\n    &.--SKELETON--circular {\n      border-radius: 50%;\n    }\n\n    &.--SKELETON--rectangular {\n      border-radius: 4px;\n    }\n  }\n`;\n\nexport default Style;\n","// Component Base\nimport Style from './Skeleton.emotion';\nimport type { SkeletonProps } from './Skeleton.interface';\n\n/**\n * A low-fidelity placeholder that mimics the shape of content while it loads.\n *\n * Use `variant=\"rectangular\"` for text lines, cards, or images and\n * `variant=\"circular\"` for avatars or icon placeholders. Set `width` and\n * `height` to match the real content's dimensions.\n */\nconst Skeleton = ({ variant = 'rectangular', width, height, className }: SkeletonProps) => (\n  <span\n    className={['--SKELETON', `--SKELETON--${variant}`, className || ''].filter(Boolean).join(' ')}\n    css={Style}\n    style={{ width, height }}\n    aria-hidden='true'\n  />\n);\n\nexport default Skeleton;\n","import { css } from '@emotion/react';\nimport { getStyle } from '@utilities/emotion/styles';\n\nconst Style = (theme: Record<string, string>) => css`\n  &.--DATAGRID {\n    width: 100%;\n    box-sizing: border-box;\n\n    ${getStyle(theme, 'background-color', '--DATAGRID-ROOT-BACKGROUND-COLOR')};\n    ${getStyle(theme, 'border-color', `--DATAGRID-ROOT-BORDER-COLOR`)};\n    ${getStyle(theme, 'border-width', `--DATAGRID-ROOT-BORDER-WIDTH`)};\n    ${getStyle(theme, 'border-radius', '--DATAGRID-ROOT-BORDER-RADIUS')};\n    ${getStyle(theme, 'border-style', `--DATAGRID-ROOT-BORDER-STYLE`)};\n\n    .--DATAGRID-tableContainer {\n      width: 100%;\n      overflow-x: auto;\n    }\n\n    .--DATAGRID-bodyContainer {\n      &::-webkit-scrollbar {\n        width: 12px;\n        height: 4px;\n      }\n\n      &::-webkit-scrollbar-thumb {\n        background-color: rgba(0, 0, 0, 0.5);\n        border-radius: 9999px;\n        border: 3px solid transparent;\n        background-clip: padding-box;\n      }\n    }\n\n    .--DATAGRID-table {\n      width: 100%;\n      border-collapse: collapse;\n\n      .--DATAGRID-thead {\n        .--DATAGRID-thScrollbarSpacer {\n          border: none;\n          background: transparent;\n        }\n\n        .--DATAGRID-headerRow {\n          height: 48px;\n\n          .--DATAGRID-th {\n            ${getStyle(theme, 'background-color', '--DATAGRID-ROOT-BACKGROUND-COLOR')};\n\n            padding: 8px 16px;\n            text-align: left;\n            white-space: nowrap;\n\n            ${getStyle(theme, 'border-bottom-color', `--DATAGRID-ROOT-BORDER-COLOR`)};\n            ${getStyle(theme, 'border-bottom-width', `--DATAGRID-ROOT-BORDER-WIDTH`)};\n            ${getStyle(theme, 'border-bottom-style', `--DATAGRID-ROOT-BORDER-STYLE`)};\n\n            &.--DATAGRID-thOptions {\n              width: 80px;\n              text-align: right;\n            }\n\n            .--DATAGRID-thInner {\n              display: flex;\n              align-items: center;\n              gap: 6px;\n\n              .--DATAGRID-thActions {\n                display: flex;\n                align-items: center;\n                gap: 8px;\n                margin-left: auto;\n              }\n\n              .--DATAGRID-filterActive {\n                ${getStyle(theme, 'color', '--DATAGRID-EVENTS-ENABLED-ICON-COLOR')};\n              }\n\n              .--DATAGRID-thLabel {\n                ${getStyle(theme, 'color', '--DATAGRID-EVENTS-ENABLED-COLOR-SECONDARY')};\n\n                font-family: ${theme['--FONTFAMILY-PRIMARY']};\n                font-size: 0.875rem;\n                font-weight: 500;\n                letter-spacing: 0.01em;\n                line-height: 1;\n                white-space: nowrap;\n              }\n\n              .--DATAGRID-filterContainer {\n                display: flex;\n                align-items: center;\n                gap: 4px;\n\n                .--DATAGRID-filterLabel {\n                  ${getStyle(theme, 'color', '--DATAGRID-EVENTS-ENABLED-COLOR-SECONDARY')};\n\n                  font-family: ${theme['--FONTFAMILY-PRIMARY']};\n                  font-size: 0.75rem;\n                  font-weight: 500;\n                  cursor: pointer;\n                }\n              }\n            }\n          }\n        }\n      }\n\n      .--DATAGRID-tbody {\n        .--DATAGRID-row {\n          height: 48px;\n          transition: background-color 150ms;\n\n          ${getStyle(theme, 'border-bottom-color', `--DATAGRID-ROOT-BORDER-COLOR`)};\n          ${getStyle(theme, 'border-bottom-width', `--DATAGRID-ROOT-BORDER-WIDTH`)};\n          ${getStyle(theme, 'border-bottom-style', `--DATAGRID-ROOT-BORDER-STYLE`)};\n\n          &:hover {\n            ${getStyle(theme, 'background-color', '--DATAGRID-EVENTS-HOVER-BACKGROUND-COLOR')};\n          }\n\n          &:last-child {\n            border-bottom: none;\n          }\n        }\n\n        .--DATAGRID-td {\n          ${getStyle(theme, 'color', '--DATAGRID-EVENTS-ENABLED-COLOR-PRIMARY')};\n\n          padding: 8px 16px;\n          vertical-align: middle;\n\n          font-family: ${theme['--FONTFAMILY-PRIMARY']};\n          font-size: 0.875rem;\n          font-weight: 500;\n          letter-spacing: 0.01em;\n          line-height: 1;\n        }\n\n        .--DATAGRID-emptyCell {\n          text-align: center;\n          vertical-align: middle;\n\n          ${getStyle(theme, 'color', '--DATAGRID-EVENTS-ENABLED-COLOR-SECONDARY')};\n\n          font-family: ${theme['--FONTFAMILY-PRIMARY']};\n          font-size: 0.875rem;\n          font-weight: 400;\n        }\n\n        .--DATAGRID-loadingMore {\n          text-align: center;\n          padding: 12px 16px;\n          height: 48px;\n          vertical-align: middle;\n\n          ${getStyle(theme, 'color', '--DATAGRID-EVENTS-ENABLED-COLOR-SECONDARY')};\n\n          font-family: ${theme['--FONTFAMILY-PRIMARY']};\n          font-size: 0.875rem;\n        }\n      }\n    }\n\n    .--DATAGRID-tdOptions {\n      text-align: right;\n      display: flex;\n      gap: 8px;\n      justify-content: flex-end;\n      align-items: center;\n      padding: 12px 16px !important;\n    }\n  }\n`;\n\nexport default Style;\n","import { css } from '@emotion/react';\nimport { getStyle } from '@utilities/emotion/styles';\n\nconst container = (theme: Record<string, string>, event: string): string => `\n    // BACKGROUNDS\n    ${getStyle(theme, 'background-color', `--DATAGRIDMENU-${event}-BACKGROUND-COLOR`)}\n        \n    // BORDERS\n    ${getStyle(theme, 'border-color', `--DATAGRIDMENU-${event}-BORDER-COLOR`)}\n    ${getStyle(theme, 'border-width', `--DATAGRIDMENU-${event}-BORDER-WIDTH`)}\n    ${getStyle(theme, 'border-style', `--DATAGRIDMENU-${event}-BORDER-STYLE`)}\n    ${getStyle(theme, 'border-radius', `--DATAGRIDMENU-${event}-BORDER-RADIUS`)}\n`;\n\nconst Style = (theme: Record<string, string>) => css`\n  &.--DATAGRIDMENU {\n    position: fixed;\n    z-index: 200;\n    padding: 16px;\n    width: calc(240px - 32px);\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    box-shadow:\n      rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,\n      rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,\n      rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;\n\n    ${container(theme, 'ROOT')}\n\n    .--DATAGRIDMENU-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n\n      .--DATAGRIDMENU-headerTitle {\n        ${getStyle(theme, 'color', '--DATAGRIDMENU-EVENTS-ENABLED-COLOR-PRIMARY')};\n        font-family: ${theme['--FONTFAMILY-PRIMARY']};\n        font-size: 0.875rem;\n        font-weight: 600;\n      }\n    }\n\n    .--DATAGRIDMENU-content {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    // ─── Options list ─────────────────────────────────────────────────────────\n\n    .--DATAGRIDMENU-optionsList {\n      max-height: 180px;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n\n      &::-webkit-scrollbar {\n        width: 4px;\n      }\n      &::-webkit-scrollbar-track {\n        background: transparent;\n      }\n      &::-webkit-scrollbar-thumb {\n        background-color: rgba(255, 255, 255, 0.2);\n        border-radius: 2px;\n      }\n    }\n\n    .--DATAGRIDMENU-optionRow {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .--DATAGRIDMENU-optionDot {\n      width: 6px;\n      height: 24px;\n      border-radius: 2px;\n      flex-shrink: 0;\n    }\n\n    .--DATAGRIDMENU-actions {\n      display: flex;\n      gap: 8px;\n      justify-content: flex-end;\n    }\n  }\n`;\n\nexport default Style;\n","import Input from '@components/atoms/Input';\nimport Icon from '@components/atoms/Icon';\n\nconst CLASS = '--DATAGRIDMENU';\n\ninterface DataGridMenuSearchProps {\n  columnKey: string;\n  pendingSearch: string;\n  onSearchChange: (val: string) => void;\n  searchLabel?: string;\n}\n\nconst DataGridMenuSearch = ({\n  columnKey,\n  pendingSearch,\n  onSearchChange,\n  searchLabel = 'Search',\n}: DataGridMenuSearchProps) => (\n  <div className={`${CLASS}-searchInput`}>\n    <Input\n      name={`search-${columnKey}`}\n      label={searchLabel}\n      value={pendingSearch}\n      onValueChange={onSearchChange}\n      showErrorText={false}\n      width='full'\n      autoFocus\n      data-testid={`${CLASS}-searchInput-${columnKey}`}\n      startAdornment={<Icon name='search' style={{ color: 'white' }} />}\n    />\n  </div>\n);\n\nexport default DataGridMenuSearch;\n","import Input from '@components/atoms/Input';\nimport Checkbox from '@components/atoms/Checkbox';\nimport type { DataGridFilterOption } from '../../DataGrid.interface';\n\nconst CLASS = '--DATAGRIDMENU';\n\ninterface DataGridMenuMultiSelectProps {\n  filterType: 'multiselect' | 'multiselect-search';\n  columnKey: string;\n  options: DataGridFilterOption[];\n  pendingMulti: string[];\n  onMultiChange: (values: string[]) => void;\n  multiSearch: string;\n  onMultiSearchChange: (val: string) => void;\n}\n\nconst DataGridMenuMultiSelect = ({\n  filterType,\n  columnKey,\n  options,\n  pendingMulti,\n  onMultiChange,\n  multiSearch,\n  onMultiSearchChange,\n}: DataGridMenuMultiSelectProps) => {\n  const isMultiSearch = filterType === 'multiselect-search';\n  const filteredOpts = options.filter(\n    opt => !multiSearch || opt.label.toLowerCase().includes(multiSearch.toLowerCase()),\n  );\n\n  return (\n    <>\n      {isMultiSearch && (\n        <div className={`${CLASS}-searchInput`}>\n          <Input\n            name={`multiSearch-${columnKey}`}\n            label='Search options'\n            value={multiSearch}\n            onValueChange={onMultiSearchChange}\n            showErrorText={false}\n            width='full'\n            autoFocus\n            data-testid={`${CLASS}-multiSearch-${columnKey}`}\n          />\n        </div>\n      )}\n      <div className={`${CLASS}-optionsList`} data-testid={`${CLASS}-optionsList-${columnKey}`}>\n        {filteredOpts.map(opt => (\n          <div key={opt.value} className={`${CLASS}-optionRow`}>\n            {opt.color && (\n              <span className={`${CLASS}-optionDot`} style={{ backgroundColor: opt.color }} aria-hidden='true' />\n            )}\n            <Checkbox\n              checked={pendingMulti.includes(opt.value)}\n              onChecked={checked =>\n                onMultiChange(checked ? [...pendingMulti, opt.value] : pendingMulti.filter(v => v !== opt.value))\n              }\n              label={opt.label}\n              showErrorText={false}\n              data-testid={`${CLASS}-option-${columnKey}-${opt.value}`}\n            />\n          </div>\n        ))}\n      </div>\n    </>\n  );\n};\n\nexport default DataGridMenuMultiSelect;\n","// Component Base\nimport { useLayoutEffect, useRef } from 'react';\nimport emotion from './DataGridMenu.emotion';\nimport type { DataGridMenuProps } from './DataGridMenu.interface';\n// External Libraries\nimport ReactDOM from 'react-dom';\n// Custom Components\nimport Button from '@components/atoms/Button';\nimport IconButton from '@components/atoms/IconButton';\nimport Icon from '@components/atoms/Icon';\nimport DataGridMenuSearch from './components/DataGridMenuSearch';\nimport DataGridMenuMultiSelect from './components/DataGridMenuMultiSelect';\n\nconst CLASS = '--DATAGRIDMENU';\n\n/**\n * A portal-rendered popover that provides filter controls for a DataGrid column.\n *\n * Positions itself below `anchorEl` using `useLayoutEffect` and repositions\n * on window scroll / resize. Renders one of three filter UIs based on `filterType`:\n * - `'search'` — a single text input.\n * - `'multiselect'` — a list of checkboxes.\n * - `'multiselect-search'` — a list of checkboxes with an inline search input.\n *\n * Apply/cancel actions are delegated to the parent via `onApply` and `onCancel`.\n */\nconst DataGridMenu = ({\n  filterType,\n  options,\n  columnKey,\n  filterTitle,\n  searchLabel,\n  cancelLabel = 'Cancel',\n  applyLabel = 'Apply',\n  pendingSearch,\n  onSearchChange,\n  pendingMulti,\n  onMultiChange,\n  multiSearch,\n  onMultiSearchChange,\n  onCancel,\n  onApply,\n  onClear,\n  anchorEl,\n  style,\n}: DataGridMenuProps) => {\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    if (!anchorEl) return;\n\n    const update = () => {\n      if (!menuRef.current) return;\n      const rect = anchorEl.getBoundingClientRect();\n      const menuWidth = menuRef.current.offsetWidth;\n      const centeredLeft = rect.left + rect.width / 2 - menuWidth / 2;\n      menuRef.current.style.top = `${rect.bottom + 8}px`;\n      menuRef.current.style.left = `${Math.max(8, Math.min(centeredLeft, window.innerWidth - menuWidth - 8))}px`;\n    };\n\n    update();\n    // capture: true catches scroll inside overflow containers (e.g. DataGrid's overflow-x: auto)\n    window.addEventListener('scroll', update, true);\n    window.addEventListener('resize', update);\n    return () => {\n      window.removeEventListener('scroll', update, true);\n      window.removeEventListener('resize', update);\n    };\n  }, [anchorEl]);\n\n  return ReactDOM.createPortal(\n    <div\n      ref={menuRef}\n      className={CLASS}\n      css={emotion(style)}\n      data-popover-key={columnKey}\n      data-testid={`${CLASS}-${columnKey}`}\n    >\n      <div className={`${CLASS}-header`}>\n        <span className={`${CLASS}-headerTitle`}>{filterTitle}</span>\n        <IconButton\n          icon={<Icon name='delete_outline' size='sm' />}\n          onClick={onClear}\n          aria-label='Clear filter'\n          data-testid={`${CLASS}-clearBtn-${columnKey}`}\n        />\n      </div>\n      <div className={`${CLASS}-content`}>\n        {filterType === 'search' && (\n          <DataGridMenuSearch\n            columnKey={columnKey}\n            pendingSearch={pendingSearch}\n            onSearchChange={onSearchChange}\n            searchLabel={searchLabel}\n          />\n        )}\n        {(filterType === 'multiselect' || filterType === 'multiselect-search') && (\n          <DataGridMenuMultiSelect\n            filterType={filterType}\n            columnKey={columnKey}\n            options={options ?? []}\n            pendingMulti={pendingMulti}\n            onMultiChange={onMultiChange}\n            multiSearch={multiSearch}\n            onMultiSearchChange={onMultiSearchChange}\n          />\n        )}\n      </div>\n      <div className={`${CLASS}-actions`}>\n        <Button onClick={onCancel} data-testid={`${CLASS}-cancelBtn-${columnKey}`} variant='ghost'>\n          {cancelLabel}\n        </Button>\n        <Button onClick={onApply} data-testid={`${CLASS}-applyBtn-${columnKey}`}>\n          {applyLabel}\n        </Button>\n      </div>\n    </div>,\n    document.body,\n  );\n};\n\nexport default DataGridMenu;\n","import { useCreateComponentStyles } from '@hocs/ThemeProvider/useThemeProvider.hook';\nimport { Component } from '@hocs/ThemeProvider/interfaces';\nimport type { DataGridMenuStyleProps } from './DataGridMenu.interface';\nimport DataGridMenuBase from './DataGridMenu';\n\nconst DataGridMenu = ({ theme, variant = 'default', ...rest }: DataGridMenuStyleProps) => {\n  const { componentStyles } = useCreateComponentStyles([Component.DATAGRIDMENU], theme, variant.toUpperCase());\n  return <DataGridMenuBase {...rest} style={componentStyles} />;\n};\n\nexport default DataGridMenu;\n","import { useMemo } from 'react';\nimport Skeleton from '@components/atoms/Skeleton';\nimport type { DataGridColumn } from '../DataGrid.interface';\n\ninterface DataGridSkeletonProps {\n  columns: DataGridColumn[];\n  pageSize: number;\n}\n\nconst CLASS = '--DATAGRID';\n\nconst DataGridSkeleton = ({ columns, pageSize }: DataGridSkeletonProps) => {\n  const widths = useMemo(\n    () =>\n      Array.from({ length: pageSize }, () =>\n        columns.map(col => (col.type === 'options' ? null : `${Math.floor(Math.random() * 51) + 40}%`)),\n      ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [pageSize, columns.length],\n  );\n\n  return (\n    <>\n      {Array.from({ length: pageSize }).map((_, i) => (\n        <tr key={i} className={`${CLASS}-row`}>\n          {columns.map((col, colIndex) => (\n            <td\n              key={col.key}\n              className={[`${CLASS}-td`, col.type === 'options' ? `${CLASS}-tdOptions` : ''].filter(Boolean).join(' ')}\n            >\n              {col.type === 'options' ? (\n                <Skeleton variant='circular' width={24} height={24} />\n              ) : (\n                <Skeleton height={16} width={widths[i][colIndex] ?? undefined} />\n              )}\n            </td>\n          ))}\n        </tr>\n      ))}\n    </>\n  );\n};\n\nexport default DataGridSkeleton;\n","import { css } from '@emotion/react';\nimport { getStyle } from '@utilities/emotion/styles';\n\nconst Style = (theme: Record<string, string>) => css`\n  &.--PAGINATION {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 16px;\n    padding: 8px 16px;\n\n    .--PAGINATION-rowsControl {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n\n      .--PAGINATION-rowsSize {\n        ${getStyle(theme, 'color', '--PAGINATION-EVENTS-ENABLED-COLOR-SECONDARY')};\n        font-family: ${theme['--FONTFAMILY-PRIMARY']};\n        font-size: 0.8125rem;\n        user-select: none;\n        min-width: 20px;\n        text-align: center;\n      }\n    }\n\n    .--PAGINATION-controls {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n\n      .--PAGINATION-info {\n        ${getStyle(theme, 'color', '--PAGINATION-EVENTS-ENABLED-COLOR-SECONDARY')};\n        font-family: ${theme['--FONTFAMILY-PRIMARY']};\n        font-size: 0.8125rem;\n        user-select: none;\n      }\n    }\n  }\n`;\n\nexport default Style;\n","import { css } from '@emotion/react';\nimport { getStyle } from '@utilities/emotion/styles';\n\nconst row = (theme: Record<string, string>, event: string): string => `\n    // BACKGROUNDS\n    ${getStyle(theme, 'background-color', `--PAGINATIONMENU-EVENTS-${event}-BACKGROUND-COLOR`)}\n    \n    // BORDERS\n    ${getStyle(theme, 'border-color', `--PAGINATIONMENU-EVENTS-${event}-BORDER-COLOR`)}\n    ${getStyle(theme, 'border-width', `--PAGINATIONMENU-EVENTS-${event}-BORDER-WIDTH`)}\n    ${getStyle(theme, 'border-style', `--PAGINATIONMENU-EVENTS-${event}-BORDER-STYLE`)}\n    ${getStyle(theme, 'border-radius', `--PAGINATIONMENU-EVENTS-${event}-BORDER-RADIUS`)}\n`;\n\nconst typography = (theme: Record<string, string>, event: string): string => `\n    // TYPOGRAPHY\n    ${getStyle(theme, 'color', `--PAGINATIONMENU-EVENTS-${event}-COLOR-PRIMARY`)};\n    ${getStyle(theme, 'caret-color', `--PAGINATIONMENU-EVENTS-${event}-COLOR-PRIMARY`)};\n`;\n\nconst container = (theme: Record<string, string>, event: string): string => `\n    // BACKGROUNDS\n    ${getStyle(theme, 'background-color', `--PAGINATIONMENU-${event}-BACKGROUND-COLOR`)}\n        \n    // BORDERS\n    ${getStyle(theme, 'border-color', `--PAGINATIONMENU-${event}-BORDER-COLOR`)}\n    ${getStyle(theme, 'border-width', `--PAGINATIONMENU-${event}-BORDER-WIDTH`)}\n    ${getStyle(theme, 'border-style', `--PAGINATIONMENU-${event}-BORDER-STYLE`)}\n    ${getStyle(theme, 'border-radius', `--PAGINATIONMENU-${event}-BORDER-RADIUS`)}\n`;\n\nconst Style = (theme: Record<string, string>) => css`\n  &.--PAGINATIONMENU {\n    position: absolute;\n    bottom: calc(100% + ${theme['--PAGINATIONMENU-ROOT-BOTTOM'] || ''});\n    left: 50%;\n    transform: translateX(-50%);\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    z-index: 10;\n    box-shadow:\n      rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,\n      rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,\n      rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;\n\n    ${container(theme, 'ROOT')}\n\n    .--PAGINATIONMENU-option {\n      all: unset;\n      cursor: pointer;\n      text-align: center;\n      padding: 6px 20px;\n      white-space: nowrap;\n      transition: background-color 120ms;\n      font-family: ${theme['--FONTFAMILY-PRIMARY']};\n      font-size: 0.8125rem;\n\n      // ENABLED\n      ${row(theme, 'ENABLED')}\n      ${typography(theme, 'ENABLED')}\n\n      // VALUE\n      &.--PAGINATIONMENU-selected {\n        ${row(theme, 'VALUE')}\n        ${typography(theme, 'VALUE')}\n      }\n\n      // HOVER\n      &:hover {\n        ${row(theme, 'HOVER')}\n        ${typography(theme, 'HOVER')}\n      }\n\n      // - ACTIVE\n      &:active,\n      &.--PAGINATIONMENU-active {\n        ${row(theme, 'ACTIVE')}\n        ${typography(theme, 'ACTIVE')}\n      }\n\n      // FOCUS\n      &:focus-visible {\n        outline-offset: 0px;\n        outline: 0;\n        ${row(theme, 'FOCUS')}\n        ${typography(theme, 'FOCUS')}\n      }\n    }\n  }\n`;\n\nexport default Style;\n","// Component Base\nimport emotion from './PaginationMenu.emotion';\nimport type { PaginationMenuProps } from './PaginationMenu.interface';\n\nconst CLASS = '--PAGINATIONMENU';\n\n/**\n * A floating dropdown that renders a list of page-size options.\n *\n * Rendered inside `<Pagination>` when `pageSizeOptions` is provided.\n * Keyboard focus is controlled externally via `focusedElement`.\n */\nconst PaginationMenu = ({ options, activeOption, onSelect, focusedElement = -1, style }: PaginationMenuProps) => (\n  <div className={CLASS} css={emotion(style)}>\n    {options.map((option, index) => {\n      const selectedClass = option === activeOption ? `${CLASS}-selected` : '';\n      const isActive = focusedElement === index;\n      return (\n        <button\n          key={option}\n          className={[`${CLASS}-option`, selectedClass, isActive ? `${CLASS}-active` : ''].filter(Boolean).join(' ')}\n          onClick={() => onSelect(option)}\n        >\n          {option}\n        </button>\n      );\n    })}\n  </div>\n);\n\nexport default PaginationMenu;\n","import { useCreateComponentStyles } from '@hocs/ThemeProvider/useThemeProvider.hook';\nimport { Component } from '@hocs/ThemeProvider/interfaces';\nimport type { PaginationMenuStyleProps } from './PaginationMenu.interface';\nimport PaginationMenuBase from './PaginationMenu';\n\nconst PaginationMenu = ({ theme, variant = 'default', ...rest }: PaginationMenuStyleProps) => {\n  const { componentStyles } = useCreateComponentStyles([Component.PAGINATIONMENU], theme, variant.toUpperCase());\n  return <PaginationMenuBase {...rest} style={componentStyles} />;\n};\n\nexport default PaginationMenu;\nexport type { PaginationMenuProps, PaginationMenuStyleProps } from './PaginationMenu.interface';\n","// Component Base\nimport React, { useState, useEffect } from 'react';\nimport Style from './Pagination.emotion';\nimport type { PaginationProps } from './Pagination.interface';\n// Custom Components\nimport IconButton from '@components/atoms/IconButton';\nimport Icon from '@components/atoms/Icon';\nimport PaginationMenu from './PaginationMenu';\n\nconst CLASS = '--PAGINATION';\n\n/**\n * A pagination control bar that lets users navigate between pages of data.\n *\n * Displays the current row range (`start–end of total`), first/prev/next/last\n * navigation buttons, and — when `pageSizeOptions` is provided — a rows-per-page\n * dropdown menu.\n *\n * All navigation buttons are disabled while `loading` is `true`.\n */\nconst Pagination = ({\n  page,\n  total,\n  pageSize,\n  onPageChange,\n  pageSizeOptions,\n  onPageSizeChange,\n  loading,\n  className,\n  style,\n}: PaginationProps) => {\n  const [rowsMenuOpen, setRowsMenuOpen] = useState(false);\n  const [focusedElement, setFocusedElement] = useState(-1);\n\n  const totalPages = Math.max(1, Math.ceil(total / pageSize));\n  const start = page * pageSize + 1;\n  const end = Math.min((page + 1) * pageSize, total);\n  const isFirst = page === 0;\n  const isLast = page >= totalPages - 1;\n\n  const closeMenu = () => {\n    setRowsMenuOpen(false);\n    setFocusedElement(-1);\n  };\n\n  useEffect(() => {\n    if (!rowsMenuOpen) return;\n    const close = (e: MouseEvent) => {\n      if (!(e.target as HTMLElement).closest(`.${CLASS}-rowsControl`)) {\n        setRowsMenuOpen(false);\n        setFocusedElement(-1);\n      }\n    };\n    document.addEventListener('mousedown', close);\n    return () => document.removeEventListener('mousedown', close);\n  }, [rowsMenuOpen]);\n\n  const onKeyDownRowsBtn = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === 'Tab' || e.key === 'Escape') {\n      setRowsMenuOpen(false);\n      setFocusedElement(-1);\n    } else if (['ArrowDown', 'ArrowUp'].includes(e.key) && rowsMenuOpen) {\n      e.preventDefault();\n      if (e.key === 'ArrowDown') setFocusedElement(prev => (prev + 1 >= (pageSizeOptions?.length ?? 0) ? 0 : prev + 1));\n      else setFocusedElement(prev => (prev - 1 < 0 ? (pageSizeOptions?.length ?? 1) - 1 : prev - 1));\n    } else if (e.key === 'Enter' && rowsMenuOpen && focusedElement >= 0 && pageSizeOptions) {\n      e.preventDefault();\n      const option = pageSizeOptions[focusedElement];\n      if (option !== undefined) {\n        onPageSizeChange?.(option);\n        setRowsMenuOpen(false);\n        setFocusedElement(-1);\n      }\n    }\n  };\n\n  return (\n    <div className={[CLASS, className || ''].filter(Boolean).join(' ')} css={Style(style ?? {})}>\n      {pageSizeOptions && pageSizeOptions.length > 0 && (\n        <div className={`${CLASS}-rowsControl`}>\n          {rowsMenuOpen && (\n            <PaginationMenu\n              options={pageSizeOptions}\n              activeOption={pageSize}\n              onSelect={option => {\n                onPageSizeChange?.(option);\n                closeMenu();\n              }}\n              focusedElement={focusedElement}\n            />\n          )}\n          <span className={`${CLASS}-rowsSize`}>{pageSize}</span>\n          <IconButton\n            icon={<Icon name='arrow_drop_up' size='sm' />}\n            onClick={() => (rowsMenuOpen ? closeMenu() : setRowsMenuOpen(true))}\n            onKeyDown={onKeyDownRowsBtn}\n            isFlipped={rowsMenuOpen}\n            aria-label='Rows per page'\n            data-testid={`${CLASS}-rowsBtn`}\n          />\n        </div>\n      )}\n      <div className={`${CLASS}-controls`}>\n        <span className={`${CLASS}-info`}>\n          {start}-{end} of {total}\n        </span>\n        <IconButton\n          icon={<Icon name='first_page' size='sm' />}\n          onClick={() => onPageChange(0)}\n          disabled={loading || isFirst}\n          aria-label='First page'\n          data-testid={`${CLASS}-first`}\n        />\n        <IconButton\n          icon={<Icon name='chevron_left' size='sm' />}\n          onClick={() => onPageChange(page - 1)}\n          disabled={loading || isFirst}\n          aria-label='Previous page'\n          data-testid={`${CLASS}-prev`}\n        />\n        <IconButton\n          icon={<Icon name='chevron_right' size='sm' />}\n          onClick={() => onPageChange(page + 1)}\n          disabled={loading || isLast}\n          aria-label='Next page'\n          data-testid={`${CLASS}-next`}\n        />\n        <IconButton\n          icon={<Icon name='last_page' size='sm' />}\n          onClick={() => onPageChange(totalPages - 1)}\n          disabled={loading || isLast}\n          aria-label='Last page'\n          data-testid={`${CLASS}-last`}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default Pagination;\n","import { useCreateComponentStyles } from '@hocs/ThemeProvider/useThemeProvider.hook';\nimport { Component } from '@hocs/ThemeProvider/interfaces';\nimport type { PaginationStyleProps } from './Pagination.interface';\nimport PaginationBase from './Pagination';\n\nconst Pagination = ({ theme, variant = 'default', ...rest }: PaginationStyleProps) => {\n  const { componentStyles } = useCreateComponentStyles([Component.PAGINATION], theme, variant.toUpperCase());\n  return <PaginationBase {...rest} style={componentStyles} />;\n};\n\nexport default Pagination;\nexport type { PaginationProps, PaginationStyleProps } from './Pagination.interface';\n","// Component Base\nimport React, { useState, useEffect, useRef, useCallback, useLayoutEffect } from 'react';\nimport emotion from './DataGrid.emotion';\nimport type { DataGridProps, DataGridColumn, DataGridSortState } from './DataGrid.interface';\n// Custom Components\nimport IconButton from '@components/atoms/IconButton';\nimport Icon from '@components/atoms/Icon';\nimport DataGridMenu from './DataGridMenu';\nimport DataGridSkeleton from './DataGridSkeleton';\nimport Pagination from '@components/atoms/Pagination';\n\nconst CLASS = '--DATAGRID';\nconst DEFAULT_PAGE_SIZE = 10;\n\n/**\n * A full-featured data table with server-side fetching, sorting, filtering, and pagination.\n *\n * Pass `columns` to define the table structure and `onFetch` to supply data.\n * `onFetch` is called automatically whenever the page, page size, active sort,\n * or any column filter changes.\n *\n * **Pagination modes** (controlled by `paginationType`):\n * - `'pagination'` — renders a `<Pagination>` bar below the table.\n * - `'scroll'` — appends rows as the user scrolls down (infinite scroll).\n *\n * **Column actions:**\n * - Sortable columns show a sort-direction toggle in the header.\n * - Columns with a `filter` config show a filter popover icon.\n * - Add a column with `type: 'options'` and a `render` prop for row-level action buttons.\n */\nconst DataGrid = <T extends object>({\n  columns,\n  onFetch,\n  paginationType = 'pagination',\n  pageSize = DEFAULT_PAGE_SIZE,\n  pageSizeOptions,\n  emptyContent = <span>No se han encontrado resultados</span>,\n  loadingMoreContent = <span>Cargando...</span>,\n  className,\n  style,\n}: DataGridProps<T>) => {\n  const [rows, setRows] = useState<T[]>([]);\n  const [total, setTotal] = useState(0);\n  const [page, setPage] = useState(0);\n  const [currentPageSize, setCurrentPageSize] = useState(pageSize);\n  const [isLoading, setIsLoading] = useState(true);\n  const [sortState, setSortState] = useState<DataGridSortState | null>(null);\n  const [filters, setFilters] = useState<Record<string, string | string[]>>({});\n  const [openPopover, setOpenPopover] = useState<string | null>(null);\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const [pendingSearch, setPendingSearch] = useState('');\n  const [pendingMulti, setPendingMulti] = useState<string[]>([]);\n  const [multiSearch, setMultiSearch] = useState('');\n  const [colWidths, setColWidths] = useState<number[]>([]);\n  const [scrollbarWidth, setScrollbarWidth] = useState(0);\n\n  const filterRefs = useRef<Record<string, HTMLElement | null>>({});\n  const theadRef = useRef<HTMLTableSectionElement>(null);\n  const bodyContainerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    onFetch({ page, pageSize: currentPageSize, filters, sort: sortState ?? undefined }).then(result => {\n      if (cancelled) return;\n      setRows(prev => (paginationType === 'scroll' && page > 0 ? [...prev, ...result.data] : result.data));\n      setTotal(result.total);\n      setIsLoading(false);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [page, currentPageSize, filters, sortState, paginationType, onFetch]);\n\n  // Sync column widths between fixed header and scrollable body (scroll mode only)\n  useLayoutEffect(() => {\n    if (paginationType !== 'scroll' || !theadRef.current || !bodyContainerRef.current) return;\n    const ths = Array.from(\n      theadRef.current.querySelectorAll<HTMLTableCellElement>(`th:not(.${CLASS}-thScrollbarSpacer)`),\n    );\n    setColWidths(ths.map(th => th.offsetWidth));\n    setScrollbarWidth(bodyContainerRef.current.offsetWidth - bodyContainerRef.current.clientWidth);\n  }, [paginationType, columns.length, isLoading]);\n\n  useEffect(() => {\n    if (!openPopover) return;\n    const close = (e: MouseEvent) => {\n      if (!(e.target as HTMLElement).closest(`[data-popover-key=\"${openPopover}\"]`)) {\n        setOpenPopover(null);\n      }\n    };\n    document.addEventListener('mousedown', close);\n    return () => document.removeEventListener('mousedown', close);\n  }, [openPopover]);\n\n  const openFilter = (col: DataGridColumn<T>) => {\n    if (!col.filter) return;\n    if (openPopover === col.key) {\n      setOpenPopover(null);\n      setAnchorEl(null);\n      return;\n    }\n    const existing = filters[col.key];\n    if (col.filter.type === 'search') {\n      setPendingSearch(typeof existing === 'string' ? existing : '');\n    } else {\n      setPendingMulti(Array.isArray(existing) ? existing : []);\n      setMultiSearch('');\n    }\n    setAnchorEl(filterRefs.current[col.key] ?? null);\n    setOpenPopover(col.key);\n  };\n\n  const applyFilter = (col: DataGridColumn<T>) => {\n    if (!col.filter) return;\n    const newValue = col.filter.type === 'search' ? pendingSearch : pendingMulti;\n    setIsLoading(true);\n    setFilters(prev => ({ ...prev, [col.key]: newValue }));\n    setPage(0);\n    setOpenPopover(null);\n  };\n\n  const isFilterActive = (key: string): boolean => {\n    const val = filters[key];\n    if (val === undefined || val === null) return false;\n    return Array.isArray(val) ? val.length > 0 : val !== '';\n  };\n\n  const toggleSort = (key: string) => {\n    setIsLoading(true);\n    setSortState(prev =>\n      prev?.key === key ? { key, direction: prev.direction === 'asc' ? 'desc' : 'asc' } : { key, direction: 'asc' },\n    );\n    setPage(0);\n  };\n\n  const handlePageChange = (newPage: number) => {\n    setIsLoading(true);\n    setPage(newPage);\n  };\n\n  const handlePageSizeChange = (newSize: number) => {\n    setIsLoading(true);\n    setCurrentPageSize(newSize);\n    setPage(0);\n  };\n\n  const handleScroll = useCallback(\n    (e: React.UIEvent<HTMLDivElement>) => {\n      if (paginationType !== 'scroll' || isLoading || rows.length >= total) return;\n      const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;\n      if (scrollHeight - scrollTop - clientHeight < 48) {\n        setIsLoading(true);\n        setPage(p => p + 1);\n      }\n    },\n    [paginationType, isLoading, rows.length, total],\n  );\n\n  const totalColumns = columns.length;\n  const openCol = openPopover ? columns.find(c => c.key === openPopover) : undefined;\n  const bodyHeight = currentPageSize * 48;\n  const isEmpty = !isLoading && rows.length === 0;\n\n  // Header cells — shared between scroll and non-scroll modes\n  const headerCells = columns.map(col => (\n    <th\n      key={col.key}\n      className={[`${CLASS}-th`, col.type === 'options' ? `${CLASS}-thOptions` : ''].join(' ')}\n      style={col.width ? { width: col.width } : undefined}\n    >\n      <div className={`${CLASS}-thInner`} data-testid={`${CLASS}-th-${col.key}`}>\n        <span className={`${CLASS}-thLabel`}>{col.label}</span>\n        {col.type !== 'options' && (\n          <div className={`${CLASS}-thActions`}>\n            {col.filter && (\n              <div className={`${CLASS}-filterContainer`} data-popover-key={col.key}>\n                <span\n                  ref={el => {\n                    filterRefs.current[col.key] = el;\n                  }}\n                >\n                  <IconButton\n                    icon={\n                      <Icon\n                        name={isFilterActive(col.key) ? 'filter_alt' : 'filter_list'}\n                        size='sm'\n                        style={{ color: isFilterActive(col.key) ? 'white' : '' }}\n                      />\n                    }\n                    onClick={() => openFilter(col)}\n                    data-testid={`${CLASS}-filterBtn-${col.key}`}\n                    aria-label={`Filter ${col.label}`}\n                  />\n                </span>\n              </div>\n            )}\n            {col.sortable !== false && (\n              <IconButton\n                icon={\n                  <Icon\n                    name={\n                      sortState?.key === col.key\n                        ? sortState.direction === 'asc'\n                          ? 'arrow_upward'\n                          : 'arrow_downward'\n                        : 'unfold_more'\n                    }\n                    size='sm'\n                    style={{ color: sortState?.key === col.key ? 'white' : '' }}\n                  />\n                }\n                onClick={() => toggleSort(col.key)}\n                data-testid={`${CLASS}-sortBtn-${col.key}`}\n                aria-label={`Sort ${col.label}`}\n              />\n            )}\n          </div>\n        )}\n      </div>\n    </th>\n  ));\n\n  // In pagination mode show skeleton on every page load, in scroll mode only on initial load\n  const showSkeleton = isLoading && (paginationType !== 'scroll' || rows.length === 0);\n\n  // Body rows — shared between scroll and non-scroll modes\n  const bodyContent = showSkeleton ? (\n    <DataGridSkeleton columns={columns as DataGridColumn[]} pageSize={currentPageSize} />\n  ) : isEmpty ? (\n    <tr>\n      <td colSpan={totalColumns} className={`${CLASS}-emptyCell`} style={{ height: `${bodyHeight}px` }}>\n        {emptyContent}\n      </td>\n    </tr>\n  ) : (\n    <>\n      {rows.map((row, rowIndex) => (\n        <tr key={rowIndex} className={`${CLASS}-row`} data-testid={`${CLASS}-row-${rowIndex}`}>\n          {columns.map(col => {\n            const cellValue = (row as Record<string, unknown>)[col.key];\n            return (\n              <td\n                key={col.key}\n                className={[`${CLASS}-td`, col.type === 'options' ? `${CLASS}-tdOptions` : '']\n                  .filter(Boolean)\n                  .join(' ')}\n                data-testid={`${CLASS}-cell-${col.key}-${rowIndex}`}\n              >\n                {col.render ? col.render(cellValue, row) : String(cellValue ?? '')}\n              </td>\n            );\n          })}\n        </tr>\n      ))}\n      {paginationType === 'scroll' && isLoading && (\n        <tr>\n          <td colSpan={totalColumns} className={`${CLASS}-loadingMore`}>\n            {loadingMoreContent}\n          </td>\n        </tr>\n      )}\n    </>\n  );\n\n  return (\n    <div className={[CLASS, className || ''].join(' ')} css={emotion(style)} data-testid={CLASS}>\n      <div className={`${CLASS}-tableContainer`}>\n        {paginationType === 'scroll' ? (\n          <>\n            {/* Fixed header table — sits outside the scroll container */}\n            <table className={`${CLASS}-table`}>\n              <colgroup>\n                {columns.map(col => (\n                  <col key={col.key} style={col.width ? { width: col.width } : undefined} />\n                ))}\n                {/* Spacer column to compensate for the body's scrollbar width */}\n                <col style={{ width: scrollbarWidth || 0 }} />\n              </colgroup>\n              <thead ref={theadRef} className={`${CLASS}-thead`}>\n                <tr className={`${CLASS}-headerRow`}>\n                  {headerCells}\n                  <th aria-hidden='true' className={`${CLASS}-thScrollbarSpacer`} style={{ padding: 0 }} />\n                </tr>\n              </thead>\n            </table>\n\n            {/* Scrollable body — only this container scrolls vertically */}\n            <div\n              ref={bodyContainerRef}\n              className={`${CLASS}-bodyContainer`}\n              style={{ overflowY: 'auto', maxHeight: `${bodyHeight}px` }}\n              onScroll={handleScroll}\n            >\n              <table className={`${CLASS}-table`} style={{ tableLayout: 'fixed', width: '100%' }}>\n                <colgroup>\n                  {columns.map((col, i) => (\n                    <col\n                      key={col.key}\n                      style={{ width: colWidths[i] !== undefined ? colWidths[i] : (col.width ?? 'auto') }}\n                    />\n                  ))}\n                </colgroup>\n                <tbody className={`${CLASS}-tbody`}>{bodyContent}</tbody>\n              </table>\n            </div>\n          </>\n        ) : (\n          <table className={`${CLASS}-table`}>\n            <thead className={`${CLASS}-thead`}>\n              <tr className={`${CLASS}-headerRow`}>{headerCells}</tr>\n            </thead>\n            <tbody className={`${CLASS}-tbody`}>{bodyContent}</tbody>\n          </table>\n        )}\n      </div>\n      {paginationType === 'pagination' && (\n        <Pagination\n          page={page}\n          total={total}\n          pageSize={currentPageSize}\n          onPageChange={handlePageChange}\n          pageSizeOptions={pageSizeOptions}\n          onPageSizeChange={handlePageSizeChange}\n          loading={isLoading}\n        />\n      )}\n      {openCol?.filter && (\n        <DataGridMenu\n          filterType={openCol.filter.type}\n          options={openCol.filter.options}\n          columnKey={openCol.key}\n          filterTitle={openCol.filter.title}\n          searchLabel={openCol.filter.label}\n          cancelLabel={openCol.filter.cancelLabel}\n          applyLabel={openCol.filter.applyLabel}\n          pendingSearch={pendingSearch}\n          onSearchChange={setPendingSearch}\n          pendingMulti={pendingMulti}\n          onMultiChange={setPendingMulti}\n          multiSearch={multiSearch}\n          onMultiSearchChange={setMultiSearch}\n          onCancel={() => setOpenPopover(null)}\n          onApply={() => applyFilter(openCol)}\n          onClear={() => {\n            if (openCol.filter?.type === 'search') {\n              setPendingSearch('');\n            } else {\n              setPendingMulti([]);\n              setMultiSearch('');\n            }\n          }}\n          anchorEl={anchorEl}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default DataGrid;\n","import { useCreateComponentStyles } from '@hocs/ThemeProvider/useThemeProvider.hook';\nimport { Component } from '@hocs/ThemeProvider/interfaces';\nimport type { DataGridStyleProps } from './DataGrid.interface';\nimport DataGridBase from './DataGrid';\n\nconst DataGrid = <T extends object>({ theme, variant = 'default', ...rest }: DataGridStyleProps<T>) => {\n  const { componentStyles } = useCreateComponentStyles([Component.DATAGRID], theme, variant.toUpperCase());\n  return <DataGridBase<T> {...rest} style={componentStyles} />;\n};\n\nexport default DataGrid;\nexport type {\n  DataGridProps,\n  DataGridStyleProps,\n  DataGridColumn,\n  DataGridColumnType,\n  DataGridFilterType,\n  DataGridFilterOption,\n  DataGridFilter,\n  DataGridFetchParams,\n  DataGridFetchResult,\n  DataGridPaginationType,\n  DataGridSortState,\n} from './DataGrid.interface';\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/components/atoms/Skeleton/Skeleton.emotion.ts","../src/components/atoms/Skeleton/Skeleton.tsx","../src/components/organisms/DataGrid/DataGrid.emotion.ts","../src/components/organisms/DataGrid/DataGridMenu/DataGridMenu.emotion.ts","../src/components/organisms/DataGrid/DataGridMenu/components/DataGridMenuSearch.tsx","../src/components/organisms/DataGrid/DataGridMenu/components/DataGridMenuMultiSelect.tsx","../src/components/organisms/DataGrid/DataGridMenu/DataGridMenu.tsx","../src/components/organisms/DataGrid/DataGridMenu/index.tsx","../src/components/organisms/DataGrid/DataGridSkeleton/DataGridSkeleton.tsx","../src/components/atoms/Pagination/Pagination.emotion.ts","../src/components/atoms/Pagination/PaginationMenu/PaginationMenu.emotion.ts","../src/components/atoms/Pagination/PaginationMenu/PaginationMenu.tsx","../src/components/atoms/Pagination/PaginationMenu/index.tsx","../src/components/atoms/Pagination/Pagination.tsx","../src/components/atoms/Pagination/index.tsx","../src/components/organisms/DataGrid/DataGrid.tsx","../src/components/organisms/DataGrid/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\n\nconst shimmer = keyframes`\n  0% { background-position: 200% center; }\n  100% { background-position: -200% center; }\n`;\n\nconst Style = css`\n  &.--SKELETON {\n    display: block;\n    background: linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0.05) 0%,\n      rgba(255, 255, 255, 0.13) 50%,\n      rgba(255, 255, 255, 0.05) 100%\n    );\n    background-size: 200% 100%;\n    animation: ${shimmer} 1.4s ease infinite;\n\n    &.--SKELETON--circular {\n      border-radius: 50%;\n    }\n\n    &.--SKELETON--rectangular {\n      border-radius: 4px;\n    }\n  }\n`;\n\nexport default Style;\n","// Component Base\nimport Style from './Skeleton.emotion';\nimport type { SkeletonProps } from './Skeleton.interface';\n\n/**\n * A low-fidelity placeholder that mimics the shape of content while it loads.\n *\n * Use `variant=\"rectangular\"` for text lines, cards, or images and\n * `variant=\"circular\"` for avatars or icon placeholders. Set `width` and\n * `height` to match the real content's dimensions.\n */\nconst Skeleton = ({ variant = 'rectangular', width, height, className }: SkeletonProps) => (\n  <span\n    className={['--SKELETON', `--SKELETON--${variant}`, className || ''].filter(Boolean).join(' ')}\n    css={Style}\n    style={{ width, height }}\n    aria-hidden='true'\n  />\n);\n\nexport default Skeleton;\n","import { css } from '@emotion/react';\nimport { getStyle } from '@utilities/emotion/styles';\n\nconst Style = (theme: Record<string, string>) => css`\n  &.--DATAGRID {\n    width: 100%;\n    box-sizing: border-box;\n\n    ${getStyle(theme, 'background-color', '--DATAGRID-ROOT-BACKGROUND-COLOR')};\n    ${getStyle(theme, 'border-color', `--DATAGRID-ROOT-BORDER-COLOR`)};\n    ${getStyle(theme, 'border-width', `--DATAGRID-ROOT-BORDER-WIDTH`)};\n    ${getStyle(theme, 'border-radius', '--DATAGRID-ROOT-BORDER-RADIUS')};\n    ${getStyle(theme, 'border-style', `--DATAGRID-ROOT-BORDER-STYLE`)};\n\n    .--DATAGRID-tableContainer {\n      width: 100%;\n      overflow-x: auto;\n    }\n\n    .--DATAGRID-bodyContainer {\n      &::-webkit-scrollbar {\n        width: 12px;\n        height: 4px;\n      }\n\n      &::-webkit-scrollbar-thumb {\n        background-color: rgba(0, 0, 0, 0.5);\n        border-radius: 9999px;\n        border: 3px solid transparent;\n        background-clip: padding-box;\n      }\n    }\n\n    .--DATAGRID-table {\n      width: 100%;\n      border-collapse: collapse;\n\n      .--DATAGRID-thead {\n        .--DATAGRID-thScrollbarSpacer {\n          border: none;\n          background: transparent;\n        }\n\n        .--DATAGRID-headerRow {\n          height: 48px;\n\n          .--DATAGRID-th {\n            ${getStyle(theme, 'background-color', '--DATAGRID-ROOT-BACKGROUND-COLOR')};\n\n            padding: 8px 16px;\n            text-align: left;\n            white-space: nowrap;\n\n            ${getStyle(theme, 'border-bottom-color', `--DATAGRID-ROOT-BORDER-COLOR`)};\n            ${getStyle(theme, 'border-bottom-width', `--DATAGRID-ROOT-BORDER-WIDTH`)};\n            ${getStyle(theme, 'border-bottom-style', `--DATAGRID-ROOT-BORDER-STYLE`)};\n\n            &.--DATAGRID-thOptions {\n              width: 80px;\n              text-align: right;\n            }\n\n            .--DATAGRID-thInner {\n              display: flex;\n              align-items: center;\n              gap: 6px;\n\n              .--DATAGRID-thActions {\n                display: flex;\n                align-items: center;\n                gap: 8px;\n                margin-left: auto;\n              }\n\n              .--DATAGRID-filterActive {\n                ${getStyle(theme, 'color', '--DATAGRID-EVENTS-ENABLED-ICON-COLOR')};\n              }\n\n              .--DATAGRID-thLabel {\n                ${getStyle(theme, 'color', '--DATAGRID-EVENTS-ENABLED-COLOR-SECONDARY')};\n\n                font-family: ${theme['--FONTFAMILY-PRIMARY']};\n                font-size: 0.875rem;\n                font-weight: 500;\n                letter-spacing: 0.01em;\n                line-height: 1;\n                white-space: nowrap;\n              }\n\n              .--DATAGRID-filterContainer {\n                display: flex;\n                align-items: center;\n                gap: 4px;\n\n                .--DATAGRID-filterLabel {\n                  ${getStyle(theme, 'color', '--DATAGRID-EVENTS-ENABLED-COLOR-SECONDARY')};\n\n                  font-family: ${theme['--FONTFAMILY-PRIMARY']};\n                  font-size: 0.75rem;\n                  font-weight: 500;\n                  cursor: pointer;\n                }\n              }\n            }\n          }\n        }\n      }\n\n      .--DATAGRID-tbody {\n        .--DATAGRID-row {\n          height: 48px;\n          transition: background-color 150ms;\n\n          ${getStyle(theme, 'border-bottom-color', `--DATAGRID-ROOT-BORDER-COLOR`)};\n          ${getStyle(theme, 'border-bottom-width', `--DATAGRID-ROOT-BORDER-WIDTH`)};\n          ${getStyle(theme, 'border-bottom-style', `--DATAGRID-ROOT-BORDER-STYLE`)};\n\n          &:hover {\n            ${getStyle(theme, 'background-color', '--DATAGRID-EVENTS-HOVER-BACKGROUND-COLOR')};\n          }\n\n          &:last-child {\n            border-bottom: none;\n          }\n        }\n\n        .--DATAGRID-td {\n          ${getStyle(theme, 'color', '--DATAGRID-EVENTS-ENABLED-COLOR-PRIMARY')};\n\n          padding: 8px 16px;\n          vertical-align: middle;\n\n          font-family: ${theme['--FONTFAMILY-PRIMARY']};\n          font-size: 0.875rem;\n          font-weight: 500;\n          letter-spacing: 0.01em;\n          line-height: 1;\n        }\n\n        .--DATAGRID-emptyCell {\n          text-align: center;\n          vertical-align: middle;\n\n          ${getStyle(theme, 'color', '--DATAGRID-EVENTS-ENABLED-COLOR-SECONDARY')};\n\n          font-family: ${theme['--FONTFAMILY-PRIMARY']};\n          font-size: 0.875rem;\n          font-weight: 400;\n        }\n\n        .--DATAGRID-loadingMore {\n          text-align: center;\n          padding: 12px 16px;\n          height: 48px;\n          vertical-align: middle;\n\n          ${getStyle(theme, 'color', '--DATAGRID-EVENTS-ENABLED-COLOR-SECONDARY')};\n\n          font-family: ${theme['--FONTFAMILY-PRIMARY']};\n          font-size: 0.875rem;\n        }\n      }\n    }\n\n    .--DATAGRID-tdOptions {\n      text-align: right;\n      display: flex;\n      gap: 8px;\n      justify-content: flex-end;\n      align-items: center;\n      padding: 12px 16px !important;\n    }\n  }\n`;\n\nexport default Style;\n","import { css } from '@emotion/react';\nimport { getStyle } from '@utilities/emotion/styles';\n\nconst container = (theme: Record<string, string>, event: string): string => `\n    // BACKGROUNDS\n    ${getStyle(theme, 'background-color', `--DATAGRIDMENU-${event}-BACKGROUND-COLOR`)}\n        \n    // BORDERS\n    ${getStyle(theme, 'border-color', `--DATAGRIDMENU-${event}-BORDER-COLOR`)}\n    ${getStyle(theme, 'border-width', `--DATAGRIDMENU-${event}-BORDER-WIDTH`)}\n    ${getStyle(theme, 'border-style', `--DATAGRIDMENU-${event}-BORDER-STYLE`)}\n    ${getStyle(theme, 'border-radius', `--DATAGRIDMENU-${event}-BORDER-RADIUS`)}\n`;\n\nconst Style = (theme: Record<string, string>) => css`\n  &.--DATAGRIDMENU {\n    position: fixed;\n    z-index: 200;\n    padding: 16px;\n    width: calc(240px - 32px);\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    box-shadow:\n      rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,\n      rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,\n      rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;\n\n    ${container(theme, 'ROOT')}\n\n    .--DATAGRIDMENU-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n\n      .--DATAGRIDMENU-headerTitle {\n        ${getStyle(theme, 'color', '--DATAGRIDMENU-EVENTS-ENABLED-COLOR-PRIMARY')};\n        font-family: ${theme['--FONTFAMILY-PRIMARY']};\n        font-size: 0.875rem;\n        font-weight: 600;\n      }\n    }\n\n    .--DATAGRIDMENU-content {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    // ─── Options list ─────────────────────────────────────────────────────────\n\n    .--DATAGRIDMENU-optionsList {\n      max-height: 180px;\n      overflow-y: auto;\n      // padding + negative margin let the Checkbox ::before shadow render without being clipped\n      padding: 4px 8px;\n      margin: 0 -8px;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n\n      &::-webkit-scrollbar {\n        width: 12px;\n        height: 4px;\n      }\n      &::-webkit-scrollbar-thumb {\n        background-color: rgba(0, 0, 0, 0.5);\n        border-radius: 9999px;\n        border: 3px solid transparent;\n        background-clip: padding-box;\n      }\n    }\n\n    .--DATAGRIDMENU-optionRow {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .--DATAGRIDMENU-optionDot {\n      width: 6px;\n      height: 24px;\n      border-radius: 2px;\n      flex-shrink: 0;\n    }\n\n    .--DATAGRIDMENU-actions {\n      display: flex;\n      gap: 8px;\n      justify-content: flex-end;\n    }\n  }\n`;\n\nexport default Style;\n","import TextField from '@components/atoms/TextField';\nimport Icon from '@components/atoms/Icon';\n\nconst CLASS = '--DATAGRIDMENU';\n\ninterface DataGridMenuSearchProps {\n  columnKey: string;\n  pendingSearch: string;\n  onSearchChange: (val: string) => void;\n  searchLabel?: string;\n}\n\nconst DataGridMenuSearch = ({\n  columnKey,\n  pendingSearch,\n  onSearchChange,\n  searchLabel = 'Search',\n}: DataGridMenuSearchProps) => (\n  <div className={`${CLASS}-searchInput`}>\n    <TextField\n      name={`search-${columnKey}`}\n      label={searchLabel}\n      value={pendingSearch}\n      onValueChange={onSearchChange}\n      showErrorText={false}\n      width='full'\n      autoFocus\n      data-testid={`${CLASS}-searchInput-${columnKey}`}\n      startAdornment={<Icon name='search' style={{ color: 'white' }} />}\n    />\n\n  </div>\n);\n\nexport default DataGridMenuSearch;\n","import TextField from '@components/atoms/TextField';\nimport Checkbox from '@components/atoms/Checkbox';\nimport type { DataGridFilterOption } from '../../DataGrid.interface';\n\nconst CLASS = '--DATAGRIDMENU';\n\ninterface DataGridMenuMultiSelectProps {\n  filterType: 'multiselect' | 'multiselect-search';\n  columnKey: string;\n  options: DataGridFilterOption[];\n  pendingMulti: string[];\n  onMultiChange: (values: string[]) => void;\n  multiSearch: string;\n  onMultiSearchChange: (val: string) => void;\n}\n\nconst DataGridMenuMultiSelect = ({\n  filterType,\n  columnKey,\n  options,\n  pendingMulti,\n  onMultiChange,\n  multiSearch,\n  onMultiSearchChange,\n}: DataGridMenuMultiSelectProps) => {\n  const isMultiSearch = filterType === 'multiselect-search';\n  const filteredOpts = options.filter(\n    opt => !multiSearch || opt.label.toLowerCase().includes(multiSearch.toLowerCase()),\n  );\n\n  return (\n    <>\n      {isMultiSearch && (\n        <div className={`${CLASS}-searchInput`}>\n          <TextField\n            name={`multiSearch-${columnKey}`}\n            label='Search options'\n            value={multiSearch}\n            onValueChange={onMultiSearchChange}\n            showErrorText={false}\n            width='full'\n            autoFocus\n            data-testid={`${CLASS}-multiSearch-${columnKey}`}\n          />\n        </div>\n      )}\n      <div className={`${CLASS}-optionsList`} data-testid={`${CLASS}-optionsList-${columnKey}`}>\n        {filteredOpts.map(opt => (\n          <div key={opt.value} className={`${CLASS}-optionRow`}>\n            {opt.color && (\n              <span className={`${CLASS}-optionDot`} style={{ backgroundColor: opt.color }} aria-hidden='true' />\n            )}\n            <Checkbox\n              checked={pendingMulti.includes(opt.value)}\n              onChecked={checked =>\n                onMultiChange(checked ? [...pendingMulti, opt.value] : pendingMulti.filter(v => v !== opt.value))\n              }\n              label={opt.label}\n              showErrorText={false}\n              data-testid={`${CLASS}-option-${columnKey}-${opt.value}`}\n            />\n          </div>\n        ))}\n      </div>\n    </>\n  );\n};\n\nexport default DataGridMenuMultiSelect;\n","// Component Base\nimport { useLayoutEffect, useRef } from 'react';\nimport emotion from './DataGridMenu.emotion';\nimport type { DataGridMenuProps } from './DataGridMenu.interface';\n// External Libraries\nimport ReactDOM from 'react-dom';\n// Custom Components\nimport Button from '@components/atoms/Button';\nimport IconButton from '@components/atoms/IconButton';\nimport Icon from '@components/atoms/Icon';\nimport DataGridMenuSearch from './components/DataGridMenuSearch';\nimport DataGridMenuMultiSelect from './components/DataGridMenuMultiSelect';\n\nconst CLASS = '--DATAGRIDMENU';\n\n/**\n * A portal-rendered popover that provides filter controls for a DataGrid column.\n *\n * Positions itself below `anchorEl` using `useLayoutEffect` and repositions\n * on window scroll / resize. Renders one of three filter UIs based on `filterType`:\n * - `'search'` — a single text input.\n * - `'multiselect'` — a list of checkboxes.\n * - `'multiselect-search'` — a list of checkboxes with an inline search input.\n *\n * Apply/cancel actions are delegated to the parent via `onApply` and `onCancel`.\n */\nconst DataGridMenu = ({\n  filterType,\n  options,\n  columnKey,\n  filterTitle,\n  searchLabel,\n  cancelLabel = 'Cancel',\n  applyLabel = 'Apply',\n  pendingSearch,\n  onSearchChange,\n  pendingMulti,\n  onMultiChange,\n  multiSearch,\n  onMultiSearchChange,\n  onCancel,\n  onApply,\n  onClear,\n  anchorEl,\n  style,\n}: DataGridMenuProps) => {\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    if (!anchorEl) return;\n\n    const update = () => {\n      if (!menuRef.current) return;\n      const rect = anchorEl.getBoundingClientRect();\n      const menuWidth = menuRef.current.offsetWidth;\n      const centeredLeft = rect.left + rect.width / 2 - menuWidth / 2;\n      menuRef.current.style.top = `${rect.bottom + 8}px`;\n      menuRef.current.style.left = `${Math.max(8, Math.min(centeredLeft, window.innerWidth - menuWidth - 8))}px`;\n    };\n\n    update();\n    // capture: true catches scroll inside overflow containers (e.g. DataGrid's overflow-x: auto)\n    window.addEventListener('scroll', update, true);\n    window.addEventListener('resize', update);\n    return () => {\n      window.removeEventListener('scroll', update, true);\n      window.removeEventListener('resize', update);\n    };\n  }, [anchorEl]);\n\n  return ReactDOM.createPortal(\n    <div\n      ref={menuRef}\n      className={CLASS}\n      css={emotion(style)}\n      data-popover-key={columnKey}\n      data-testid={`${CLASS}-${columnKey}`}\n    >\n      <div className={`${CLASS}-header`}>\n        <span className={`${CLASS}-headerTitle`}>{filterTitle}</span>\n        <IconButton\n          icon={<Icon name='delete_outline' size='sm' />}\n          onClick={onClear}\n          aria-label='Clear filter'\n          data-testid={`${CLASS}-clearBtn-${columnKey}`}\n        />\n      </div>\n      <div className={`${CLASS}-content`}>\n        {filterType === 'search' && (\n          <DataGridMenuSearch\n            columnKey={columnKey}\n            pendingSearch={pendingSearch}\n            onSearchChange={onSearchChange}\n            searchLabel={searchLabel}\n          />\n        )}\n        {(filterType === 'multiselect' || filterType === 'multiselect-search') && (\n          <DataGridMenuMultiSelect\n            filterType={filterType}\n            columnKey={columnKey}\n            options={options ?? []}\n            pendingMulti={pendingMulti}\n            onMultiChange={onMultiChange}\n            multiSearch={multiSearch}\n            onMultiSearchChange={onMultiSearchChange}\n          />\n        )}\n      </div>\n      <div className={`${CLASS}-actions`}>\n        <Button onClick={onCancel} data-testid={`${CLASS}-cancelBtn-${columnKey}`} variant='ghost'>\n          {cancelLabel}\n        </Button>\n        <Button onClick={onApply} data-testid={`${CLASS}-applyBtn-${columnKey}`}>\n          {applyLabel}\n        </Button>\n      </div>\n    </div>,\n    document.body,\n  );\n};\n\nexport default DataGridMenu;\n","import { useCreateComponentStyles } from '@hocs/ThemeProvider/useThemeProvider.hook';\nimport { Component } from '@hocs/ThemeProvider/interfaces';\nimport type { DataGridMenuStyleProps } from './DataGridMenu.interface';\nimport DataGridMenuBase from './DataGridMenu';\n\nconst DataGridMenu = ({ theme, variant = 'default', ...rest }: DataGridMenuStyleProps) => {\n  const { componentStyles } = useCreateComponentStyles([Component.DATAGRIDMENU], theme, variant.toUpperCase());\n  return <DataGridMenuBase {...rest} style={componentStyles} />;\n};\n\nexport default DataGridMenu;\n","import { useMemo } from 'react';\nimport Skeleton from '@components/atoms/Skeleton';\nimport type { DataGridColumn } from '../DataGrid.interface';\n\ninterface DataGridSkeletonProps {\n  columns: DataGridColumn[];\n  pageSize: number;\n}\n\nconst CLASS = '--DATAGRID';\n\nconst DataGridSkeleton = ({ columns, pageSize }: DataGridSkeletonProps) => {\n  const widths = useMemo(\n    () =>\n      Array.from({ length: pageSize }, () =>\n        columns.map(col => (col.type === 'options' ? null : `${Math.floor(Math.random() * 51) + 40}%`)),\n      ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [pageSize, columns.length],\n  );\n\n  return (\n    <>\n      {Array.from({ length: pageSize }).map((_, i) => (\n        <tr key={i} className={`${CLASS}-row`}>\n          {columns.map((col, colIndex) => (\n            <td\n              key={col.key}\n              className={[`${CLASS}-td`, col.type === 'options' ? `${CLASS}-tdOptions` : ''].filter(Boolean).join(' ')}\n            >\n              {col.type === 'options' ? (\n                <Skeleton variant='circular' width={24} height={24} />\n              ) : (\n                <Skeleton height={16} width={widths[i][colIndex] ?? undefined} />\n              )}\n            </td>\n          ))}\n        </tr>\n      ))}\n    </>\n  );\n};\n\nexport default DataGridSkeleton;\n","import { css } from '@emotion/react';\nimport { getStyle } from '@utilities/emotion/styles';\n\nconst Style = (theme: Record<string, string>) => css`\n  &.--PAGINATION {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 16px;\n    padding: 8px 16px;\n\n    .--PAGINATION-rowsControl {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n\n      .--PAGINATION-rowsSize {\n        ${getStyle(theme, 'color', '--PAGINATION-EVENTS-ENABLED-COLOR-SECONDARY')};\n        font-family: ${theme['--FONTFAMILY-PRIMARY']};\n        font-size: 0.8125rem;\n        user-select: none;\n        min-width: 20px;\n        text-align: center;\n      }\n    }\n\n    .--PAGINATION-controls {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n\n      .--PAGINATION-info {\n        ${getStyle(theme, 'color', '--PAGINATION-EVENTS-ENABLED-COLOR-SECONDARY')};\n        font-family: ${theme['--FONTFAMILY-PRIMARY']};\n        font-size: 0.8125rem;\n        user-select: none;\n      }\n    }\n  }\n`;\n\nexport default Style;\n","import { css } from '@emotion/react';\nimport { getStyle } from '@utilities/emotion/styles';\n\nconst row = (theme: Record<string, string>, event: string): string => `\n    // BACKGROUNDS\n    ${getStyle(theme, 'background-color', `--PAGINATIONMENU-EVENTS-${event}-BACKGROUND-COLOR`)}\n    \n    // BORDERS\n    ${getStyle(theme, 'border-color', `--PAGINATIONMENU-EVENTS-${event}-BORDER-COLOR`)}\n    ${getStyle(theme, 'border-width', `--PAGINATIONMENU-EVENTS-${event}-BORDER-WIDTH`)}\n    ${getStyle(theme, 'border-style', `--PAGINATIONMENU-EVENTS-${event}-BORDER-STYLE`)}\n    ${getStyle(theme, 'border-radius', `--PAGINATIONMENU-EVENTS-${event}-BORDER-RADIUS`)}\n`;\n\nconst typography = (theme: Record<string, string>, event: string): string => `\n    // TYPOGRAPHY\n    ${getStyle(theme, 'color', `--PAGINATIONMENU-EVENTS-${event}-COLOR-PRIMARY`)};\n    ${getStyle(theme, 'caret-color', `--PAGINATIONMENU-EVENTS-${event}-COLOR-PRIMARY`)};\n`;\n\nconst container = (theme: Record<string, string>, event: string): string => `\n    // BACKGROUNDS\n    ${getStyle(theme, 'background-color', `--PAGINATIONMENU-${event}-BACKGROUND-COLOR`)}\n        \n    // BORDERS\n    ${getStyle(theme, 'border-color', `--PAGINATIONMENU-${event}-BORDER-COLOR`)}\n    ${getStyle(theme, 'border-width', `--PAGINATIONMENU-${event}-BORDER-WIDTH`)}\n    ${getStyle(theme, 'border-style', `--PAGINATIONMENU-${event}-BORDER-STYLE`)}\n    ${getStyle(theme, 'border-radius', `--PAGINATIONMENU-${event}-BORDER-RADIUS`)}\n`;\n\nconst Style = (theme: Record<string, string>) => css`\n  &.--PAGINATIONMENU {\n    position: absolute;\n    bottom: calc(100% + ${theme['--PAGINATIONMENU-ROOT-BOTTOM'] || ''});\n    left: 50%;\n    transform: translateX(-50%);\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    z-index: 10;\n    box-shadow:\n      rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,\n      rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,\n      rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;\n\n    ${container(theme, 'ROOT')}\n\n    .--PAGINATIONMENU-option {\n      all: unset;\n      cursor: pointer;\n      text-align: center;\n      padding: 6px 20px;\n      white-space: nowrap;\n      transition: background-color 120ms;\n      font-family: ${theme['--FONTFAMILY-PRIMARY']};\n      font-size: 0.8125rem;\n\n      // ENABLED\n      ${row(theme, 'ENABLED')}\n      ${typography(theme, 'ENABLED')}\n\n      // VALUE\n      &.--PAGINATIONMENU-selected {\n        ${row(theme, 'VALUE')}\n        ${typography(theme, 'VALUE')}\n      }\n\n      // HOVER\n      &:hover {\n        ${row(theme, 'HOVER')}\n        ${typography(theme, 'HOVER')}\n      }\n\n      // - ACTIVE\n      &:active,\n      &.--PAGINATIONMENU-active {\n        ${row(theme, 'ACTIVE')}\n        ${typography(theme, 'ACTIVE')}\n      }\n\n      // FOCUS\n      &:focus-visible {\n        outline-offset: 0px;\n        outline: 0;\n        ${row(theme, 'FOCUS')}\n        ${typography(theme, 'FOCUS')}\n      }\n    }\n  }\n`;\n\nexport default Style;\n","// Component Base\nimport emotion from './PaginationMenu.emotion';\nimport type { PaginationMenuProps } from './PaginationMenu.interface';\n\nconst CLASS = '--PAGINATIONMENU';\n\n/**\n * A floating dropdown that renders a list of page-size options.\n *\n * Rendered inside `<Pagination>` when `pageSizeOptions` is provided.\n * Keyboard focus is controlled externally via `focusedElement`.\n */\nconst PaginationMenu = ({ options, activeOption, onSelect, focusedElement = -1, style }: PaginationMenuProps) => (\n  <div className={CLASS} css={emotion(style)}>\n    {options.map((option, index) => {\n      const selectedClass = option === activeOption ? `${CLASS}-selected` : '';\n      const isActive = focusedElement === index;\n      return (\n        <button\n          key={option}\n          className={[`${CLASS}-option`, selectedClass, isActive ? `${CLASS}-active` : ''].filter(Boolean).join(' ')}\n          onClick={() => onSelect(option)}\n        >\n          {option}\n        </button>\n      );\n    })}\n  </div>\n);\n\nexport default PaginationMenu;\n","import { useCreateComponentStyles } from '@hocs/ThemeProvider/useThemeProvider.hook';\nimport { Component } from '@hocs/ThemeProvider/interfaces';\nimport type { PaginationMenuStyleProps } from './PaginationMenu.interface';\nimport PaginationMenuBase from './PaginationMenu';\n\nconst PaginationMenu = ({ theme, variant = 'default', ...rest }: PaginationMenuStyleProps) => {\n  const { componentStyles } = useCreateComponentStyles([Component.PAGINATIONMENU], theme, variant.toUpperCase());\n  return <PaginationMenuBase {...rest} style={componentStyles} />;\n};\n\nexport default PaginationMenu;\nexport type { PaginationMenuProps, PaginationMenuStyleProps } from './PaginationMenu.interface';\n","// Component Base\nimport React, { useState, useEffect } from 'react';\nimport Style from './Pagination.emotion';\nimport type { PaginationProps } from './Pagination.interface';\n// Custom Components\nimport IconButton from '@components/atoms/IconButton';\nimport Icon from '@components/atoms/Icon';\nimport PaginationMenu from './PaginationMenu';\n\nconst CLASS = '--PAGINATION';\n\n/**\n * A pagination control bar that lets users navigate between pages of data.\n *\n * Displays the current row range (`start–end of total`), first/prev/next/last\n * navigation buttons, and — when `pageSizeOptions` is provided — a rows-per-page\n * dropdown menu.\n *\n * All navigation buttons are disabled while `loading` is `true`.\n */\nconst Pagination = ({\n  page,\n  total,\n  pageSize,\n  onPageChange,\n  pageSizeOptions,\n  onPageSizeChange,\n  loading,\n  className,\n  style,\n}: PaginationProps) => {\n  const [rowsMenuOpen, setRowsMenuOpen] = useState(false);\n  const [focusedElement, setFocusedElement] = useState(-1);\n\n  const totalPages = Math.max(1, Math.ceil(total / pageSize));\n  const start = page * pageSize + 1;\n  const end = Math.min((page + 1) * pageSize, total);\n  const isFirst = page === 0;\n  const isLast = page >= totalPages - 1;\n\n  const closeMenu = () => {\n    setRowsMenuOpen(false);\n    setFocusedElement(-1);\n  };\n\n  useEffect(() => {\n    if (!rowsMenuOpen) return;\n    const close = (e: MouseEvent) => {\n      if (!(e.target as HTMLElement).closest(`.${CLASS}-rowsControl`)) {\n        setRowsMenuOpen(false);\n        setFocusedElement(-1);\n      }\n    };\n    document.addEventListener('mousedown', close);\n    return () => document.removeEventListener('mousedown', close);\n  }, [rowsMenuOpen]);\n\n  const onKeyDownRowsBtn = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === 'Tab' || e.key === 'Escape') {\n      setRowsMenuOpen(false);\n      setFocusedElement(-1);\n    } else if (['ArrowDown', 'ArrowUp'].includes(e.key) && rowsMenuOpen) {\n      e.preventDefault();\n      if (e.key === 'ArrowDown') setFocusedElement(prev => (prev + 1 >= (pageSizeOptions?.length ?? 0) ? 0 : prev + 1));\n      else setFocusedElement(prev => (prev - 1 < 0 ? (pageSizeOptions?.length ?? 1) - 1 : prev - 1));\n    } else if (e.key === 'Enter' && rowsMenuOpen && focusedElement >= 0 && pageSizeOptions) {\n      e.preventDefault();\n      const option = pageSizeOptions[focusedElement];\n      if (option !== undefined) {\n        onPageSizeChange?.(option);\n        setRowsMenuOpen(false);\n        setFocusedElement(-1);\n      }\n    }\n  };\n\n  return (\n    <div className={[CLASS, className || ''].filter(Boolean).join(' ')} css={Style(style ?? {})}>\n      {pageSizeOptions && pageSizeOptions.length > 0 && (\n        <div className={`${CLASS}-rowsControl`}>\n          {rowsMenuOpen && (\n            <PaginationMenu\n              options={pageSizeOptions}\n              activeOption={pageSize}\n              onSelect={option => {\n                onPageSizeChange?.(option);\n                closeMenu();\n              }}\n              focusedElement={focusedElement}\n            />\n          )}\n          <span className={`${CLASS}-rowsSize`}>{pageSize}</span>\n          <IconButton\n            icon={<Icon name='arrow_drop_up' size='sm' />}\n            onClick={() => (rowsMenuOpen ? closeMenu() : setRowsMenuOpen(true))}\n            onKeyDown={onKeyDownRowsBtn}\n            isFlipped={rowsMenuOpen}\n            aria-label='Rows per page'\n            data-testid={`${CLASS}-rowsBtn`}\n          />\n        </div>\n      )}\n      <div className={`${CLASS}-controls`}>\n        <span className={`${CLASS}-info`}>\n          {start}-{end} of {total}\n        </span>\n        <IconButton\n          icon={<Icon name='first_page' size='sm' />}\n          onClick={() => onPageChange(0)}\n          disabled={loading || isFirst}\n          aria-label='First page'\n          data-testid={`${CLASS}-first`}\n        />\n        <IconButton\n          icon={<Icon name='chevron_left' size='sm' />}\n          onClick={() => onPageChange(page - 1)}\n          disabled={loading || isFirst}\n          aria-label='Previous page'\n          data-testid={`${CLASS}-prev`}\n        />\n        <IconButton\n          icon={<Icon name='chevron_right' size='sm' />}\n          onClick={() => onPageChange(page + 1)}\n          disabled={loading || isLast}\n          aria-label='Next page'\n          data-testid={`${CLASS}-next`}\n        />\n        <IconButton\n          icon={<Icon name='last_page' size='sm' />}\n          onClick={() => onPageChange(totalPages - 1)}\n          disabled={loading || isLast}\n          aria-label='Last page'\n          data-testid={`${CLASS}-last`}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default Pagination;\n","import { useCreateComponentStyles } from '@hocs/ThemeProvider/useThemeProvider.hook';\nimport { Component } from '@hocs/ThemeProvider/interfaces';\nimport type { PaginationStyleProps } from './Pagination.interface';\nimport PaginationBase from './Pagination';\n\nconst Pagination = ({ theme, variant = 'default', ...rest }: PaginationStyleProps) => {\n  const { componentStyles } = useCreateComponentStyles([Component.PAGINATION], theme, variant.toUpperCase());\n  return <PaginationBase {...rest} style={componentStyles} />;\n};\n\nexport default Pagination;\nexport type { PaginationProps, PaginationStyleProps } from './Pagination.interface';\n","// Component Base\nimport React, { useState, useEffect, useRef, useCallback, useLayoutEffect } from 'react';\nimport emotion from './DataGrid.emotion';\nimport type { DataGridProps, DataGridColumn, DataGridSortState } from './DataGrid.interface';\n// Custom Components\nimport IconButton from '@components/atoms/IconButton';\nimport Icon from '@components/atoms/Icon';\nimport DataGridMenu from './DataGridMenu';\nimport DataGridSkeleton from './DataGridSkeleton';\nimport Pagination from '@components/atoms/Pagination';\n\nconst CLASS = '--DATAGRID';\nconst DEFAULT_PAGE_SIZE = 10;\n\n/**\n * A full-featured data table with server-side fetching, sorting, filtering, and pagination.\n *\n * Pass `columns` to define the table structure and `onFetch` to supply data.\n * `onFetch` is called automatically whenever the page, page size, active sort,\n * or any column filter changes.\n *\n * **Pagination modes** (controlled by `paginationType`):\n * - `'pagination'` — renders a `<Pagination>` bar below the table.\n * - `'scroll'` — appends rows as the user scrolls down (infinite scroll).\n *\n * **Column actions:**\n * - Sortable columns show a sort-direction toggle in the header.\n * - Columns with a `filter` config show a filter popover icon.\n * - Add a column with `type: 'options'` and a `render` prop for row-level action buttons.\n */\nconst DataGrid = <T extends object>({\n  columns,\n  onFetch,\n  paginationType = 'pagination',\n  pageSize = DEFAULT_PAGE_SIZE,\n  pageSizeOptions,\n  emptyContent = <span>No se han encontrado resultados</span>,\n  loadingMoreContent = <span>Cargando...</span>,\n  className,\n  style,\n}: DataGridProps<T>) => {\n  const [rows, setRows] = useState<T[]>([]);\n  const [total, setTotal] = useState(0);\n  const [page, setPage] = useState(0);\n  const [currentPageSize, setCurrentPageSize] = useState(pageSize);\n  const [isLoading, setIsLoading] = useState(true);\n  const [sortState, setSortState] = useState<DataGridSortState | null>(null);\n  const [filters, setFilters] = useState<Record<string, string | string[]>>({});\n  const [openPopover, setOpenPopover] = useState<string | null>(null);\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const [pendingSearch, setPendingSearch] = useState('');\n  const [pendingMulti, setPendingMulti] = useState<string[]>([]);\n  const [multiSearch, setMultiSearch] = useState('');\n  const [colWidths, setColWidths] = useState<number[]>([]);\n  const [scrollbarWidth, setScrollbarWidth] = useState(0);\n\n  const filterRefs = useRef<Record<string, HTMLElement | null>>({});\n  const theadRef = useRef<HTMLTableSectionElement>(null);\n  const bodyContainerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    onFetch({ page, pageSize: currentPageSize, filters, sort: sortState ?? undefined }).then(result => {\n      if (cancelled) return;\n      setRows(prev => (paginationType === 'scroll' && page > 0 ? [...prev, ...result.data] : result.data));\n      setTotal(result.total);\n      setIsLoading(false);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [page, currentPageSize, filters, sortState, paginationType, onFetch]);\n\n  // Sync column widths between fixed header and scrollable body (scroll mode only)\n  useLayoutEffect(() => {\n    if (paginationType !== 'scroll' || !theadRef.current || !bodyContainerRef.current) return;\n    const ths = Array.from(\n      theadRef.current.querySelectorAll<HTMLTableCellElement>(`th:not(.${CLASS}-thScrollbarSpacer)`),\n    );\n    setColWidths(ths.map(th => th.offsetWidth));\n    setScrollbarWidth(bodyContainerRef.current.offsetWidth - bodyContainerRef.current.clientWidth);\n  }, [paginationType, columns.length, isLoading]);\n\n  useEffect(() => {\n    if (!openPopover) return;\n    const close = (e: MouseEvent) => {\n      if (!(e.target as HTMLElement).closest(`[data-popover-key=\"${openPopover}\"]`)) {\n        setOpenPopover(null);\n      }\n    };\n    document.addEventListener('mousedown', close);\n    return () => document.removeEventListener('mousedown', close);\n  }, [openPopover]);\n\n  const openFilter = (col: DataGridColumn<T>) => {\n    if (!col.filter) return;\n    if (openPopover === col.key) {\n      setOpenPopover(null);\n      setAnchorEl(null);\n      return;\n    }\n    const existing = filters[col.key];\n    if (col.filter.type === 'search') {\n      setPendingSearch(typeof existing === 'string' ? existing : '');\n    } else {\n      setPendingMulti(Array.isArray(existing) ? existing : []);\n      setMultiSearch('');\n    }\n    setAnchorEl(filterRefs.current[col.key] ?? null);\n    setOpenPopover(col.key);\n  };\n\n  const applyFilter = (col: DataGridColumn<T>) => {\n    if (!col.filter) return;\n    const newValue = col.filter.type === 'search' ? pendingSearch : pendingMulti;\n    setIsLoading(true);\n    setFilters(prev => ({ ...prev, [col.key]: newValue }));\n    setPage(0);\n    setOpenPopover(null);\n  };\n\n  const isFilterActive = (key: string): boolean => {\n    const val = filters[key];\n    if (val === undefined || val === null) return false;\n    return Array.isArray(val) ? val.length > 0 : val !== '';\n  };\n\n  const toggleSort = (key: string) => {\n    setIsLoading(true);\n    setSortState(prev =>\n      prev?.key === key ? { key, direction: prev.direction === 'asc' ? 'desc' : 'asc' } : { key, direction: 'asc' },\n    );\n    setPage(0);\n  };\n\n  const handlePageChange = (newPage: number) => {\n    setIsLoading(true);\n    setPage(newPage);\n  };\n\n  const handlePageSizeChange = (newSize: number) => {\n    setIsLoading(true);\n    setCurrentPageSize(newSize);\n    setPage(0);\n  };\n\n  const handleScroll = useCallback(\n    (e: React.UIEvent<HTMLDivElement>) => {\n      if (paginationType !== 'scroll' || isLoading || rows.length >= total) return;\n      const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;\n      if (scrollHeight - scrollTop - clientHeight < 48) {\n        setIsLoading(true);\n        setPage(p => p + 1);\n      }\n    },\n    [paginationType, isLoading, rows.length, total],\n  );\n\n  const totalColumns = columns.length;\n  const openCol = openPopover ? columns.find(c => c.key === openPopover) : undefined;\n  const bodyHeight = currentPageSize * 48;\n  const isEmpty = !isLoading && rows.length === 0;\n\n  // Header cells — shared between scroll and non-scroll modes\n  const headerCells = columns.map(col => (\n    <th\n      key={col.key}\n      className={[`${CLASS}-th`, col.type === 'options' ? `${CLASS}-thOptions` : ''].join(' ')}\n      style={col.width ? { width: col.width } : undefined}\n    >\n      <div className={`${CLASS}-thInner`} data-testid={`${CLASS}-th-${col.key}`}>\n        <span className={`${CLASS}-thLabel`}>{col.label}</span>\n        {col.type !== 'options' && (\n          <div className={`${CLASS}-thActions`}>\n            {col.filter && (\n              <div className={`${CLASS}-filterContainer`} data-popover-key={col.key}>\n                <span\n                  ref={el => {\n                    filterRefs.current[col.key] = el;\n                  }}\n                >\n                  <IconButton\n                    icon={\n                      <Icon\n                        name={isFilterActive(col.key) ? 'filter_alt' : 'filter_list'}\n                        size='sm'\n                        style={{ color: isFilterActive(col.key) ? 'white' : '' }}\n                      />\n                    }\n                    onClick={() => openFilter(col)}\n                    data-testid={`${CLASS}-filterBtn-${col.key}`}\n                    aria-label={`Filter ${col.label}`}\n                  />\n                </span>\n              </div>\n            )}\n            {col.sortable !== false && (\n              <IconButton\n                icon={\n                  <Icon\n                    name={\n                      sortState?.key === col.key\n                        ? sortState.direction === 'asc'\n                          ? 'arrow_upward'\n                          : 'arrow_downward'\n                        : 'unfold_more'\n                    }\n                    size='sm'\n                    style={{ color: sortState?.key === col.key ? 'white' : '' }}\n                  />\n                }\n                onClick={() => toggleSort(col.key)}\n                data-testid={`${CLASS}-sortBtn-${col.key}`}\n                aria-label={`Sort ${col.label}`}\n              />\n            )}\n          </div>\n        )}\n      </div>\n    </th>\n  ));\n\n  // In pagination mode show skeleton on every page load, in scroll mode only on initial load\n  const showSkeleton = isLoading && (paginationType !== 'scroll' || rows.length === 0);\n\n  // Body rows — shared between scroll and non-scroll modes\n  const bodyContent = showSkeleton ? (\n    <DataGridSkeleton columns={columns as DataGridColumn[]} pageSize={currentPageSize} />\n  ) : isEmpty ? (\n    <tr>\n      <td colSpan={totalColumns} className={`${CLASS}-emptyCell`} style={{ height: `${bodyHeight}px` }}>\n        {emptyContent}\n      </td>\n    </tr>\n  ) : (\n    <>\n      {rows.map((row, rowIndex) => (\n        <tr key={rowIndex} className={`${CLASS}-row`} data-testid={`${CLASS}-row-${rowIndex}`}>\n          {columns.map(col => {\n            const cellValue = (row as Record<string, unknown>)[col.key];\n            return (\n              <td\n                key={col.key}\n                className={[`${CLASS}-td`, col.type === 'options' ? `${CLASS}-tdOptions` : '']\n                  .filter(Boolean)\n                  .join(' ')}\n                data-testid={`${CLASS}-cell-${col.key}-${rowIndex}`}\n              >\n                {col.render ? col.render(cellValue, row) : String(cellValue ?? '')}\n              </td>\n            );\n          })}\n        </tr>\n      ))}\n      {paginationType === 'scroll' && isLoading && (\n        <tr>\n          <td colSpan={totalColumns} className={`${CLASS}-loadingMore`}>\n            {loadingMoreContent}\n          </td>\n        </tr>\n      )}\n    </>\n  );\n\n  return (\n    <div className={[CLASS, className || ''].join(' ')} css={emotion(style)} data-testid={CLASS}>\n      <div className={`${CLASS}-tableContainer`}>\n        {paginationType === 'scroll' ? (\n          <>\n            {/* Fixed header table — sits outside the scroll container */}\n            <table className={`${CLASS}-table`}>\n              <colgroup>\n                {columns.map(col => (\n                  <col key={col.key} style={col.width ? { width: col.width } : undefined} />\n                ))}\n                {/* Spacer column to compensate for the body's scrollbar width */}\n                <col style={{ width: scrollbarWidth || 0 }} />\n              </colgroup>\n              <thead ref={theadRef} className={`${CLASS}-thead`}>\n                <tr className={`${CLASS}-headerRow`}>\n                  {headerCells}\n                  <th aria-hidden='true' className={`${CLASS}-thScrollbarSpacer`} style={{ padding: 0 }} />\n                </tr>\n              </thead>\n            </table>\n\n            {/* Scrollable body — only this container scrolls vertically */}\n            <div\n              ref={bodyContainerRef}\n              className={`${CLASS}-bodyContainer`}\n              style={{ overflowY: 'auto', maxHeight: `${bodyHeight}px` }}\n              onScroll={handleScroll}\n            >\n              <table className={`${CLASS}-table`} style={{ tableLayout: 'fixed', width: '100%' }}>\n                <colgroup>\n                  {columns.map((col, i) => (\n                    <col\n                      key={col.key}\n                      style={{ width: colWidths[i] !== undefined ? colWidths[i] : (col.width ?? 'auto') }}\n                    />\n                  ))}\n                </colgroup>\n                <tbody className={`${CLASS}-tbody`}>{bodyContent}</tbody>\n              </table>\n            </div>\n          </>\n        ) : (\n          <table className={`${CLASS}-table`}>\n            <thead className={`${CLASS}-thead`}>\n              <tr className={`${CLASS}-headerRow`}>{headerCells}</tr>\n            </thead>\n            <tbody className={`${CLASS}-tbody`}>{bodyContent}</tbody>\n          </table>\n        )}\n      </div>\n      {paginationType === 'pagination' && (\n        <Pagination\n          page={page}\n          total={total}\n          pageSize={currentPageSize}\n          onPageChange={handlePageChange}\n          pageSizeOptions={pageSizeOptions}\n          onPageSizeChange={handlePageSizeChange}\n          loading={isLoading}\n        />\n      )}\n      {openCol?.filter && (\n        <DataGridMenu\n          filterType={openCol.filter.type}\n          options={openCol.filter.options}\n          columnKey={openCol.key}\n          filterTitle={openCol.filter.title}\n          searchLabel={openCol.filter.label}\n          cancelLabel={openCol.filter.cancelLabel}\n          applyLabel={openCol.filter.applyLabel}\n          pendingSearch={pendingSearch}\n          onSearchChange={setPendingSearch}\n          pendingMulti={pendingMulti}\n          onMultiChange={setPendingMulti}\n          multiSearch={multiSearch}\n          onMultiSearchChange={setMultiSearch}\n          onCancel={() => setOpenPopover(null)}\n          onApply={() => applyFilter(openCol)}\n          onClear={() => {\n            if (openCol.filter?.type === 'search') {\n              setPendingSearch('');\n            } else {\n              setPendingMulti([]);\n              setMultiSearch('');\n            }\n          }}\n          anchorEl={anchorEl}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default DataGrid;\n","import { useCreateComponentStyles } from '@hocs/ThemeProvider/useThemeProvider.hook';\nimport { Component } from '@hocs/ThemeProvider/interfaces';\nimport type { DataGridStyleProps } from './DataGrid.interface';\nimport DataGridBase from './DataGrid';\n\nconst DataGrid = <T extends object>({ theme, variant = 'default', ...rest }: DataGridStyleProps<T>) => {\n  const { componentStyles } = useCreateComponentStyles([Component.DATAGRID], theme, variant.toUpperCase());\n  return <DataGridBase<T> {...rest} style={componentStyles} />;\n};\n\nexport default DataGrid;\nexport type {\n  DataGridProps,\n  DataGridStyleProps,\n  DataGridColumn,\n  DataGridColumnType,\n  DataGridFilterType,\n  DataGridFilterOption,\n  DataGridFilter,\n  DataGridFetchParams,\n  DataGridFetchResult,\n  DataGridPaginationType,\n  DataGridSortState,\n} from './DataGrid.interface';\n"],"mappings":"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"}

package/dist/molecules.mjs

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "./RadioGroup-DCJBoZc-.js";
+import { n as e, r as t, t as n } from "./RadioGroup-BdWsLUz-.js";
 export { t as CheckboxGroup, e as CheckboxTree, n as RadioGroup };

package/dist/theme/dark/components/Input.d.ts

@@ -1,5 +1,5 @@
 declare const component: {
-    readonly INPUT: {
+    readonly TEXTFIELD: {
         readonly DEFAULT: {
             readonly ROOT: {
                 readonly 'border-radius': "4px";

package/dist/theme/dark/components/NumberField.d.ts

@@ -0,0 +1,60 @@
+declare const component: {
+    readonly NUMBERFIELD: {
+        readonly DEFAULT: {
+            readonly ROOT: {
+                readonly 'border-radius': "4px";
+            };
+            readonly EVENTS: {
+                readonly ENABLED: {
+                    readonly 'background-color': "transparent";
+                    readonly 'color-primary': string;
+                    readonly 'color-secondary': string;
+                    readonly 'color-tertiary': string;
+                    readonly 'border-color': string;
+                    readonly 'border-width': "2px";
+                    readonly 'border-style': "solid";
+                };
+                readonly VALUE: {
+                    readonly 'border-color': string;
+                };
+                readonly HOVER: {
+                    readonly 'border-color': string;
+                };
+                readonly ACTIVE: {
+                    readonly 'border-color': string;
+                };
+                readonly FOCUS: {
+                    readonly 'border-color': string;
+                };
+                readonly ERROR: {
+                    readonly 'background-color': "transparent";
+                    readonly 'color-primary': string;
+                    readonly 'color-secondary': string;
+                    readonly 'color-tertiary': string;
+                    readonly 'border-color': string;
+                };
+                readonly ERROR_VALUE: {
+                    readonly 'border-color': string;
+                };
+                readonly ERROR_HOVER: {
+                    readonly 'border-color': string;
+                };
+                readonly ERROR_ACTIVE: {
+                    readonly 'border-color': string;
+                };
+                readonly ERROR_FOCUS: {
+                    readonly 'border-color': string;
+                };
+                readonly DISABLED: {
+                    readonly 'background-color': "transparent";
+                    readonly 'color-primary': string;
+                    readonly 'color-secondary': string;
+                    readonly 'color-tertiary': string;
+                    readonly 'border-color': string;
+                };
+                readonly DISABLED_VALUE: {};
+            };
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/index.d.ts

@@ -700,7 +700,64 @@ declare const _default: {
             };
         };
     };
-    INPUT: {
+    NUMBERFIELD: {
+        readonly DEFAULT: {
+            readonly ROOT: {
+                readonly 'border-radius': "4px";
+            };
+            readonly EVENTS: {
+                readonly ENABLED: {
+                    readonly 'background-color': "transparent";
+                    readonly 'color-primary': string;
+                    readonly 'color-secondary': string;
+                    readonly 'color-tertiary': string;
+                    readonly 'border-color': string;
+                    readonly 'border-width': "2px";
+                    readonly 'border-style': "solid";
+                };
+                readonly VALUE: {
+                    readonly 'border-color': string;
+                };
+                readonly HOVER: {
+                    readonly 'border-color': string;
+                };
+                readonly ACTIVE: {
+                    readonly 'border-color': string;
+                };
+                readonly FOCUS: {
+                    readonly 'border-color': string;
+                };
+                readonly ERROR: {
+                    readonly 'background-color': "transparent";
+                    readonly 'color-primary': string;
+                    readonly 'color-secondary': string;
+                    readonly 'color-tertiary': string;
+                    readonly 'border-color': string;
+                };
+                readonly ERROR_VALUE: {
+                    readonly 'border-color': string;
+                };
+                readonly ERROR_HOVER: {
+                    readonly 'border-color': string;
+                };
+                readonly ERROR_ACTIVE: {
+                    readonly 'border-color': string;
+                };
+                readonly ERROR_FOCUS: {
+                    readonly 'border-color': string;
+                };
+                readonly DISABLED: {
+                    readonly 'background-color': "transparent";
+                    readonly 'color-primary': string;
+                    readonly 'color-secondary': string;
+                    readonly 'color-tertiary': string;
+                    readonly 'border-color': string;
+                };
+                readonly DISABLED_VALUE: {};
+            };
+        };
+    };
+    TEXTFIELD: {
         readonly DEFAULT: {
             readonly ROOT: {
                 readonly 'border-radius': "4px";

package/dist/theme/dark/index.d.ts

@@ -702,7 +702,64 @@ export declare const darkTheme: {
                 };
             };
         };
-        INPUT: {
+        NUMBERFIELD: {
+            readonly DEFAULT: {
+                readonly ROOT: {
+                    readonly 'border-radius': "4px";
+                };
+                readonly EVENTS: {
+                    readonly ENABLED: {
+                        readonly 'background-color': "transparent";
+                        readonly 'color-primary': string;
+                        readonly 'color-secondary': string;
+                        readonly 'color-tertiary': string;
+                        readonly 'border-color': string;
+                        readonly 'border-width': "2px";
+                        readonly 'border-style': "solid";
+                    };
+                    readonly VALUE: {
+                        readonly 'border-color': string;
+                    };
+                    readonly HOVER: {
+                        readonly 'border-color': string;
+                    };
+                    readonly ACTIVE: {
+                        readonly 'border-color': string;
+                    };
+                    readonly FOCUS: {
+                        readonly 'border-color': string;
+                    };
+                    readonly ERROR: {
+                        readonly 'background-color': "transparent";
+                        readonly 'color-primary': string;
+                        readonly 'color-secondary': string;
+                        readonly 'color-tertiary': string;
+                        readonly 'border-color': string;
+                    };
+                    readonly ERROR_VALUE: {
+                        readonly 'border-color': string;
+                    };
+                    readonly ERROR_HOVER: {
+                        readonly 'border-color': string;
+                    };
+                    readonly ERROR_ACTIVE: {
+                        readonly 'border-color': string;
+                    };
+                    readonly ERROR_FOCUS: {
+                        readonly 'border-color': string;
+                    };
+                    readonly DISABLED: {
+                        readonly 'background-color': "transparent";
+                        readonly 'color-primary': string;
+                        readonly 'color-secondary': string;
+                        readonly 'color-tertiary': string;
+                        readonly 'border-color': string;
+                    };
+                    readonly DISABLED_VALUE: {};
+                };
+            };
+        };
+        TEXTFIELD: {
             readonly DEFAULT: {
                 readonly ROOT: {
                     readonly 'border-radius': "4px";

package/dist/theme/index.d.ts

@@ -703,7 +703,64 @@ export declare const themeProvider: readonly [{
                 };
             };
         };
-        INPUT: {
+        NUMBERFIELD: {
+            readonly DEFAULT: {
+                readonly ROOT: {
+                    readonly 'border-radius': "4px";
+                };
+                readonly EVENTS: {
+                    readonly ENABLED: {
+                        readonly 'background-color': "transparent";
+                        readonly 'color-primary': string;
+                        readonly 'color-secondary': string;
+                        readonly 'color-tertiary': string;
+                        readonly 'border-color': string;
+                        readonly 'border-width': "2px";
+                        readonly 'border-style': "solid";
+                    };
+                    readonly VALUE: {
+                        readonly 'border-color': string;
+                    };
+                    readonly HOVER: {
+                        readonly 'border-color': string;
+                    };
+                    readonly ACTIVE: {
+                        readonly 'border-color': string;
+                    };
+                    readonly FOCUS: {
+                        readonly 'border-color': string;
+                    };
+                    readonly ERROR: {
+                        readonly 'background-color': "transparent";
+                        readonly 'color-primary': string;
+                        readonly 'color-secondary': string;
+                        readonly 'color-tertiary': string;
+                        readonly 'border-color': string;
+                    };
+                    readonly ERROR_VALUE: {
+                        readonly 'border-color': string;
+                    };
+                    readonly ERROR_HOVER: {
+                        readonly 'border-color': string;
+                    };
+                    readonly ERROR_ACTIVE: {
+                        readonly 'border-color': string;
+                    };
+                    readonly ERROR_FOCUS: {
+                        readonly 'border-color': string;
+                    };
+                    readonly DISABLED: {
+                        readonly 'background-color': "transparent";
+                        readonly 'color-primary': string;
+                        readonly 'color-secondary': string;
+                        readonly 'color-tertiary': string;
+                        readonly 'border-color': string;
+                    };
+                    readonly DISABLED_VALUE: {};
+                };
+            };
+        };
+        TEXTFIELD: {
             readonly DEFAULT: {
                 readonly ROOT: {
                     readonly 'border-radius': "4px";