@lobehub/ui 6.0.0-beta.8 → 6.0.0

package/es/Table/Table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","names":["tableMessages","clsx"],"sources":["../../src/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { Inbox } from 'lucide-react';\nimport {\n  type CSSProperties,\n  isValidElement,\n  memo,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport Empty from '@/Empty';\nimport tableMessages from '@/i18n/resources/en/table';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Spin from '@/Spin';\n\nimport Column from './Column';\nimport ColumnGroup from './ColumnGroup';\nimport { PREFIX_CLS } from './constants';\nimport { getStickyOffsets } from './engine/fixed';\nimport type { TableInternalProps } from './internal';\nimport { EXPAND_COLUMN } from './pipeline/columnUtils';\nimport {\n  SELECTION_ALL,\n  SELECTION_COLUMN,\n  SELECTION_INVERT,\n  SELECTION_NONE,\n} from './pipeline/selectionUtils';\nimport { HeaderContext, SelectionContext, TableViewContext } from './render/context';\nimport FixedFrost from './render/FixedFrost';\nimport TableLoadingSkeleton from './render/LoadingSkeleton';\nimport { renderPaginationBars } from './render/PaginationBar';\nimport { TableSummary } from './render/Summary';\nimport { resolveSticky, toTableRef } from './render/tableHelpers';\nimport TableView from './render/TableView';\nimport { useViewContexts } from './render/useViewContexts';\nimport { useStableSemantic } from './semantic';\nimport { TableStoreProvider } from './store/hooks';\nimport { styles } from './style';\nimport type { TableProps, TableRef } from './type';\nimport { useTableController } from './useTableController';\n\nconst TableInner = <T,>(props: TableInternalProps<T>) => {\n  const {\n    className,\n    classNames,\n    footer,\n    internalRef,\n    loading = false,\n    onScroll,\n    pagination,\n    ref,\n    rootClassName,\n    rowHoverable = true,\n    rowSelection,\n    scroll,\n    showHeader = true,\n    size = 'middle',\n    sticky,\n    style,\n    styles: customStyles,\n    tableLayout,\n    title,\n    variant = 'borderless',\n    virtual,\n  } = props;\n\n  const controller = useTableController(props);\n  const { model, rows, state } = controller;\n  const { t } = useTranslation(tableMessages);\n  const { classNames: semanticClassNames, styles: semanticStyles } = useStableSemantic(\n    classNames,\n    customStyles,\n    props,\n  );\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { measureRef } = controller;\n  const setRootRef = useCallback(\n    (element: HTMLDivElement | null) => {\n      rootRef.current = element;\n      return measureRef(element);\n    },\n    [measureRef],\n  );\n  useImperativeHandle(\n    ref as Ref<TableRef>,\n    () => toTableRef(rootRef.current!, controller.scrollTo),\n    [controller.scrollTo],\n  );\n  useImperativeHandle(\n    internalRef,\n    () => ({ clearSelection: controller.selection.actions.clear, store: controller.store }),\n    [controller.selection.actions.clear, controller.store],\n  );\n\n  const { headerValue, selectionValue, viewValue } = useViewContexts<T>({\n    controller,\n    props,\n    semanticClassNames,\n    semanticStyles,\n  });\n  const leafColumns = model.leafColumns;\n\n  const {\n    spinning: isLoading = true,\n    tip,\n    variant: spinVariant = 'network',\n    ...spinRest\n  } = typeof loading === 'object' ? loading : { spinning: loading };\n\n  const customEmpty = props.locale?.emptyText;\n  const emptyNode = isLoading ? (\n    <TableLoadingSkeleton\n      columns={controller.columns}\n      expandColumn={Boolean(controller.expandType)}\n      rows={pagination === false ? 5 : Math.min(5, state.page.pageSize)}\n      screens={controller.screens}\n      selectionColumn={Boolean(rowSelection)}\n      size={size}\n    />\n  ) : customEmpty === undefined ? (\n    <Empty description={t('table.emptyText')} icon={Inbox} imageSize={40} />\n  ) : typeof customEmpty === 'function' ? (\n    customEmpty()\n  ) : (\n    customEmpty\n  );\n\n  const stickyConfig = resolveSticky(sticky);\n  const { summaryNode } = controller;\n  const summaryFixed =\n    isValidElement<{ fixed?: boolean | 'top' | 'bottom' }>(summaryNode) &&\n    summaryNode.type === TableSummary\n      ? summaryNode.props.fixed\n      : undefined;\n  const fixFooter =\n    controller.fixHeader || stickyConfig.isSticky || virtual\n      ? virtual && summaryNode\n        ? (summaryFixed ?? 'bottom')\n        : (summaryFixed ?? false)\n      : false;\n\n  const hasFixedColumn = leafColumns.some((leaf) => leaf.fixed);\n  const mergedTableLayout =\n    tableLayout ??\n    (hasFixedColumn\n      ? scroll?.x === 'max-content'\n        ? 'auto'\n        : 'fixed'\n      : controller.fixHeader ||\n          stickyConfig.isSticky ||\n          leafColumns.some((leaf) => (leaf.column.source.column as { ellipsis?: unknown }).ellipsis)\n        ? 'fixed'\n        : 'auto');\n\n  const offsets = useMemo(\n    () => getStickyOffsets(controller.columnWidths, leafColumns),\n    [controller.columnWidths, leafColumns],\n  );\n\n  const pager = state.config\n    ? renderPaginationBars({\n        classNames: semanticClassNames.pagination,\n        config: state.config,\n        onChange: state.onPaginationChange,\n        page: state.page,\n        size: props.size,\n        styles: semanticStyles.pagination,\n        total: state.total,\n      })\n    : { bottom: null, top: null };\n\n  const rootStyle: CSSProperties = { ...semanticStyles.root, ...style };\n\n  return (\n    <TableStoreProvider value={controller.store}>\n      <TableViewContext value={viewValue}>\n        <SelectionContext value={selectionValue}>\n          <HeaderContext value={headerValue}>\n            <div\n              ref={setRootRef}\n              style={rootStyle}\n              className={clsx(\n                stylex.props(styles.root).className,\n                `${PREFIX_CLS}-wrapper`,\n                rootClassName,\n                className,\n                semanticClassNames.root,\n              )}\n            >\n              {pager.top}\n              <div className={stylex.props(styles.spinContainer).className} data-table-wrapper=\"\">\n                <TableView<T>\n                  bodyRef={controller.bodyRef}\n                  colWidths={controller.columnWidths}\n                  emptyNode={emptyNode}\n                  fixFooter={fixFooter}\n                  fixHeader={controller.fixHeader}\n                  footer={footer ? footer(rows) : undefined}\n                  grouped={controller.grouped}\n                  headerRows={model.headerRows}\n                  hoverable={rowHoverable}\n                  offsets={offsets}\n                  rows={model.rows}\n                  scrollX={scroll?.x}\n                  scrollY={scroll?.y}\n                  showHeader={showHeader}\n                  size={size}\n                  sticky={stickyConfig}\n                  summaryNode={summaryNode}\n                  tableLayout={mergedTableLayout}\n                  title={title ? title(rows) : undefined}\n                  variant={variant}\n                  virtual={controller.virtualInput}\n                  virtualScrollRef={controller.virtualScrollRef}\n                  onColumnResize={controller.onColumnResize}\n                  onScroll={onScroll}\n                />\n                {isLoading && (\n                  <div {...stylex.props(styles.loading)} data-table-loading=\"\">\n                    <Spin {...spinRest} variant={spinVariant} />\n                    {tip as ReactNode}\n                  </div>\n                )}\n                <FixedFrost rootRef={rootRef} />\n              </div>\n              {pager.bottom}\n            </div>\n          </HeaderContext>\n        </SelectionContext>\n      </TableViewContext>\n    </TableStoreProvider>\n  );\n};\n\ntype TableComponent = (<T>(props: TableProps<T>) => ReactNode) & {\n  Column: typeof Column;\n  ColumnGroup: typeof ColumnGroup;\n  displayName?: string;\n  EXPAND_COLUMN: typeof EXPAND_COLUMN;\n  SELECTION_ALL: typeof SELECTION_ALL;\n  SELECTION_COLUMN: typeof SELECTION_COLUMN;\n  SELECTION_INVERT: typeof SELECTION_INVERT;\n  SELECTION_NONE: typeof SELECTION_NONE;\n  Summary: typeof TableSummary;\n};\n\nconst Table = memo(TableInner) as unknown as TableComponent;\n\nTable.displayName = 'Table';\nTable.Column = Column;\nTable.ColumnGroup = ColumnGroup;\nTable.EXPAND_COLUMN = EXPAND_COLUMN;\nTable.SELECTION_COLUMN = SELECTION_COLUMN;\nTable.SELECTION_ALL = SELECTION_ALL;\nTable.SELECTION_INVERT = SELECTION_INVERT;\nTable.SELECTION_NONE = SELECTION_NONE;\nTable.Summary = TableSummary;\n\nexport { TableInner };\n\nexport default Table;\n"],"mappings":"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"}
+{"version":3,"file":"Table.mjs","names":["tableMessages","clsx"],"sources":["../../src/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { Inbox } from 'lucide-react';\nimport {\n  type CSSProperties,\n  isValidElement,\n  memo,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport Block from '@/Block';\nimport Empty from '@/Empty';\nimport tableMessages from '@/i18n/resources/en/table';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Spin from '@/Spin';\n\nimport Column from './Column';\nimport ColumnGroup from './ColumnGroup';\nimport { PREFIX_CLS } from './constants';\nimport { getStickyOffsets } from './engine/fixed';\nimport type { TableInternalProps } from './internal';\nimport { EXPAND_COLUMN } from './pipeline/columnUtils';\nimport {\n  SELECTION_ALL,\n  SELECTION_COLUMN,\n  SELECTION_INVERT,\n  SELECTION_NONE,\n} from './pipeline/selectionUtils';\nimport { HeaderContext, SelectionContext, TableViewContext } from './render/context';\nimport FixedFrost from './render/FixedFrost';\nimport TableLoadingSkeleton from './render/LoadingSkeleton';\nimport { renderPaginationBars } from './render/PaginationBar';\nimport { TableSummary } from './render/Summary';\nimport { resolveSticky, toTableRef } from './render/tableHelpers';\nimport TableView from './render/TableView';\nimport { useViewContexts } from './render/useViewContexts';\nimport { useStableSemantic } from './semantic';\nimport { TableStoreProvider } from './store/hooks';\nimport { styles } from './style';\nimport type { TableProps, TableRef } from './type';\nimport { useTableController } from './useTableController';\n\nconst TableInner = <T,>(props: TableInternalProps<T>) => {\n  const {\n    className,\n    classNames,\n    footer,\n    internalRef,\n    loading = false,\n    onScroll,\n    pagination,\n    ref,\n    rootClassName,\n    rowHoverable = true,\n    rowSelection,\n    scroll,\n    showHeader = true,\n    size = 'middle',\n    sticky,\n    style,\n    styles: customStyles,\n    tableLayout,\n    title,\n    variant = 'borderless',\n    virtual,\n  } = props;\n\n  const controller = useTableController(props);\n  const { model, rows, state } = controller;\n  const { t } = useTranslation(tableMessages);\n  const { classNames: semanticClassNames, styles: semanticStyles } = useStableSemantic(\n    classNames,\n    customStyles,\n    props,\n  );\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { measureRef } = controller;\n  const setRootRef = useCallback(\n    (element: HTMLDivElement | null) => {\n      rootRef.current = element;\n      return measureRef(element);\n    },\n    [measureRef],\n  );\n  useImperativeHandle(\n    ref as Ref<TableRef>,\n    () => toTableRef(rootRef.current!, controller.scrollTo),\n    [controller.scrollTo],\n  );\n  useImperativeHandle(\n    internalRef,\n    () => ({ clearSelection: controller.selection.actions.clear, store: controller.store }),\n    [controller.selection.actions.clear, controller.store],\n  );\n\n  const { headerValue, selectionValue, viewValue } = useViewContexts<T>({\n    controller,\n    props,\n    semanticClassNames,\n    semanticStyles,\n  });\n  const leafColumns = model.leafColumns;\n\n  const {\n    spinning: isLoading = true,\n    tip,\n    variant: spinVariant = 'network',\n    ...spinRest\n  } = typeof loading === 'object' ? loading : { spinning: loading };\n\n  const customEmpty = props.locale?.emptyText;\n  const emptyNode = isLoading ? (\n    <TableLoadingSkeleton\n      columns={controller.columns}\n      expandColumn={Boolean(controller.expandType)}\n      rows={pagination === false ? 5 : Math.min(5, state.page.pageSize)}\n      screens={controller.screens}\n      selectionColumn={Boolean(rowSelection)}\n      size={size}\n    />\n  ) : customEmpty === undefined ? (\n    <Empty description={t('table.emptyText')} icon={Inbox} imageSize={40} />\n  ) : typeof customEmpty === 'function' ? (\n    customEmpty()\n  ) : (\n    customEmpty\n  );\n\n  const stickyConfig = resolveSticky(sticky);\n  const { summaryNode } = controller;\n  const summaryFixed =\n    isValidElement<{ fixed?: boolean | 'top' | 'bottom' }>(summaryNode) &&\n    summaryNode.type === TableSummary\n      ? summaryNode.props.fixed\n      : undefined;\n  const fixFooter =\n    controller.fixHeader || stickyConfig.isSticky || virtual\n      ? virtual && summaryNode\n        ? (summaryFixed ?? 'bottom')\n        : (summaryFixed ?? false)\n      : false;\n\n  const hasFixedColumn = leafColumns.some((leaf) => leaf.fixed);\n  const mergedTableLayout =\n    tableLayout ??\n    (hasFixedColumn\n      ? scroll?.x === 'max-content'\n        ? 'auto'\n        : 'fixed'\n      : controller.fixHeader ||\n          stickyConfig.isSticky ||\n          leafColumns.some((leaf) => (leaf.column.source.column as { ellipsis?: unknown }).ellipsis)\n        ? 'fixed'\n        : 'auto');\n\n  const offsets = useMemo(\n    () => getStickyOffsets(controller.columnWidths, leafColumns),\n    [controller.columnWidths, leafColumns],\n  );\n\n  const pager = state.config\n    ? renderPaginationBars({\n        classNames: semanticClassNames.pagination,\n        config: state.config,\n        onChange: state.onPaginationChange,\n        page: state.page,\n        size: props.size,\n        styles: semanticStyles.pagination,\n        total: state.total,\n      })\n    : { bottom: null, top: null };\n\n  // The loading mask is a sibling of the table, so it needs the column count here to stack\n  // above fixed cells (z-index up to 2 × columns).\n  const rootStyle = {\n    '--columns-count': leafColumns.length,\n    ...semanticStyles.root,\n    ...style,\n  } as CSSProperties;\n\n  return (\n    <TableStoreProvider value={controller.store}>\n      <TableViewContext value={viewValue}>\n        <SelectionContext value={selectionValue}>\n          <HeaderContext value={headerValue}>\n            <div\n              ref={setRootRef}\n              style={rootStyle}\n              className={clsx(\n                stylex.props(styles.root).className,\n                `${PREFIX_CLS}-wrapper`,\n                rootClassName,\n                className,\n                semanticClassNames.root,\n              )}\n            >\n              {pager.top}\n              <div className={stylex.props(styles.spinContainer).className} data-table-wrapper=\"\">\n                <TableView<T>\n                  bodyRef={controller.bodyRef}\n                  colWidths={controller.columnWidths}\n                  emptyNode={emptyNode}\n                  fixFooter={fixFooter}\n                  fixHeader={controller.fixHeader}\n                  footer={footer ? footer(rows) : undefined}\n                  grouped={controller.grouped}\n                  headerRows={model.headerRows}\n                  hoverable={rowHoverable}\n                  offsets={offsets}\n                  rows={model.rows}\n                  scrollX={scroll?.x}\n                  scrollY={scroll?.y}\n                  showHeader={showHeader}\n                  size={size}\n                  sticky={stickyConfig}\n                  summaryNode={summaryNode}\n                  tableLayout={mergedTableLayout}\n                  title={title ? title(rows) : undefined}\n                  variant={variant}\n                  virtual={controller.virtualInput}\n                  virtualScrollRef={controller.virtualScrollRef}\n                  onColumnResize={controller.onColumnResize}\n                  onScroll={onScroll}\n                />\n                {isLoading && (\n                  <div {...stylex.props(styles.loading)} data-table-loading=\"\">\n                    <Block\n                      align={'center'}\n                      data-table-loading-indicator=\"\"\n                      gap={8}\n                      padding={12}\n                      variant={'outlined'}\n                    >\n                      <Spin {...spinRest} variant={spinVariant} />\n                      {tip as ReactNode}\n                    </Block>\n                  </div>\n                )}\n                <FixedFrost rootRef={rootRef} />\n              </div>\n              {pager.bottom}\n            </div>\n          </HeaderContext>\n        </SelectionContext>\n      </TableViewContext>\n    </TableStoreProvider>\n  );\n};\n\ntype TableComponent = (<T>(props: TableProps<T>) => ReactNode) & {\n  Column: typeof Column;\n  ColumnGroup: typeof ColumnGroup;\n  displayName?: string;\n  EXPAND_COLUMN: typeof EXPAND_COLUMN;\n  SELECTION_ALL: typeof SELECTION_ALL;\n  SELECTION_COLUMN: typeof SELECTION_COLUMN;\n  SELECTION_INVERT: typeof SELECTION_INVERT;\n  SELECTION_NONE: typeof SELECTION_NONE;\n  Summary: typeof TableSummary;\n};\n\nconst Table = memo(TableInner) as unknown as TableComponent;\n\nTable.displayName = 'Table';\nTable.Column = Column;\nTable.ColumnGroup = ColumnGroup;\nTable.EXPAND_COLUMN = EXPAND_COLUMN;\nTable.SELECTION_COLUMN = SELECTION_COLUMN;\nTable.SELECTION_ALL = SELECTION_ALL;\nTable.SELECTION_INVERT = SELECTION_INVERT;\nTable.SELECTION_NONE = SELECTION_NONE;\nTable.Summary = TableSummary;\n\nexport { TableInner };\n\nexport default Table;\n"],"mappings":"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"}

package/es/Table/render/FixedFrost.mjs

@@ -21,13 +21,20 @@ const measureSides = (rows) => {
 const collectRails = (table) => {
 	const rails = [];
 	const own = (el) => el.closest(p) === table;
+	const ownMatch = (selector) => Array.from(table.querySelectorAll(selector)).some((el) => own(el));
+	if (ownMatch(`${p}-placeholder`) || ownMatch("[data-table-skeleton]")) return rails;
+	const showStart = table.classList.contains(`${PREFIX_CLS}-fix-start-shadow-show`);
+	const showEnd = table.classList.contains(`${PREFIX_CLS}-fix-end-shadow-show`);
+	if (!showStart && !showEnd) return rails;
 	const hosts = table.querySelectorAll(`${p}-content, ${p}-header, ${p}-body, ${p}-tbody-virtual-holder-inner`);
 	for (const host of Array.from(hosts)) {
 		if (!own(host)) continue;
 		if (host.closest(`${p}-sticky-holder`)) continue;
 		if (host.classList.contains(`lobe-table-tbody-virtual-holder-inner`)) {
 			const rows = Array.from(host.querySelectorAll(`${p}-row`)).filter((el) => own(el) && !el.classList.contains(`lobe-table-row-extra`));
-			const { start, end } = measureSides(rows.slice(0, 3));
+			const measured = measureSides(rows.slice(0, 3));
+			const start = showStart ? measured.start : 0;
+			const end = showEnd ? measured.end : 0;
 			if (start || end) rails.push({
 				end,
 				fill: true,
@@ -41,7 +48,9 @@ const collectRails = (table) => {
 		const tableEl = host.querySelector(":scope > table");
 		if (!tableEl) continue;
 		const rows = Array.from(tableEl.querySelectorAll(":scope > thead > tr, :scope > tbody > tr")).filter((row) => !row.classList.contains(`${PREFIX_CLS}-measure-row`)).slice(0, 6);
-		const { start, end } = measureSides(rows);
+		const measured = measureSides(rows);
+		const start = showStart ? measured.start : 0;
+		const end = showEnd ? measured.end : 0;
 		if (!start && !end) continue;
 		rails.push({
 			end,

package/es/Table/render/FixedFrost.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FixedFrost.mjs","names":[],"sources":["../../../src/Table/render/FixedFrost.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo, type RefObject, useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { PREFIX_CLS } from '../constants';\nimport { styles } from '../style';\n\nconst p = `.${PREFIX_CLS}`;\n\ninterface Rail {\n  end: number;\n  fill: boolean;\n  height: number;\n  host: HTMLElement;\n  start: number;\n  width: number;\n}\n\nconst px = (value: string) => Number.parseFloat(value) || 0;\n\nconst measureSides = (rows: Element[]) => {\n  let start = 0;\n  let end = 0;\n  for (const row of rows) {\n    for (const cell of Array.from(row.children) as HTMLElement[]) {\n      if (cell.classList.contains(`${PREFIX_CLS}-cell-fix-start`)) {\n        start = Math.max(\n          start,\n          px(cell.style.insetInlineStart || cell.style.left) + cell.offsetWidth,\n        );\n      } else if (cell.classList.contains(`${PREFIX_CLS}-cell-fix-end`)) {\n        end = Math.max(end, px(cell.style.insetInlineEnd || cell.style.right) + cell.offsetWidth);\n      }\n    }\n  }\n  return { end: Math.round(end), start: Math.round(start) };\n};\n\nconst collectRails = (table: HTMLElement): Rail[] => {\n  const rails: Rail[] = [];\n  const own = (el: Element) => el.closest(p) === table;\n  const hosts = table.querySelectorAll<HTMLElement>(\n    `${p}-content, ${p}-header, ${p}-body, ${p}-tbody-virtual-holder-inner`,\n  );\n\n  for (const host of Array.from(hosts)) {\n    if (!own(host)) continue;\n    // A sticky header is one element and blurs itself in CSS.\n    if (host.closest(`${p}-sticky-holder`)) continue;\n\n    if (host.classList.contains(`${PREFIX_CLS}-tbody-virtual-holder-inner`)) {\n      const rows = Array.from(host.querySelectorAll(`${p}-row`)).filter(\n        (el) => own(el) && !el.classList.contains(`${PREFIX_CLS}-row-extra`),\n      );\n      const { start, end } = measureSides(rows.slice(0, 3));\n      if (start || end) rails.push({ end, fill: true, height: 0, host, start, width: 0 });\n      continue;\n    }\n\n    const tableEl = host.querySelector<HTMLTableElement>(':scope > table');\n    if (!tableEl) continue;\n    const rows = Array.from(tableEl.querySelectorAll(':scope > thead > tr, :scope > tbody > tr'))\n      .filter((row) => !row.classList.contains(`${PREFIX_CLS}-measure-row`))\n      .slice(0, 6);\n    const { start, end } = measureSides(rows);\n    if (!start && !end) continue;\n    rails.push({\n      end,\n      fill: false,\n      height: tableEl.offsetHeight,\n      host,\n      start,\n      width: tableEl.offsetWidth,\n    });\n  }\n  return rails;\n};\n\nconst sameRails = (a: Rail[], b: Rail[]) =>\n  a.length === b.length &&\n  a.every(\n    (rail, i) =>\n      rail.host === b[i].host &&\n      rail.start === b[i].start &&\n      rail.end === b[i].end &&\n      rail.width === b[i].width &&\n      rail.height === b[i].height,\n  );\n\n// A per-cell backdrop-filter blurs each box on its own and shows seams at every row, so\n// each scroll host gets one rail holding a sticky pane per fixed side instead.\nconst FixedFrost = memo<{ rootRef: RefObject<HTMLElement | null> }>(({ rootRef }) => {\n  const [rails, setRails] = useState<Rail[]>([]);\n\n  // Passive effect: the root ref belongs to an ancestor and is attached after this\n  // child's layout effects, so a layout effect would see it as null on mount.\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!root) return;\n    let frame = 0;\n\n    const update = () => {\n      frame = 0;\n      const table = root.querySelector<HTMLElement>(p);\n      const next = table ? collectRails(table) : [];\n      for (const rail of next) {\n        if (!rail.fill && getComputedStyle(rail.host).position === 'static') {\n          rail.host.style.position = 'relative';\n        }\n      }\n      setRails((prev) => (sameRails(prev, next) ? prev : next));\n    };\n    const schedule = () => {\n      if (!frame) frame = requestAnimationFrame(update);\n    };\n\n    update();\n    // Consumers render Table in jsdom without a ResizeObserver polyfill.\n    const resize = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(schedule);\n    resize?.observe(root);\n    const mutation = new MutationObserver((records) => {\n      if (records.every((r) => (r.target as Element).closest?.('[data-table-frost]'))) return;\n      schedule();\n    });\n    mutation.observe(root, { attributeFilter: ['class', 'style'], childList: true, subtree: true });\n\n    return () => {\n      if (frame) cancelAnimationFrame(frame);\n      resize?.disconnect();\n      mutation.disconnect();\n    };\n  }, [rootRef]);\n\n  return (\n    <>\n      {rails.map((rail, i) =>\n        createPortal(\n          <div\n            aria-hidden\n            data-table-frost=\"\"\n            {...stylex.props(styles.frostRail)}\n            style={rail.fill ? { inset: 0 } : { height: rail.height, width: rail.width }}\n          >\n            {rail.start > 0 && (\n              <div {...stylex.props(styles.frostStart)} style={{ width: rail.start }} />\n            )}\n            {rail.end > 0 && <div {...stylex.props(styles.frostEnd)} style={{ width: rail.end }} />}\n          </div>,\n          rail.host,\n          `frost-${i}`,\n        ),\n      )}\n    </>\n  );\n});\n\nFixedFrost.displayName = 'TableFixedFrost';\n\nexport default FixedFrost;\n"],"mappings":"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"}
+{"version":3,"file":"FixedFrost.mjs","names":[],"sources":["../../../src/Table/render/FixedFrost.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo, type RefObject, useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { PREFIX_CLS } from '../constants';\nimport { styles } from '../style';\n\nconst p = `.${PREFIX_CLS}`;\n\ninterface Rail {\n  end: number;\n  fill: boolean;\n  height: number;\n  host: HTMLElement;\n  start: number;\n  width: number;\n}\n\nconst px = (value: string) => Number.parseFloat(value) || 0;\n\nconst measureSides = (rows: Element[]) => {\n  let start = 0;\n  let end = 0;\n  for (const row of rows) {\n    for (const cell of Array.from(row.children) as HTMLElement[]) {\n      if (cell.classList.contains(`${PREFIX_CLS}-cell-fix-start`)) {\n        start = Math.max(\n          start,\n          px(cell.style.insetInlineStart || cell.style.left) + cell.offsetWidth,\n        );\n      } else if (cell.classList.contains(`${PREFIX_CLS}-cell-fix-end`)) {\n        end = Math.max(end, px(cell.style.insetInlineEnd || cell.style.right) + cell.offsetWidth);\n      }\n    }\n  }\n  return { end: Math.round(end), start: Math.round(start) };\n};\n\nconst collectRails = (table: HTMLElement): Rail[] => {\n  const rails: Rail[] = [];\n  const own = (el: Element) => el.closest(p) === table;\n  const ownMatch = (selector: string) =>\n    Array.from(table.querySelectorAll(selector)).some((el) => own(el));\n\n  // Empty / skeleton body: the placeholder row spans every column, so there is nothing fixed\n  // in the body and nothing scrolled under the fixed side; a rail would only blur the\n  // skeleton and its row dividers.\n  if (ownMatch(`${p}-placeholder`) || ownMatch('[data-table-skeleton]')) return rails;\n\n  // useScrollSync flags the table with `*-shadow-show` exactly while content sits under a\n  // fixed side; at rest the transparent fixed cells cover nothing.\n  const showStart = table.classList.contains(`${PREFIX_CLS}-fix-start-shadow-show`);\n  const showEnd = table.classList.contains(`${PREFIX_CLS}-fix-end-shadow-show`);\n  if (!showStart && !showEnd) return rails;\n  const hosts = table.querySelectorAll<HTMLElement>(\n    `${p}-content, ${p}-header, ${p}-body, ${p}-tbody-virtual-holder-inner`,\n  );\n\n  for (const host of Array.from(hosts)) {\n    if (!own(host)) continue;\n    // A sticky header is one element and blurs itself in CSS.\n    if (host.closest(`${p}-sticky-holder`)) continue;\n\n    if (host.classList.contains(`${PREFIX_CLS}-tbody-virtual-holder-inner`)) {\n      const rows = Array.from(host.querySelectorAll(`${p}-row`)).filter(\n        (el) => own(el) && !el.classList.contains(`${PREFIX_CLS}-row-extra`),\n      );\n      const measured = measureSides(rows.slice(0, 3));\n      const start = showStart ? measured.start : 0;\n      const end = showEnd ? measured.end : 0;\n      if (start || end) rails.push({ end, fill: true, height: 0, host, start, width: 0 });\n      continue;\n    }\n\n    const tableEl = host.querySelector<HTMLTableElement>(':scope > table');\n    if (!tableEl) continue;\n    const rows = Array.from(tableEl.querySelectorAll(':scope > thead > tr, :scope > tbody > tr'))\n      .filter((row) => !row.classList.contains(`${PREFIX_CLS}-measure-row`))\n      .slice(0, 6);\n    const measured = measureSides(rows);\n    const start = showStart ? measured.start : 0;\n    const end = showEnd ? measured.end : 0;\n    if (!start && !end) continue;\n    rails.push({\n      end,\n      fill: false,\n      height: tableEl.offsetHeight,\n      host,\n      start,\n      width: tableEl.offsetWidth,\n    });\n  }\n  return rails;\n};\n\nconst sameRails = (a: Rail[], b: Rail[]) =>\n  a.length === b.length &&\n  a.every(\n    (rail, i) =>\n      rail.host === b[i].host &&\n      rail.start === b[i].start &&\n      rail.end === b[i].end &&\n      rail.width === b[i].width &&\n      rail.height === b[i].height,\n  );\n\n// A per-cell backdrop-filter blurs each box on its own and shows seams at every row, so\n// each scroll host gets one rail holding a sticky pane per fixed side instead. A side is only\n// frosted while content is scrolled under it and never over an empty / skeleton body, so row\n// dividers stay continuous through fixed columns.\nconst FixedFrost = memo<{ rootRef: RefObject<HTMLElement | null> }>(({ rootRef }) => {\n  const [rails, setRails] = useState<Rail[]>([]);\n\n  // Passive effect: the root ref belongs to an ancestor and is attached after this\n  // child's layout effects, so a layout effect would see it as null on mount.\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!root) return;\n    let frame = 0;\n\n    const update = () => {\n      frame = 0;\n      const table = root.querySelector<HTMLElement>(p);\n      const next = table ? collectRails(table) : [];\n      for (const rail of next) {\n        if (!rail.fill && getComputedStyle(rail.host).position === 'static') {\n          rail.host.style.position = 'relative';\n        }\n      }\n      setRails((prev) => (sameRails(prev, next) ? prev : next));\n    };\n    const schedule = () => {\n      if (!frame) frame = requestAnimationFrame(update);\n    };\n\n    update();\n    // Consumers render Table in jsdom without a ResizeObserver polyfill.\n    const resize = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(schedule);\n    resize?.observe(root);\n    const mutation = new MutationObserver((records) => {\n      if (records.every((r) => (r.target as Element).closest?.('[data-table-frost]'))) return;\n      schedule();\n    });\n    mutation.observe(root, { attributeFilter: ['class', 'style'], childList: true, subtree: true });\n\n    return () => {\n      if (frame) cancelAnimationFrame(frame);\n      resize?.disconnect();\n      mutation.disconnect();\n    };\n  }, [rootRef]);\n\n  return (\n    <>\n      {rails.map((rail, i) =>\n        createPortal(\n          <div\n            aria-hidden\n            data-table-frost=\"\"\n            {...stylex.props(styles.frostRail)}\n            style={rail.fill ? { inset: 0 } : { height: rail.height, width: rail.width }}\n          >\n            {rail.start > 0 && (\n              <div {...stylex.props(styles.frostStart)} style={{ width: rail.start }} />\n            )}\n            {rail.end > 0 && <div {...stylex.props(styles.frostEnd)} style={{ width: rail.end }} />}\n          </div>,\n          rail.host,\n          `frost-${i}`,\n        ),\n      )}\n    </>\n  );\n});\n\nFixedFrost.displayName = 'TableFixedFrost';\n\nexport default FixedFrost;\n"],"mappings":"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"}

package/es/Table/style.mjs

@@ -96,6 +96,8 @@ const styles = {
 	frostEnd: {
 		kUk6DE: "lb1okw0bk",
 		k6WDB: "lb1jh03n0",
+		kT0f0o: "lb1b5hgzv",
+		kfmiAY: "lb13toaxh",
 		kt4wiu: "lbtijo5x",
 		keTefX: "lbvc5jky",
 		kVAEAm: "lb7wzq59",
@@ -114,6 +116,8 @@ const styles = {
 	frostStart: {
 		kUk6DE: "lb1okw0bk",
 		k6WDB: "lb1jh03n0",
+		kVL7Gh: "lb1k65923",
+		krdFHd: "lb1jyebuh",
 		kLqNvP: "lb1o0tod",
 		kVAEAm: "lb7wzq59",
 		kZKoxP: "lb5yr21d",

package/es/Table/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Table/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  columnTitle: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    wordBreak: 'keep-all',\n    minWidth: 0,\n  },\n  filterActive: {\n    color: { 'default': cssVar.colorPrimary, ':hover': cssVar.colorPrimary },\n  },\n  filterButton: {\n    flex: 'none',\n    marginBlock: -4,\n  },\n  filterButtons: {\n    gap: 8,\n    paddingBlock: 7,\n    paddingInline: 8,\n    alignItems: 'center',\n    borderBlockStartColor: cssVar.colorSplit,\n    borderBlockStartStyle: 'solid',\n    borderBlockStartWidth: 1,\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  filterCheckAll: {\n    paddingInline: 4,\n    marginBlockEnd: 4,\n  },\n  filterDropdown: {\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 120,\n  },\n  filterEmpty: {\n    paddingBlock: 16,\n    paddingInline: 0,\n  },\n  filterGroup: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  filterGroupTitle: {\n    paddingBlock: 5,\n    paddingInline: 8,\n    color: cssVar.colorTextDescription,\n    fontSize: 12,\n  },\n  filterItem: {\n    borderRadius: cssVar.borderRadiusSM,\n    paddingBlock: 5,\n    paddingInline: 8,\n    alignItems: 'center',\n    backgroundColor: { 'default': null, ':hover': cssVar.colorFillTertiary },\n    display: 'flex',\n    whiteSpace: 'nowrap',\n  },\n  filterMenu: {\n    padding: 4,\n    overflow: 'auto',\n    display: 'flex',\n    flexDirection: 'column',\n    maxHeight: 264,\n  },\n  filterPopup: {\n    padding: 0,\n    overflow: 'hidden',\n  },\n  filterSearch: {\n    padding: 8,\n    borderBlockEndColor: cssVar.colorSplit,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n  },\n  filterTree: {\n    padding: 8,\n    overflow: 'auto',\n    maxHeight: 264,\n  },\n  frostEnd: {\n    flex: 'none',\n    backdropFilter: 'blur(16px)',\n    insetInlineEnd: 0,\n    marginInlineStart: 'auto',\n    position: 'sticky',\n    height: '100%',\n  },\n  // z-index 1: above scrolling cells (z auto), below fixed cells (z >= 2).\n  frostRail: {\n    display: 'flex',\n    insetBlockStart: 0,\n    insetInlineStart: 0,\n    pointerEvents: 'none',\n    position: 'absolute',\n    zIndex: 1,\n  },\n  frostStart: {\n    flex: 'none',\n    backdropFilter: 'blur(16px)',\n    insetInlineStart: 0,\n    position: 'sticky',\n    height: '100%',\n  },\n  headerInner: {\n    gap: 6,\n    alignItems: 'center',\n    display: 'inline-flex',\n    verticalAlign: 'middle',\n    maxWidth: '100%',\n    minWidth: 0,\n  },\n  loading: {\n    inset: 0,\n    gap: 8,\n    alignItems: 'center',\n    backgroundColor: `color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent)`,\n    color: cssVar.colorTextSecondary,\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n    position: 'absolute',\n  },\n  pagination: {\n    marginBlock: 16,\n    display: 'flex',\n  },\n  paginationCenter: {\n    justifyContent: 'center',\n  },\n  paginationEnd: {\n    justifyContent: 'flex-end',\n  },\n  paginationStart: {\n    justifyContent: 'flex-start',\n  },\n  paginationTop: {\n    marginBlockEnd: '16px',\n    marginBlockStart: '0',\n  },\n  root: {\n    minWidth: 0,\n  },\n  selection: {\n    display: 'inline-flex',\n    flexDirection: 'column',\n    position: 'relative',\n    verticalAlign: 'middle',\n  },\n  selectionExtra: {\n    alignItems: 'center',\n    display: 'flex',\n    insetBlockStart: 0,\n    marginInlineStart: '100%',\n    paddingInlineStart: 2,\n    position: 'absolute',\n    zIndex: 1,\n    height: '100%',\n  },\n  selectionRadioGroup: {\n    display: 'inline-flex',\n    verticalAlign: 'middle',\n  },\n  selectionTrigger: {\n    flex: 'none',\n    marginBlock: -4,\n  },\n  skeleton: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'start',\n    minWidth: 0,\n    width: '100%',\n  },\n  skeletonCell: {\n    paddingBlock: 'var(--lobe-table-padding-block)',\n    paddingInline: 'var(--lobe-table-padding-inline)',\n    alignItems: 'center',\n    display: 'flex',\n    minWidth: 0,\n  },\n  skeletonRow: {\n    alignItems: 'stretch',\n    borderBlockEndColor: `var(--lobe-fill-border, ${cssVar.colorFill})`,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: { 'default': 1, ':last-child': 0 },\n    display: 'grid',\n    minWidth: 0,\n    width: '100%',\n  },\n  sortButton: {\n    gap: 4,\n    alignItems: 'center',\n    display: 'inline-flex',\n    maxWidth: '100%',\n    minWidth: 0,\n  },\n  sortCaret: {\n    flex: 'none',\n    marginBlock: -4,\n  },\n  sortTitle: {\n    cursor: 'pointer',\n    minWidth: 0,\n  },\n  spinContainer: {\n    position: 'relative',\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Table/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  columnTitle: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    wordBreak: 'keep-all',\n    minWidth: 0,\n  },\n  filterActive: {\n    color: { 'default': cssVar.colorPrimary, ':hover': cssVar.colorPrimary },\n  },\n  filterButton: {\n    flex: 'none',\n    marginBlock: -4,\n  },\n  filterButtons: {\n    gap: 8,\n    paddingBlock: 7,\n    paddingInline: 8,\n    alignItems: 'center',\n    borderBlockStartColor: cssVar.colorSplit,\n    borderBlockStartStyle: 'solid',\n    borderBlockStartWidth: 1,\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  filterCheckAll: {\n    paddingInline: 4,\n    marginBlockEnd: 4,\n  },\n  filterDropdown: {\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 120,\n  },\n  filterEmpty: {\n    paddingBlock: 16,\n    paddingInline: 0,\n  },\n  filterGroup: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  filterGroupTitle: {\n    paddingBlock: 5,\n    paddingInline: 8,\n    color: cssVar.colorTextDescription,\n    fontSize: 12,\n  },\n  filterItem: {\n    borderRadius: cssVar.borderRadiusSM,\n    paddingBlock: 5,\n    paddingInline: 8,\n    alignItems: 'center',\n    backgroundColor: { 'default': null, ':hover': cssVar.colorFillTertiary },\n    display: 'flex',\n    whiteSpace: 'nowrap',\n  },\n  filterMenu: {\n    padding: 4,\n    overflow: 'auto',\n    display: 'flex',\n    flexDirection: 'column',\n    maxHeight: 264,\n  },\n  filterPopup: {\n    padding: 0,\n    overflow: 'hidden',\n  },\n  filterSearch: {\n    padding: 8,\n    borderBlockEndColor: cssVar.colorSplit,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n  },\n  filterTree: {\n    padding: 8,\n    overflow: 'auto',\n    maxHeight: 264,\n  },\n  frostEnd: {\n    flex: 'none',\n    backdropFilter: 'blur(16px)',\n    borderEndEndRadius: 'var(--lobe-table-radius-bottom, 0)',\n    borderStartEndRadius: 'var(--lobe-table-radius-top, 0)',\n    insetInlineEnd: 0,\n    marginInlineStart: 'auto',\n    position: 'sticky',\n    height: '100%',\n  },\n  // z-index 1: above scrolling cells (z auto), below fixed cells (z >= 2).\n  frostRail: {\n    display: 'flex',\n    insetBlockStart: 0,\n    insetInlineStart: 0,\n    pointerEvents: 'none',\n    position: 'absolute',\n    zIndex: 1,\n  },\n  frostStart: {\n    flex: 'none',\n    backdropFilter: 'blur(16px)',\n    borderEndStartRadius: 'var(--lobe-table-radius-bottom, 0)',\n    borderStartStartRadius: 'var(--lobe-table-radius-top, 0)',\n    insetInlineStart: 0,\n    position: 'sticky',\n    height: '100%',\n  },\n  headerInner: {\n    gap: 6,\n    alignItems: 'center',\n    display: 'inline-flex',\n    verticalAlign: 'middle',\n    maxWidth: '100%',\n    minWidth: 0,\n  },\n  loading: {\n    inset: 0,\n    gap: 8,\n    alignItems: 'center',\n    backgroundColor: `color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent)`,\n    color: cssVar.colorTextSecondary,\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n    position: 'absolute',\n  },\n  pagination: {\n    marginBlock: 16,\n    display: 'flex',\n  },\n  paginationCenter: {\n    justifyContent: 'center',\n  },\n  paginationEnd: {\n    justifyContent: 'flex-end',\n  },\n  paginationStart: {\n    justifyContent: 'flex-start',\n  },\n  paginationTop: {\n    marginBlockEnd: '16px',\n    marginBlockStart: '0',\n  },\n  root: {\n    minWidth: 0,\n  },\n  selection: {\n    display: 'inline-flex',\n    flexDirection: 'column',\n    position: 'relative',\n    verticalAlign: 'middle',\n  },\n  selectionExtra: {\n    alignItems: 'center',\n    display: 'flex',\n    insetBlockStart: 0,\n    marginInlineStart: '100%',\n    paddingInlineStart: 2,\n    position: 'absolute',\n    zIndex: 1,\n    height: '100%',\n  },\n  selectionRadioGroup: {\n    display: 'inline-flex',\n    verticalAlign: 'middle',\n  },\n  selectionTrigger: {\n    flex: 'none',\n    marginBlock: -4,\n  },\n  skeleton: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'start',\n    minWidth: 0,\n    width: '100%',\n  },\n  skeletonCell: {\n    paddingBlock: 'var(--lobe-table-padding-block)',\n    paddingInline: 'var(--lobe-table-padding-inline)',\n    alignItems: 'center',\n    display: 'flex',\n    minWidth: 0,\n  },\n  skeletonRow: {\n    alignItems: 'stretch',\n    borderBlockEndColor: `var(--lobe-fill-border, ${cssVar.colorFill})`,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: { 'default': 1, ':last-child': 0 },\n    display: 'grid',\n    minWidth: 0,\n    width: '100%',\n  },\n  sortButton: {\n    gap: 4,\n    alignItems: 'center',\n    display: 'inline-flex',\n    maxWidth: '100%',\n    minWidth: 0,\n  },\n  sortCaret: {\n    flex: 'none',\n    marginBlock: -4,\n  },\n  sortTitle: {\n    cursor: 'pointer',\n    minWidth: 0,\n  },\n  spinContainer: {\n    position: 'relative',\n  },\n});\n"],"mappings":"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"}

package/es/Tabs/style.d.mts

@@ -5,8 +5,8 @@ export declare const tabsStyles: {
   panel: string;
   tab: string;
   list: string;
-  indicator: string;
   root: string;
+  indicator: string;
   indicatorPoint: string;
   indicatorRounded: string;
   indicatorSquare: string;

package/es/Text/style.d.mts

@@ -14,13 +14,13 @@ export declare const textStyles: {
   text: string;
   disabled: string;
   danger: string;
+  success: string;
+  info: string;
+  warning: string;
   delete: string;
   ellipsis: string;
   italic: string;
   underline: string;
-  success: string;
-  warning: string;
-  info: string;
   ellipsisMulti: string;
   secondary: string;
 };

package/es/Toast/dodge.mjs

@@ -1,6 +1,5 @@
 import { toastDodge } from "./dodge.stylex.mjs";
 toastDodge.duration;
-toastDodge.ease;
 const TOAST_SHIFT_X_VAR = "--toast-shift-x";
 const TOAST_SHIFT_Y_VAR = "--toast-shift-y";
 const TOAST_WIDTH_VAR = "--toast-width";

package/es/Toast/dodge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dodge.mjs","names":[],"sources":["../../src/Toast/dodge.ts"],"sourcesContent":["import { toastDodge } from './dodge.stylex';\n\nexport const TOAST_WIDTH = 360;\nexport const TOAST_MIN_WIDTH = 260;\nexport const TOAST_EDGE = 16;\nexport const TOAST_ROW_HEIGHT = 88;\nexport const TOAST_DODGE_GUTTER = 12;\n\nexport const TOAST_DODGE_DURATION = toastDodge.duration;\nexport const TOAST_DODGE_EASE = toastDodge.ease;\n\nexport const TOAST_SHIFT_X_VAR = '--toast-shift-x';\nexport const TOAST_SHIFT_Y_VAR = '--toast-shift-y';\nexport const TOAST_WIDTH_VAR = '--toast-width';\nexport const PANEL_RESERVE_VAR = '--floating-panel-reserve-block-end';\nexport const PANEL_ALIGN_INLINE_VAR = '--floating-panel-reserve-inline-end';\n\nexport interface ToastDodgeInput {\n  panelHeight: number;\n  panelOffsetX: number;\n  panelOffsetY: number;\n  panelWidth: number;\n  viewportHeight: number;\n  viewportWidth: number;\n}\n\nexport type ToastDodgeMode = 'left' | 'reserve' | 'shrink' | 'up';\n\nexport interface ToastDodgeResult {\n  alignInline: number;\n  mode: ToastDodgeMode;\n  reserve: number;\n  shiftX: number;\n  shiftY: number;\n  width: number;\n}\n\nexport const resolveToastDodge = ({\n  panelHeight,\n  panelOffsetX,\n  panelOffsetY,\n  panelWidth,\n  viewportHeight,\n  viewportWidth,\n}: ToastDodgeInput): ToastDodgeResult => {\n  const shiftX = Math.max(0, panelWidth + panelOffsetX + TOAST_DODGE_GUTTER - TOAST_EDGE);\n  const shiftY = Math.max(0, panelHeight + panelOffsetY + TOAST_DODGE_GUTTER - TOAST_EDGE);\n  const lane = viewportWidth - shiftX - TOAST_EDGE * 2;\n  const headroom = viewportHeight - shiftY - TOAST_EDGE * 2;\n\n  // The panel sits closer to the edge than the toast does, so the pair reads as\n  // misaligned until the panel is pushed out to the toast's inset. Which axis\n  // needs it follows which edge the two end up sharing.\n  const alignBlock = Math.max(0, TOAST_EDGE - panelOffsetY);\n  const alignInline = Math.max(0, TOAST_EDGE - panelOffsetX);\n\n  if (lane >= TOAST_WIDTH) {\n    return {\n      alignInline: 0,\n      mode: 'left',\n      reserve: alignBlock,\n      shiftX,\n      shiftY: 0,\n      width: TOAST_WIDTH,\n    };\n  }\n\n  if (headroom >= TOAST_ROW_HEIGHT) {\n    return { alignInline, mode: 'up', reserve: 0, shiftX: 0, shiftY, width: TOAST_WIDTH };\n  }\n\n  if (lane >= TOAST_MIN_WIDTH) {\n    return { alignInline: 0, mode: 'shrink', reserve: alignBlock, shiftX, shiftY: 0, width: lane };\n  }\n\n  // ponytail: the reserve budget is one toast row, not the live stack height —\n  // measuring the stack would feed panel resizes back into the measurement.\n  // A taller stack overflows upward here; per-stack reserve if that shows up.\n  return {\n    alignInline,\n    mode: 'reserve',\n    reserve: Math.max(0, TOAST_EDGE + TOAST_ROW_HEIGHT + TOAST_DODGE_GUTTER - panelOffsetY),\n    shiftX: 0,\n    shiftY: 0,\n    width: TOAST_WIDTH,\n  };\n};\n"],"mappings":";AAQoC,WAAW;AACf,WAAW;AAE3C,MAAa,oBAAoB;AACjC,MAAa,oBAAoB;AACjC,MAAa,kBAAkB;AAC/B,MAAa,oBAAoB;AACjC,MAAa,yBAAyB;AAsBtC,MAAa,qBAAqB,EAChC,aACA,cACA,cACA,YACA,gBACA,oBACuC;CACvC,MAAM,SAAS,KAAK,IAAI,GAAG,aAAa,eAAA,KAAA,EAA8C;CACtF,MAAM,SAAS,KAAK,IAAI,GAAG,cAAc,eAAA,KAAA,EAA8C;CACvF,MAAM,OAAO,gBAAgB,SAAS;CACtC,MAAM,WAAW,iBAAiB,SAAS;CAK3C,MAAM,aAAa,KAAK,IAAI,GAAA,KAAgB,YAAY;CACxD,MAAM,cAAc,KAAK,IAAI,GAAA,KAAgB,YAAY;CAEzD,IAAI,QAAA,KACF,OAAO;EACL,aAAa;EACb,MAAM;EACN,SAAS;EACT;EACA,QAAQ;EACR,OAAA;CACF;CAGF,IAAI,YAAA,IACF,OAAO;EAAE;EAAa,MAAM;EAAM,SAAS;EAAG,QAAQ;EAAG;EAAQ,OAAA;CAAmB;CAGtF,IAAI,QAAA,KACF,OAAO;EAAE,aAAa;EAAG,MAAM;EAAU,SAAS;EAAY;EAAQ,QAAQ;EAAG,OAAO;CAAK;CAM/F,OAAO;EACL;EACA,MAAM;EACN,SAAS,KAAK,IAAI,GAAG,MAAqD,YAAY;EACtF,QAAQ;EACR,QAAQ;EACR,OAAA;CACF;AACF"}
+{"version":3,"file":"dodge.mjs","names":[],"sources":["../../src/Toast/dodge.ts"],"sourcesContent":["import { toastDodge } from './dodge.stylex';\n\nexport const TOAST_WIDTH = 360;\nexport const TOAST_MIN_WIDTH = 260;\nexport const TOAST_EDGE = 16;\nexport const TOAST_ROW_HEIGHT = 88;\nexport const TOAST_DODGE_GUTTER = 12;\n\nexport const TOAST_DODGE_DURATION = toastDodge.duration;\n\nexport const TOAST_SHIFT_X_VAR = '--toast-shift-x';\nexport const TOAST_SHIFT_Y_VAR = '--toast-shift-y';\nexport const TOAST_WIDTH_VAR = '--toast-width';\nexport const PANEL_RESERVE_VAR = '--floating-panel-reserve-block-end';\nexport const PANEL_ALIGN_INLINE_VAR = '--floating-panel-reserve-inline-end';\n\nexport interface ToastDodgeInput {\n  panelHeight: number;\n  panelOffsetX: number;\n  panelOffsetY: number;\n  panelWidth: number;\n  viewportHeight: number;\n  viewportWidth: number;\n}\n\nexport type ToastDodgeMode = 'left' | 'reserve' | 'shrink' | 'up';\n\nexport interface ToastDodgeResult {\n  alignInline: number;\n  mode: ToastDodgeMode;\n  reserve: number;\n  shiftX: number;\n  shiftY: number;\n  width: number;\n}\n\nexport const resolveToastDodge = ({\n  panelHeight,\n  panelOffsetX,\n  panelOffsetY,\n  panelWidth,\n  viewportHeight,\n  viewportWidth,\n}: ToastDodgeInput): ToastDodgeResult => {\n  const shiftX = Math.max(0, panelWidth + panelOffsetX + TOAST_DODGE_GUTTER - TOAST_EDGE);\n  const shiftY = Math.max(0, panelHeight + panelOffsetY + TOAST_DODGE_GUTTER - TOAST_EDGE);\n  const lane = viewportWidth - shiftX - TOAST_EDGE * 2;\n  const headroom = viewportHeight - shiftY - TOAST_EDGE * 2;\n\n  // The panel sits closer to the edge than the toast does, so the pair reads as\n  // misaligned until the panel is pushed out to the toast's inset. Which axis\n  // needs it follows which edge the two end up sharing.\n  const alignBlock = Math.max(0, TOAST_EDGE - panelOffsetY);\n  const alignInline = Math.max(0, TOAST_EDGE - panelOffsetX);\n\n  if (lane >= TOAST_WIDTH) {\n    return {\n      alignInline: 0,\n      mode: 'left',\n      reserve: alignBlock,\n      shiftX,\n      shiftY: 0,\n      width: TOAST_WIDTH,\n    };\n  }\n\n  if (headroom >= TOAST_ROW_HEIGHT) {\n    return { alignInline, mode: 'up', reserve: 0, shiftX: 0, shiftY, width: TOAST_WIDTH };\n  }\n\n  if (lane >= TOAST_MIN_WIDTH) {\n    return { alignInline: 0, mode: 'shrink', reserve: alignBlock, shiftX, shiftY: 0, width: lane };\n  }\n\n  // ponytail: the reserve budget is one toast row, not the live stack height —\n  // measuring the stack would feed panel resizes back into the measurement.\n  // A taller stack overflows upward here; per-stack reserve if that shows up.\n  return {\n    alignInline,\n    mode: 'reserve',\n    reserve: Math.max(0, TOAST_EDGE + TOAST_ROW_HEIGHT + TOAST_DODGE_GUTTER - panelOffsetY),\n    shiftX: 0,\n    shiftY: 0,\n    width: TOAST_WIDTH,\n  };\n};\n"],"mappings":";AAQoC,WAAW;AAE/C,MAAa,oBAAoB;AACjC,MAAa,oBAAoB;AACjC,MAAa,kBAAkB;AAC/B,MAAa,oBAAoB;AACjC,MAAa,yBAAyB;AAsBtC,MAAa,qBAAqB,EAChC,aACA,cACA,cACA,YACA,gBACA,oBACuC;CACvC,MAAM,SAAS,KAAK,IAAI,GAAG,aAAa,eAAA,KAAA,EAA8C;CACtF,MAAM,SAAS,KAAK,IAAI,GAAG,cAAc,eAAA,KAAA,EAA8C;CACvF,MAAM,OAAO,gBAAgB,SAAS;CACtC,MAAM,WAAW,iBAAiB,SAAS;CAK3C,MAAM,aAAa,KAAK,IAAI,GAAA,KAAgB,YAAY;CACxD,MAAM,cAAc,KAAK,IAAI,GAAA,KAAgB,YAAY;CAEzD,IAAI,QAAA,KACF,OAAO;EACL,aAAa;EACb,MAAM;EACN,SAAS;EACT;EACA,QAAQ;EACR,OAAA;CACF;CAGF,IAAI,YAAA,IACF,OAAO;EAAE;EAAa,MAAM;EAAM,SAAS;EAAG,QAAQ;EAAG;EAAQ,OAAA;CAAmB;CAGtF,IAAI,QAAA,KACF,OAAO;EAAE,aAAa;EAAG,MAAM;EAAU,SAAS;EAAY;EAAQ,QAAQ;EAAG,OAAO;CAAK;CAM/F,OAAO;EACL;EACA,MAAM;EACN,SAAS,KAAK,IAAI,GAAG,MAAqD,YAAY;EACtF,QAAQ;EACR,QAAQ;EACR,OAAA;CACF;AACF"}

package/es/Toast/dodge.stylex.mjs

@@ -1,8 +1,5 @@
 //#region src/Toast/dodge.stylex.ts
-const toastDodge = {
-	duration: "608ms",
-	ease: "linear(0, 0.08, 0.249, 0.437, 0.607, 0.745, 0.847, 0.917, 0.963, 0.99, 1.004, 1.011, 1.012, 1.011, 1.009, 1.007, 1.005, 1.003, 1.002, 1)"
-};
+const toastDodge = { duration: "608ms" };
 //#endregion
 export { toastDodge };
 

package/es/Toast/dodge.stylex.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dodge.stylex.mjs","names":[],"sources":["../../src/Toast/dodge.stylex.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\n// Spring baked as linear(): stiffness 460 / damping 53 / mass 2.3, zeta ~0.81\n// with 1.2% overshoot. The duration is the spring's settle time — change them\n// together with the curve, not independently.\nexport const toastDodge = stylex.defineConsts({\n  duration: '608ms',\n  ease: 'linear(0, 0.08, 0.249, 0.437, 0.607, 0.745, 0.847, 0.917, 0.963, 0.99, 1.004, 1.011, 1.012, 1.011, 1.009, 1.007, 1.005, 1.003, 1.002, 1)',\n});\n"],"mappings":";AAKA,MAAa,aAAa;CACxB,UAAU;CACV,MAAM;AACR"}
+{"version":3,"file":"dodge.stylex.mjs","names":[],"sources":["../../src/Toast/dodge.stylex.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\n// Paired with motionSpringSnappy: the duration is that spring's settle time —\n// change them together, not independently.\nexport const toastDodge = stylex.defineConsts({\n  duration: '608ms',\n});\n"],"mappings":";AAIA,MAAa,aAAa,EACxB,UAAU,QACZ"}

package/es/Toast/style.mjs

@@ -204,7 +204,7 @@ const styles = {
 		k3aq6I: "lb18zyp77",
 		kIyJzY: "lb1x2t6jx lb12w9bfk",
 		k1ekBW: "lb11xpdln lb4wkmsb",
-		kAMwcw: "lbh0x3zu lb7v8fk2",
+		kAMwcw: "lbsygjwy lb7v8fk2",
 		$$css: true
 	},
 	viewportTop: {

package/es/Toast/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Toast/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { toastDodge } from './dodge.stylex';\n\nconst focusVisible = ':focus-visible:not([data-lobe-focus-ring=\"managed\"])';\nconst forcedColors = '@media (forced-colors: active)';\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst hover = ':hover:not(:active)';\nconst startingOrEnding = ':is([data-starting-style], [data-ending-style])';\nconst expanded = ':is([data-expanded]):not([data-starting-style], [data-ending-style])';\nconst swiping = ':is([data-swiping])';\nconst viewportOffsetX = 'var(--toast-viewport-offset-x, 16px)';\nconst viewportOffsetY = 'var(--toast-viewport-offset-y, 16px)';\n\nexport const styles = stylex.create({\n  action: {\n    borderColor: 'currentcolor',\n    borderRadius: cssVar.borderRadiusSM,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    paddingInline: 12,\n    transition: 'background 0.2s, color 0.2s',\n    alignItems: 'center',\n    cursor: 'pointer',\n    display: 'inline-flex',\n    flexShrink: 0,\n    fontSize: 12,\n    fontWeight: 500,\n    justifyContent: 'center',\n    lineHeight: 1,\n    height: 28,\n  },\n\n  actionDanger: {\n    '--lobe-focus-ring-color': cssVar.colorError,\n    'backgroundColor': {\n      'default': cssVar.colorError,\n      [hover]: cssVar.colorErrorHover,\n      ':active': cssVar.colorErrorActive,\n    },\n    'color': cssVar.colorBgLayout,\n    'outlineColor': {\n      default: null,\n      [focusVisible]: `color-mix(in srgb, ${cssVar.colorError} 90%, transparent)`,\n      [forcedColors]: { default: null, [focusVisible]: 'CanvasText' },\n    },\n  },\n\n  actionGhost: {\n    borderColor: {\n      'default': cssVar.colorBorder,\n      [hover]: cssVar.colorPrimary,\n      ':active': cssVar.colorPrimaryActive,\n    },\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: 'transparent',\n    color: {\n      'default': cssVar.colorText,\n      [hover]: cssVar.colorPrimary,\n      ':active': cssVar.colorPrimaryActive,\n    },\n  },\n\n  actionPrimary: {\n    backgroundColor: {\n      'default': cssVar.colorPrimary,\n      [hover]: cssVar.colorPrimaryHover,\n      ':active': cssVar.colorPrimaryActive,\n    },\n    color: cssVar.colorBgLayout,\n  },\n\n  actionSecondary: {\n    backgroundColor: {\n      'default': cssVar.colorFillSecondary,\n      [hover]: cssVar.colorFillTertiary,\n      ':active': cssVar.colorFill,\n    },\n    color: cssVar.colorText,\n  },\n\n  actionText: {\n    backgroundColor: {\n      'default': 'transparent',\n      [hover]: cssVar.colorFillTertiary,\n      ':active': cssVar.colorFillSecondary,\n    },\n    color: cssVar.colorPrimary,\n  },\n\n  actions: {\n    gap: 8,\n    alignItems: 'center',\n    alignSelf: 'flex-end',\n    display: 'flex',\n    flexGrow: 1,\n    flexShrink: 0,\n    justifyContent: 'flex-end',\n    marginBlockStart: 8,\n  },\n\n  close: {\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderRadius: cssVar.borderRadiusSM,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    transition: 'all 0.2s',\n    alignItems: 'center',\n    backgroundColor: { 'default': 'transparent', ':hover': cssVar.colorFillSecondary },\n    color: { 'default': cssVar.colorTextSecondary, ':hover': cssVar.colorText },\n    cursor: 'pointer',\n    display: 'flex',\n    flexShrink: 0,\n    justifyContent: 'center',\n    marginInlineStart: 'auto',\n    height: 20,\n    width: 20,\n  },\n\n  content: {\n    overflow: 'hidden',\n    transition: 'opacity 0.2s',\n    opacity: {\n      'default': null,\n      ':is([data-behind]):not([data-expanded])': 0,\n      ':is([data-expanded])': 1,\n    },\n    pointerEvents: {\n      'default': null,\n      ':is([data-behind]):not([data-expanded])': 'none',\n      ':is([data-expanded])': 'auto',\n    },\n  },\n\n  contentArea: {\n    flex: '1',\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 0,\n  },\n\n  description: {\n    margin: 0,\n    color: cssVar.colorTextSecondary,\n    fontSize: 13,\n    lineHeight: 1.5,\n  },\n\n  descriptionStandalone: {\n    color: cssVar.colorText,\n  },\n\n  icon: {\n    alignItems: 'center',\n    display: 'flex',\n    flexShrink: 0,\n    justifyContent: 'center',\n  },\n\n  root: {\n    '--toast-collapsed-height': 'var(--toast-frontmost-height, var(--toast-height))',\n    '--toast-gap': '12px',\n    '--toast-peek': '12px',\n    '--toast-scale': 'calc(1 - var(--toast-index) * 0.05)',\n    '--toast-shrink': 'calc(1 - var(--toast-scale))',\n    'borderRadius': `var(--toast-border-radius, ${cssVar.borderRadiusLG})`,\n    'insetInline': 0,\n    'paddingBlock': 12,\n    'paddingInline': 16,\n    'backgroundClip': 'padding-box',\n    'backgroundColor': cssVar.colorBgElevated,\n    'boxShadow': `${cssVar.boxShadowSecondary}, var(--lobe-ring)`,\n    'boxSizing': 'border-box',\n    'color': cssVar.colorText,\n    'cursor': 'default',\n    'opacity': {\n      'default': null,\n      ':is([data-limited], [data-starting-style], [data-ending-style])': 0,\n    },\n    'position': 'absolute',\n    'transitionDuration': { default: '0.4s, 0.4s, 0.15s', [swiping]: '0s' },\n    'transitionProperty': { default: 'transform, opacity, height', [swiping]: 'none' },\n    'transitionTimingFunction': {\n      default: 'cubic-bezier(0.22, 1, 0.36, 1), ease, ease',\n      [swiping]: 'ease',\n    },\n    'userSelect': 'none',\n    // eslint-disable-next-line @stylexjs/valid-styles -- the rule only allows numeric z-index; calc() is valid CSS\n    'zIndex': 'calc(1000 - var(--toast-index))',\n    'height': {\n      'default': 'var(--toast-collapsed-height)',\n      ':is([data-expanded])': 'var(--toast-height)',\n    },\n    'width': '100%',\n  },\n\n  rootBottom: {\n    'insetBlock': 'auto 0',\n    'transform': {\n      default:\n        'translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) - (var(--toast-shrink) * var(--toast-collapsed-height)))) scale(var(--toast-scale))',\n      [expanded]:\n        'translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + var(--toast-offset-y) * -1 + var(--toast-index) * var(--toast-gap) * -1)) scale(1)',\n      [startingOrEnding]: 'translateY(150%)',\n    },\n    'transformOrigin': 'bottom center',\n    '::after': {\n      insetInline: 0,\n      content: \"''\",\n      insetBlockStart: '100%',\n      position: 'absolute',\n      height: 'calc(var(--toast-gap) + var(--toast-peek) + 8px)',\n    },\n  },\n\n  rootTop: {\n    'insetBlock': '0 auto',\n    'transform': {\n      default:\n        'translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + (var(--toast-index) * var(--toast-peek)) + (var(--toast-shrink) * var(--toast-collapsed-height)))) scale(var(--toast-scale))',\n      [expanded]:\n        'translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + var(--toast-offset-y) + var(--toast-index) * var(--toast-gap))) scale(1)',\n      [startingOrEnding]: 'translateY(-150%)',\n    },\n    'transformOrigin': 'top center',\n    '::after': {\n      insetInline: 0,\n      content: \"''\",\n      insetBlockEnd: '100%',\n      position: 'absolute',\n      height: 'calc(var(--toast-gap) + var(--toast-peek) + 8px)',\n    },\n  },\n\n  title: {\n    margin: 0,\n    color: cssVar.colorText,\n    fontSize: 14,\n    fontWeight: 500,\n    lineHeight: 1.5,\n  },\n\n  titleRow: {\n    gap: 8,\n    alignItems: 'flex-start',\n    display: 'flex',\n  },\n\n  toastBody: {\n    gap: 12,\n    alignItems: 'flex-start',\n    display: 'flex',\n  },\n\n  viewport: {\n    outline: '0',\n    position: 'fixed',\n    zIndex: 100_000,\n    maxWidth: `calc(100vw - ${viewportOffsetX} * 2)`,\n    width: {\n      'default': 'var(--toast-width, 360px)',\n      '@media (width <= 480px)': `calc(100vw - ${viewportOffsetX} * 2)`,\n    },\n  },\n\n  viewportBottom: {\n    insetBlockEnd: viewportOffsetY,\n    insetInlineStart: '50%',\n    transform: 'translateX(-50%)',\n  },\n\n  viewportBottomLeft: {\n    insetBlockEnd: viewportOffsetY,\n    insetInlineStart: viewportOffsetX,\n  },\n\n  viewportBottomRight: {\n    insetBlockEnd: viewportOffsetY,\n    insetInlineEnd: viewportOffsetX,\n    transform:\n      'translate(calc(-1 * var(--toast-shift-x, 0px)), calc(-1 * var(--toast-shift-y, 0px)))',\n    transitionDuration: { default: toastDodge.duration, [reducedMotion]: '0s' },\n    transitionProperty: { default: 'transform', [reducedMotion]: 'none' },\n    transitionTimingFunction: { default: toastDodge.ease, [reducedMotion]: 'ease' },\n  },\n\n  viewportTop: {\n    insetBlockStart: viewportOffsetY,\n    insetInlineStart: '50%',\n    transform: 'translateX(-50%)',\n  },\n\n  viewportTopLeft: {\n    insetBlockStart: viewportOffsetY,\n    insetInlineStart: viewportOffsetX,\n  },\n\n  viewportTopRight: {\n    insetBlockStart: viewportOffsetY,\n    insetInlineEnd: viewportOffsetX,\n  },\n});\n\nexport const viewportPositionStyles = {\n  'bottom': styles.viewportBottom,\n  'bottom-left': styles.viewportBottomLeft,\n  'bottom-right': styles.viewportBottomRight,\n  'top': styles.viewportTop,\n  'top-left': styles.viewportTopLeft,\n  'top-right': styles.viewportTopRight,\n};\n\nexport const rootPositionStyles = {\n  'bottom': styles.rootBottom,\n  'bottom-left': styles.rootBottom,\n  'bottom-right': styles.rootBottom,\n  'top': styles.rootTop,\n  'top-left': styles.rootTop,\n  'top-right': styles.rootTop,\n};\n\nexport const actionVariantStyles = {\n  danger: styles.actionDanger,\n  ghost: styles.actionGhost,\n  primary: styles.actionPrimary,\n  secondary: styles.actionSecondary,\n  text: styles.actionText,\n};\n"],"mappings":"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"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Toast/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { toastDodge } from './dodge.stylex';\n\nconst focusVisible = ':focus-visible:not([data-lobe-focus-ring=\"managed\"])';\nconst forcedColors = '@media (forced-colors: active)';\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst hover = ':hover:not(:active)';\nconst startingOrEnding = ':is([data-starting-style], [data-ending-style])';\nconst expanded = ':is([data-expanded]):not([data-starting-style], [data-ending-style])';\nconst swiping = ':is([data-swiping])';\nconst viewportOffsetX = 'var(--toast-viewport-offset-x, 16px)';\nconst viewportOffsetY = 'var(--toast-viewport-offset-y, 16px)';\n\nexport const styles = stylex.create({\n  action: {\n    borderColor: 'currentcolor',\n    borderRadius: cssVar.borderRadiusSM,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    paddingInline: 12,\n    transition: 'background 0.2s, color 0.2s',\n    alignItems: 'center',\n    cursor: 'pointer',\n    display: 'inline-flex',\n    flexShrink: 0,\n    fontSize: 12,\n    fontWeight: 500,\n    justifyContent: 'center',\n    lineHeight: 1,\n    height: 28,\n  },\n\n  actionDanger: {\n    '--lobe-focus-ring-color': cssVar.colorError,\n    'backgroundColor': {\n      'default': cssVar.colorError,\n      [hover]: cssVar.colorErrorHover,\n      ':active': cssVar.colorErrorActive,\n    },\n    'color': cssVar.colorBgLayout,\n    'outlineColor': {\n      default: null,\n      [focusVisible]: `color-mix(in srgb, ${cssVar.colorError} 90%, transparent)`,\n      [forcedColors]: { default: null, [focusVisible]: 'CanvasText' },\n    },\n  },\n\n  actionGhost: {\n    borderColor: {\n      'default': cssVar.colorBorder,\n      [hover]: cssVar.colorPrimary,\n      ':active': cssVar.colorPrimaryActive,\n    },\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: 'transparent',\n    color: {\n      'default': cssVar.colorText,\n      [hover]: cssVar.colorPrimary,\n      ':active': cssVar.colorPrimaryActive,\n    },\n  },\n\n  actionPrimary: {\n    backgroundColor: {\n      'default': cssVar.colorPrimary,\n      [hover]: cssVar.colorPrimaryHover,\n      ':active': cssVar.colorPrimaryActive,\n    },\n    color: cssVar.colorBgLayout,\n  },\n\n  actionSecondary: {\n    backgroundColor: {\n      'default': cssVar.colorFillSecondary,\n      [hover]: cssVar.colorFillTertiary,\n      ':active': cssVar.colorFill,\n    },\n    color: cssVar.colorText,\n  },\n\n  actionText: {\n    backgroundColor: {\n      'default': 'transparent',\n      [hover]: cssVar.colorFillTertiary,\n      ':active': cssVar.colorFillSecondary,\n    },\n    color: cssVar.colorPrimary,\n  },\n\n  actions: {\n    gap: 8,\n    alignItems: 'center',\n    alignSelf: 'flex-end',\n    display: 'flex',\n    flexGrow: 1,\n    flexShrink: 0,\n    justifyContent: 'flex-end',\n    marginBlockStart: 8,\n  },\n\n  close: {\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderRadius: cssVar.borderRadiusSM,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    transition: 'all 0.2s',\n    alignItems: 'center',\n    backgroundColor: { 'default': 'transparent', ':hover': cssVar.colorFillSecondary },\n    color: { 'default': cssVar.colorTextSecondary, ':hover': cssVar.colorText },\n    cursor: 'pointer',\n    display: 'flex',\n    flexShrink: 0,\n    justifyContent: 'center',\n    marginInlineStart: 'auto',\n    height: 20,\n    width: 20,\n  },\n\n  content: {\n    overflow: 'hidden',\n    transition: 'opacity 0.2s',\n    opacity: {\n      'default': null,\n      ':is([data-behind]):not([data-expanded])': 0,\n      ':is([data-expanded])': 1,\n    },\n    pointerEvents: {\n      'default': null,\n      ':is([data-behind]):not([data-expanded])': 'none',\n      ':is([data-expanded])': 'auto',\n    },\n  },\n\n  contentArea: {\n    flex: '1',\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 0,\n  },\n\n  description: {\n    margin: 0,\n    color: cssVar.colorTextSecondary,\n    fontSize: 13,\n    lineHeight: 1.5,\n  },\n\n  descriptionStandalone: {\n    color: cssVar.colorText,\n  },\n\n  icon: {\n    alignItems: 'center',\n    display: 'flex',\n    flexShrink: 0,\n    justifyContent: 'center',\n  },\n\n  root: {\n    '--toast-collapsed-height': 'var(--toast-frontmost-height, var(--toast-height))',\n    '--toast-gap': '12px',\n    '--toast-peek': '12px',\n    '--toast-scale': 'calc(1 - var(--toast-index) * 0.05)',\n    '--toast-shrink': 'calc(1 - var(--toast-scale))',\n    'borderRadius': `var(--toast-border-radius, ${cssVar.borderRadiusLG})`,\n    'insetInline': 0,\n    'paddingBlock': 12,\n    'paddingInline': 16,\n    'backgroundClip': 'padding-box',\n    'backgroundColor': cssVar.colorBgElevated,\n    'boxShadow': `${cssVar.boxShadowSecondary}, var(--lobe-ring)`,\n    'boxSizing': 'border-box',\n    'color': cssVar.colorText,\n    'cursor': 'default',\n    'opacity': {\n      'default': null,\n      ':is([data-limited], [data-starting-style], [data-ending-style])': 0,\n    },\n    'position': 'absolute',\n    'transitionDuration': { default: '0.4s, 0.4s, 0.15s', [swiping]: '0s' },\n    'transitionProperty': { default: 'transform, opacity, height', [swiping]: 'none' },\n    'transitionTimingFunction': {\n      default: 'cubic-bezier(0.22, 1, 0.36, 1), ease, ease',\n      [swiping]: 'ease',\n    },\n    'userSelect': 'none',\n    // eslint-disable-next-line @stylexjs/valid-styles -- the rule only allows numeric z-index; calc() is valid CSS\n    'zIndex': 'calc(1000 - var(--toast-index))',\n    'height': {\n      'default': 'var(--toast-collapsed-height)',\n      ':is([data-expanded])': 'var(--toast-height)',\n    },\n    'width': '100%',\n  },\n\n  rootBottom: {\n    'insetBlock': 'auto 0',\n    'transform': {\n      default:\n        'translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) - (var(--toast-shrink) * var(--toast-collapsed-height)))) scale(var(--toast-scale))',\n      [expanded]:\n        'translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + var(--toast-offset-y) * -1 + var(--toast-index) * var(--toast-gap) * -1)) scale(1)',\n      [startingOrEnding]: 'translateY(150%)',\n    },\n    'transformOrigin': 'bottom center',\n    '::after': {\n      insetInline: 0,\n      content: \"''\",\n      insetBlockStart: '100%',\n      position: 'absolute',\n      height: 'calc(var(--toast-gap) + var(--toast-peek) + 8px)',\n    },\n  },\n\n  rootTop: {\n    'insetBlock': '0 auto',\n    'transform': {\n      default:\n        'translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + (var(--toast-index) * var(--toast-peek)) + (var(--toast-shrink) * var(--toast-collapsed-height)))) scale(var(--toast-scale))',\n      [expanded]:\n        'translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + var(--toast-offset-y) + var(--toast-index) * var(--toast-gap))) scale(1)',\n      [startingOrEnding]: 'translateY(-150%)',\n    },\n    'transformOrigin': 'top center',\n    '::after': {\n      insetInline: 0,\n      content: \"''\",\n      insetBlockEnd: '100%',\n      position: 'absolute',\n      height: 'calc(var(--toast-gap) + var(--toast-peek) + 8px)',\n    },\n  },\n\n  title: {\n    margin: 0,\n    color: cssVar.colorText,\n    fontSize: 14,\n    fontWeight: 500,\n    lineHeight: 1.5,\n  },\n\n  titleRow: {\n    gap: 8,\n    alignItems: 'flex-start',\n    display: 'flex',\n  },\n\n  toastBody: {\n    gap: 12,\n    alignItems: 'flex-start',\n    display: 'flex',\n  },\n\n  viewport: {\n    outline: '0',\n    position: 'fixed',\n    zIndex: 100_000,\n    maxWidth: `calc(100vw - ${viewportOffsetX} * 2)`,\n    width: {\n      'default': 'var(--toast-width, 360px)',\n      '@media (width <= 480px)': `calc(100vw - ${viewportOffsetX} * 2)`,\n    },\n  },\n\n  viewportBottom: {\n    insetBlockEnd: viewportOffsetY,\n    insetInlineStart: '50%',\n    transform: 'translateX(-50%)',\n  },\n\n  viewportBottomLeft: {\n    insetBlockEnd: viewportOffsetY,\n    insetInlineStart: viewportOffsetX,\n  },\n\n  viewportBottomRight: {\n    insetBlockEnd: viewportOffsetY,\n    insetInlineEnd: viewportOffsetX,\n    transform:\n      'translate(calc(-1 * var(--toast-shift-x, 0px)), calc(-1 * var(--toast-shift-y, 0px)))',\n    transitionDuration: { default: toastDodge.duration, [reducedMotion]: '0s' },\n    transitionProperty: { default: 'transform', [reducedMotion]: 'none' },\n    transitionTimingFunction: { default: cssVar.motionSpringSnappy, [reducedMotion]: 'ease' },\n  },\n\n  viewportTop: {\n    insetBlockStart: viewportOffsetY,\n    insetInlineStart: '50%',\n    transform: 'translateX(-50%)',\n  },\n\n  viewportTopLeft: {\n    insetBlockStart: viewportOffsetY,\n    insetInlineStart: viewportOffsetX,\n  },\n\n  viewportTopRight: {\n    insetBlockStart: viewportOffsetY,\n    insetInlineEnd: viewportOffsetX,\n  },\n});\n\nexport const viewportPositionStyles = {\n  'bottom': styles.viewportBottom,\n  'bottom-left': styles.viewportBottomLeft,\n  'bottom-right': styles.viewportBottomRight,\n  'top': styles.viewportTop,\n  'top-left': styles.viewportTopLeft,\n  'top-right': styles.viewportTopRight,\n};\n\nexport const rootPositionStyles = {\n  'bottom': styles.rootBottom,\n  'bottom-left': styles.rootBottom,\n  'bottom-right': styles.rootBottom,\n  'top': styles.rootTop,\n  'top-left': styles.rootTop,\n  'top-right': styles.rootTop,\n};\n\nexport const actionVariantStyles = {\n  danger: styles.actionDanger,\n  ghost: styles.actionGhost,\n  primary: styles.actionPrimary,\n  secondary: styles.actionSecondary,\n  text: styles.actionText,\n};\n"],"mappings":";AAcA,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,2BAA2B;EAC3B,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,uBAAuB;EACrB,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,4BAA4B;EAC5B,eAAe;EACf,gBAAgB;EAChB,iBAAiB;EACjB,kBAAkB;EAClB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,oBAAoB;EAClB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,qBAAqB;EACnB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,kBAAkB;EAChB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAa,yBAAyB;CACpC,UAAU,OAAO;CACjB,eAAe,OAAO;CACtB,gBAAgB,OAAO;CACvB,OAAO,OAAO;CACd,YAAY,OAAO;CACnB,aAAa,OAAO;AACtB;AACA,MAAa,qBAAqB;CAChC,UAAU,OAAO;CACjB,eAAe,OAAO;CACtB,gBAAgB,OAAO;CACvB,OAAO,OAAO;CACd,YAAY,OAAO;CACnB,aAAa,OAAO;AACtB;AACA,MAAa,sBAAsB;CACjC,QAAQ,OAAO;CACf,OAAO,OAAO;CACd,SAAS,OAAO;CAChB,WAAW,OAAO;CAClB,MAAM,OAAO;AACf"}

package/es/Tooltip/style.mjs

@@ -54,13 +54,13 @@ const styles = {
 		"--lobe-tooltip-animation-duration": "lbabgygf lb1fy5egn",
 		"--lobe-tooltip-animation-duration-exit": "lb17zxa9l lb15570jz",
 		"--lobe-tooltip-animation-ease-in": "lb1czz40j",
-		"--lobe-tooltip-animation-ease-out": "lbiyrdk8",
+		"--lobe-tooltip-animation-ease-out": "lb19w7cha",
 		"--lobe-tooltip-animation-scale": "lb1ezh9a6",
 		"--lobe-tooltip-animation-translate": "lb1xzhb9q",
 		"--lobe-tooltip-fade-duration": "lbytl4um lb1ae5iqf",
 		"--lobe-tooltip-fade-ease": "lb1epvlm",
 		"--lobe-tooltip-layout-duration": "lb1rnv61f lb3dl09s",
-		"--lobe-tooltip-layout-ease": "lb1dnf3u4",
+		"--lobe-tooltip-layout-ease": "lbm88wyt",
 		"--lobe-tooltip-translate-x": "lb1x6gem7 lbjzfilc lb19p6rg0",
 		"--lobe-tooltip-translate-y": "lb1ppaw8e lb1e6wdka lb1rub6d4 lbuhc4zl",
 		kfzvcC: "lb1tblq73",

package/es/Tooltip/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Tooltip/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst layoutAnimation = ':is([data-layout-animation])';\nconst instant = ':is([data-instant])';\nconst instantOrRepop = ':is([data-instant], [data-repop])';\nconst popupLayoutTiming =\n  ':is([data-layout-animation]):not([data-repop], [data-ending-style], [data-instant])';\nconst popupLayoutProperty = ':is([data-layout-animation]):not([data-repop], [data-instant])';\nconst popupRepopTiming = ':is([data-repop]):not([data-ending-style], [data-instant])';\nconst popupEndingTiming = ':is([data-ending-style]):not([data-instant])';\nconst positionerLayout = ':is([data-layout-animation]):not([data-instant], [data-repop])';\nconst startingOrEnding = ':is([data-starting-style], [data-ending-style])';\nconst anchorHidden = \":is([data-anchor-hidden], [data-zero-origin='true'])\";\nconst placementTop =\n  \":is([data-placement='top'], [data-placement='topLeft'], [data-placement='topRight'])\";\nconst placementLeft =\n  \":is([data-placement='left'], [data-placement='leftTop'], [data-placement='leftBottom'])\";\nconst placementRight =\n  \":is([data-placement='right'], [data-placement='rightTop'], [data-placement='rightBottom'])\";\n\nconst springEnter =\n  'linear(0, 0.041, 0.14, 0.268, 0.407, 0.541, 0.662, 0.765, 0.849, 0.915, 0.964, 0.998, 1.02, 1.032, 1.038, 1.039, 1.036, 1.032, 1.027, 1.022, 1.016, 1.012, 1.008, 1.005, 1.003)';\nconst springGlide =\n  'linear(0, 0.041, 0.14, 0.268, 0.407, 0.541, 0.661, 0.765, 0.849, 0.915, 0.964, 0.998, 1.02, 1.032, 1.038, 1.039, 1.036, 1.032, 1.027, 1.022, 1.016, 1.012, 1.008, 1.005, 1.003)';\n\nexport const styles = stylex.create({\n  arrow: {\n    '--lobe-tooltip-arrow-offset-block': '4px',\n    '--lobe-tooltip-arrow-offset-inline': '6px',\n    'transition':\n      'inset-inline-start var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease), inset-block-start var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease)',\n    'display': 'flex',\n    'insetBlockEnd': {\n      'default': null,\n      \":is([data-side='top'])\": 'calc(var(--lobe-tooltip-arrow-offset-block) * -1)',\n    },\n    'insetBlockStart': {\n      'default': null,\n      \":is([data-side='bottom'])\": 'calc(var(--lobe-tooltip-arrow-offset-block) * -1)',\n    },\n    'insetInlineEnd': {\n      'default': null,\n      \":is([data-side='left'])\": 'calc(var(--lobe-tooltip-arrow-offset-inline) * -1)',\n    },\n    'insetInlineStart': {\n      'default': null,\n      \":is([data-side='right'])\": 'calc(var(--lobe-tooltip-arrow-offset-inline) * -1)',\n    },\n    'pointerEvents': 'none',\n    'position': 'absolute',\n    'transform': {\n      'default': null,\n      \":is([data-side='left'])\": 'rotate(90deg)',\n      \":is([data-side='right'])\": 'rotate(-90deg)',\n      \":is([data-side='top'])\": 'rotate(180deg)',\n    },\n    'transformOrigin': 'center',\n    'height': 4,\n    'width': 8,\n  },\n  arrowStroke: {\n    stroke: cssVar.colorBorderSecondary,\n  },\n  arrowSvg: {\n    fill: cssVar.colorBgElevated,\n    display: 'block',\n    height: '100%',\n    width: '100%',\n  },\n\n  popup: {\n    borderRadius: cssVar.borderRadiusSM,\n    backgroundColor: cssVar.colorBgElevated,\n    boxShadow: `${cssVar.boxShadowTertiary}, var(--lobe-ring)`,\n    boxSizing: 'border-box',\n    color: cssVar.colorTextLabel,\n    fontSize: cssVar.fontSizeSM,\n    lineHeight: 1.2,\n    opacity: { default: null, [startingOrEnding]: 0 },\n    position: 'relative',\n    transform: {\n      default: null,\n      [startingOrEnding]:\n        'translate3d(var(--lobe-tooltip-translate-x), var(--lobe-tooltip-translate-y), 0) scale(var(--lobe-tooltip-animation-scale))',\n    },\n    transformOrigin: 'var(--transform-origin)',\n    /* `transition: none` is spelled out as longhands because StyleX layers longhands above\n       shorthands. StyleX does not keep condition order, so the old cascade\n       (layout < repop < ending-style < instant) is encoded with :not() guards. */\n    transitionDuration: {\n      default: 'var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration)',\n      [instant]: '0s',\n      [popupEndingTiming]: 'var(--lobe-tooltip-animation-duration-exit)',\n      [popupLayoutTiming]:\n        'var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration), var(--lobe-tooltip-layout-duration), var(--lobe-tooltip-layout-duration)',\n      [popupRepopTiming]: '0s',\n    },\n    transitionProperty: {\n      default: 'opacity, transform',\n      [instantOrRepop]: 'none',\n      [popupLayoutProperty]: 'opacity, transform, width, height',\n    },\n    /* Opacity gets its own monotonic curve: running it on the overshooting spring makes the\n       fade look finished at ~0.96, pause, then visibly step to 1 at the clamp point — reads\n       as a dropped frame. The spring stays on transform only. */\n    transitionTimingFunction: {\n      default: 'var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out)',\n      [instant]: 'ease',\n      [popupEndingTiming]: 'var(--lobe-tooltip-animation-ease-in)',\n      [popupLayoutTiming]:\n        'var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out), var(--lobe-tooltip-layout-ease), var(--lobe-tooltip-layout-ease)',\n      [popupRepopTiming]: 'ease',\n    },\n    userSelect: 'none',\n    /* Keep the popup on its own compositor layer for its whole lifetime: when the opacity\n       transition ends the browser otherwise drops the layer and re-rasterizes with pixel\n       snapping — a visible one-frame shift when the measured width is fractional\n       (single-line tooltips). */\n    willChange: 'transform, opacity',\n    height: { default: null, [layoutAnimation]: 'var(--popup-height, auto)' },\n    /* The 320px cap lives on the viewport, not here: Base UI measures content with\n       --available-width set to max-content, and min(320px, max-content) is invalid, which\n       recorded unclamped sizes. A percentage cap is out too — it tracks the positioner, which\n       snaps to the new size and would freeze the shrink half of the morph. */\n    maxWidth: 'var(--available-width)',\n    /* Base UI writes the old size into --popup-width/height on a trigger switch and the new size\n       one frame later; the box only morphs if width/height actually read them. */\n    width: { default: null, [layoutAnimation]: 'var(--popup-width, auto)' },\n  },\n\n  positioner: {\n    /* Springs baked as linear(): stiffness 700 / damping 38 (enter) and 380 / 28 (glide),\n       both zeta ~0.72 with ~4% overshoot. Durations are the springs' settle times —\n       change them together with the curves, not independently. */\n    '--lobe-tooltip-animation-duration': { default: '280ms', [reducedMotion]: '0s' },\n    '--lobe-tooltip-animation-duration-exit': { default: '100ms', [reducedMotion]: '0s' },\n    '--lobe-tooltip-animation-ease-in': 'cubic-bezier(0.4, 0, 1, 1)',\n    '--lobe-tooltip-animation-ease-out': springEnter,\n    '--lobe-tooltip-animation-scale': '0.97',\n    '--lobe-tooltip-animation-translate': '3px',\n    '--lobe-tooltip-fade-duration': { default: '160ms', [reducedMotion]: '0s' },\n    '--lobe-tooltip-fade-ease': 'cubic-bezier(0.33, 1, 0.68, 1)',\n    '--lobe-tooltip-layout-duration': { default: '380ms', [reducedMotion]: '0s' },\n    '--lobe-tooltip-layout-ease': springGlide,\n    '--lobe-tooltip-translate-x': {\n      default: '0',\n      [placementLeft]: 'var(--lobe-tooltip-animation-translate)',\n      [placementRight]: 'calc(var(--lobe-tooltip-animation-translate) * -1)',\n    },\n    '--lobe-tooltip-translate-y': {\n      default: 'calc(var(--lobe-tooltip-animation-translate) * -1)',\n      [placementLeft]: '0',\n      [placementRight]: '0',\n      [placementTop]: 'var(--lobe-tooltip-animation-translate)',\n    },\n    /* Never show a tooltip when the anchor is hidden or the positioner falls back to (0,0). */\n    'pointerEvents': { [anchorHidden]: 'none', default: null },\n    'transitionDuration': {\n      default: 'var(--lobe-tooltip-animation-duration)',\n      [instantOrRepop]: '0s',\n      [positionerLayout]: 'var(--lobe-tooltip-layout-duration)',\n    },\n    'transitionProperty': {\n      default: 'none',\n      [positionerLayout]:\n        'inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform',\n    },\n    'transitionTimingFunction': {\n      default: 'var(--lobe-tooltip-animation-ease-out)',\n      [instantOrRepop]: 'ease',\n      [positionerLayout]: 'var(--lobe-tooltip-layout-ease)',\n    },\n    'visibility': { [anchorHidden]: 'hidden', default: null },\n    'willChange': 'transform, opacity',\n    'zIndex': 114_514,\n    'height': 'var(--positioner-height)',\n    'width': 'min(var(--positioner-width), 320px, var(--available-width))',\n  },\n\n  viewport: {\n    '--lobe-tooltip-content-blur': '4px',\n    '--lobe-tooltip-content-shift': '8px',\n    '--lobe-tooltip-viewport-inline-padding': '8px',\n    'overflow': 'clip',\n    'paddingBlock': 4,\n    'paddingInline': 'var(--lobe-tooltip-viewport-inline-padding)',\n    'overflowWrap': 'break-word',\n    'position': 'relative',\n    'whiteSpace': 'normal',\n    'maxWidth': 'calc(320px - 2px)',\n  },\n});\n"],"mappings":";AAoBA,MAAa,SAAS;CACpB,OAAO;EACL,qCAAqC;EACrC,sCAAsC;EACtC,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,qCAAqC;EACrC,0CAA0C;EAC1C,oCAAoC;EACpC,qCAAqC;EACrC,kCAAkC;EAClC,sCAAsC;EACtC,gCAAgC;EAChC,4BAA4B;EAC5B,kCAAkC;EAClC,8BAA8B;EAC9B,8BAA8B;EAC9B,8BAA8B;EAC9B,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,+BAA+B;EAC/B,gCAAgC;EAChC,0CAA0C;EAC1C,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Tooltip/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst layoutAnimation = ':is([data-layout-animation])';\nconst instant = ':is([data-instant])';\nconst instantOrRepop = ':is([data-instant], [data-repop])';\nconst popupLayoutTiming =\n  ':is([data-layout-animation]):not([data-repop], [data-ending-style], [data-instant])';\nconst popupLayoutProperty = ':is([data-layout-animation]):not([data-repop], [data-instant])';\nconst popupRepopTiming = ':is([data-repop]):not([data-ending-style], [data-instant])';\nconst popupEndingTiming = ':is([data-ending-style]):not([data-instant])';\nconst positionerLayout = ':is([data-layout-animation]):not([data-instant], [data-repop])';\nconst startingOrEnding = ':is([data-starting-style], [data-ending-style])';\nconst anchorHidden = \":is([data-anchor-hidden], [data-zero-origin='true'])\";\nconst placementTop =\n  \":is([data-placement='top'], [data-placement='topLeft'], [data-placement='topRight'])\";\nconst placementLeft =\n  \":is([data-placement='left'], [data-placement='leftTop'], [data-placement='leftBottom'])\";\nconst placementRight =\n  \":is([data-placement='right'], [data-placement='rightTop'], [data-placement='rightBottom'])\";\n\nexport const styles = stylex.create({\n  arrow: {\n    '--lobe-tooltip-arrow-offset-block': '4px',\n    '--lobe-tooltip-arrow-offset-inline': '6px',\n    'transition':\n      'inset-inline-start var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease), inset-block-start var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease)',\n    'display': 'flex',\n    'insetBlockEnd': {\n      'default': null,\n      \":is([data-side='top'])\": 'calc(var(--lobe-tooltip-arrow-offset-block) * -1)',\n    },\n    'insetBlockStart': {\n      'default': null,\n      \":is([data-side='bottom'])\": 'calc(var(--lobe-tooltip-arrow-offset-block) * -1)',\n    },\n    'insetInlineEnd': {\n      'default': null,\n      \":is([data-side='left'])\": 'calc(var(--lobe-tooltip-arrow-offset-inline) * -1)',\n    },\n    'insetInlineStart': {\n      'default': null,\n      \":is([data-side='right'])\": 'calc(var(--lobe-tooltip-arrow-offset-inline) * -1)',\n    },\n    'pointerEvents': 'none',\n    'position': 'absolute',\n    'transform': {\n      'default': null,\n      \":is([data-side='left'])\": 'rotate(90deg)',\n      \":is([data-side='right'])\": 'rotate(-90deg)',\n      \":is([data-side='top'])\": 'rotate(180deg)',\n    },\n    'transformOrigin': 'center',\n    'height': 4,\n    'width': 8,\n  },\n  arrowStroke: {\n    stroke: cssVar.colorBorderSecondary,\n  },\n  arrowSvg: {\n    fill: cssVar.colorBgElevated,\n    display: 'block',\n    height: '100%',\n    width: '100%',\n  },\n\n  popup: {\n    borderRadius: cssVar.borderRadiusSM,\n    backgroundColor: cssVar.colorBgElevated,\n    boxShadow: `${cssVar.boxShadowTertiary}, var(--lobe-ring)`,\n    boxSizing: 'border-box',\n    color: cssVar.colorTextLabel,\n    fontSize: cssVar.fontSizeSM,\n    lineHeight: 1.2,\n    opacity: { default: null, [startingOrEnding]: 0 },\n    position: 'relative',\n    transform: {\n      default: null,\n      [startingOrEnding]:\n        'translate3d(var(--lobe-tooltip-translate-x), var(--lobe-tooltip-translate-y), 0) scale(var(--lobe-tooltip-animation-scale))',\n    },\n    transformOrigin: 'var(--transform-origin)',\n    /* `transition: none` is spelled out as longhands because StyleX layers longhands above\n       shorthands. StyleX does not keep condition order, so the old cascade\n       (layout < repop < ending-style < instant) is encoded with :not() guards. */\n    transitionDuration: {\n      default: 'var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration)',\n      [instant]: '0s',\n      [popupEndingTiming]: 'var(--lobe-tooltip-animation-duration-exit)',\n      [popupLayoutTiming]:\n        'var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration), var(--lobe-tooltip-layout-duration), var(--lobe-tooltip-layout-duration)',\n      [popupRepopTiming]: '0s',\n    },\n    transitionProperty: {\n      default: 'opacity, transform',\n      [instantOrRepop]: 'none',\n      [popupLayoutProperty]: 'opacity, transform, width, height',\n    },\n    /* Opacity gets its own monotonic curve: running it on the overshooting spring makes the\n       fade look finished at ~0.96, pause, then visibly step to 1 at the clamp point — reads\n       as a dropped frame. The spring stays on transform only. */\n    transitionTimingFunction: {\n      default: 'var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out)',\n      [instant]: 'ease',\n      [popupEndingTiming]: 'var(--lobe-tooltip-animation-ease-in)',\n      [popupLayoutTiming]:\n        'var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out), var(--lobe-tooltip-layout-ease), var(--lobe-tooltip-layout-ease)',\n      [popupRepopTiming]: 'ease',\n    },\n    userSelect: 'none',\n    /* Keep the popup on its own compositor layer for its whole lifetime: when the opacity\n       transition ends the browser otherwise drops the layer and re-rasterizes with pixel\n       snapping — a visible one-frame shift when the measured width is fractional\n       (single-line tooltips). */\n    willChange: 'transform, opacity',\n    height: { default: null, [layoutAnimation]: 'var(--popup-height, auto)' },\n    /* The 320px cap lives on the viewport, not here: Base UI measures content with\n       --available-width set to max-content, and min(320px, max-content) is invalid, which\n       recorded unclamped sizes. A percentage cap is out too — it tracks the positioner, which\n       snaps to the new size and would freeze the shrink half of the morph. */\n    maxWidth: 'var(--available-width)',\n    /* Base UI writes the old size into --popup-width/height on a trigger switch and the new size\n       one frame later; the box only morphs if width/height actually read them. */\n    width: { default: null, [layoutAnimation]: 'var(--popup-width, auto)' },\n  },\n\n  positioner: {\n    /* motionSpringBouncy is a spring shape normalized to its settle time, so each duration\n       here is that spring's settle time — change them together, not independently. */\n    '--lobe-tooltip-animation-duration': { default: '280ms', [reducedMotion]: '0s' },\n    '--lobe-tooltip-animation-duration-exit': { default: '100ms', [reducedMotion]: '0s' },\n    '--lobe-tooltip-animation-ease-in': 'cubic-bezier(0.4, 0, 1, 1)',\n    '--lobe-tooltip-animation-ease-out': cssVar.motionSpringBouncy,\n    '--lobe-tooltip-animation-scale': '0.97',\n    '--lobe-tooltip-animation-translate': '3px',\n    '--lobe-tooltip-fade-duration': { default: '160ms', [reducedMotion]: '0s' },\n    '--lobe-tooltip-fade-ease': 'cubic-bezier(0.33, 1, 0.68, 1)',\n    '--lobe-tooltip-layout-duration': { default: '380ms', [reducedMotion]: '0s' },\n    '--lobe-tooltip-layout-ease': cssVar.motionSpringBouncy,\n    '--lobe-tooltip-translate-x': {\n      default: '0',\n      [placementLeft]: 'var(--lobe-tooltip-animation-translate)',\n      [placementRight]: 'calc(var(--lobe-tooltip-animation-translate) * -1)',\n    },\n    '--lobe-tooltip-translate-y': {\n      default: 'calc(var(--lobe-tooltip-animation-translate) * -1)',\n      [placementLeft]: '0',\n      [placementRight]: '0',\n      [placementTop]: 'var(--lobe-tooltip-animation-translate)',\n    },\n    /* Never show a tooltip when the anchor is hidden or the positioner falls back to (0,0). */\n    'pointerEvents': { [anchorHidden]: 'none', default: null },\n    'transitionDuration': {\n      default: 'var(--lobe-tooltip-animation-duration)',\n      [instantOrRepop]: '0s',\n      [positionerLayout]: 'var(--lobe-tooltip-layout-duration)',\n    },\n    'transitionProperty': {\n      default: 'none',\n      [positionerLayout]:\n        'inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform',\n    },\n    'transitionTimingFunction': {\n      default: 'var(--lobe-tooltip-animation-ease-out)',\n      [instantOrRepop]: 'ease',\n      [positionerLayout]: 'var(--lobe-tooltip-layout-ease)',\n    },\n    'visibility': { [anchorHidden]: 'hidden', default: null },\n    'willChange': 'transform, opacity',\n    'zIndex': 114_514,\n    'height': 'var(--positioner-height)',\n    'width': 'min(var(--positioner-width), 320px, var(--available-width))',\n  },\n\n  viewport: {\n    '--lobe-tooltip-content-blur': '4px',\n    '--lobe-tooltip-content-shift': '8px',\n    '--lobe-tooltip-viewport-inline-padding': '8px',\n    'overflow': 'clip',\n    'paddingBlock': 4,\n    'paddingInline': 'var(--lobe-tooltip-viewport-inline-padding)',\n    'overflowWrap': 'break-word',\n    'position': 'relative',\n    'whiteSpace': 'normal',\n    'maxWidth': 'calc(320px - 2px)',\n  },\n});\n"],"mappings":";AAkBA,MAAa,SAAS;CACpB,OAAO;EACL,qCAAqC;EACrC,sCAAsC;EACtC,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,qCAAqC;EACrC,0CAA0C;EAC1C,oCAAoC;EACpC,qCAAqC;EACrC,kCAAkC;EAClC,sCAAsC;EACtC,gCAAgC;EAChC,4BAA4B;EAC5B,kCAAkC;EAClC,8BAA8B;EAC9B,8BAA8B;EAC9B,8BAA8B;EAC9B,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,+BAA+B;EAC/B,gCAAgC;EAChC,0CAA0C;EAC1C,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/color/index.d.mts

@@ -1,4 +1,5 @@
 import { ColorScaleItem } from "./types.mjs";
+import { StatusColorScales, statusColorScales } from "./status/index.mjs";
 import blueGeekblueMix from "./colors/blue.mjs";
 import cyan from "./colors/cyan.mjs";
 import geekblue from "./colors/geekblue.mjs";
@@ -22,4 +23,4 @@ import sage from "./neutrals/sage.mjs";
 import sand from "./neutrals/sand.mjs";
 import slate from "./neutrals/slate.mjs";
 import { NeutralColorScales, neutralColorScales } from "./neutrals/index.mjs";
-export { type ColorScaleItem, ColorScales, type ColorScalesProps, ColorScales$1 as CssVar, NeutralColorScales, blueGeekblueMix as blue, colorScales, colorScales as colors, cyan, geekblue, gold, gray, green, lime, magenta, mauve, neutralColorScales, neutralColorScales as neutrals, olive, orange, primary, purple, red, sage, sand, slate, volcano, yellow };
+export { type ColorScaleItem, ColorScales, type ColorScalesProps, ColorScales$1 as CssVar, NeutralColorScales, type StatusColorScales, blueGeekblueMix as blue, colorScales, colorScales as colors, cyan, geekblue, gold, gray, green, lime, magenta, mauve, neutralColorScales, neutralColorScales as neutrals, olive, orange, primary, purple, red, sage, sand, slate, statusColorScales, volcano, yellow };

package/es/color/index.mjs

@@ -1,3 +1,4 @@
+import { statusColorScales } from "./status/index.mjs";
 import blueGeekblueMix from "./colors/blue.mjs";
 import cyan from "./colors/cyan.mjs";
 import geekblue from "./colors/geekblue.mjs";
@@ -21,4 +22,4 @@ import slate from "./neutrals/slate.mjs";
 import { neutralColorScales } from "./neutrals/index.mjs";
 import ColorScales from "./ColorScales/index.mjs";
 import ColorScales$1 from "./CssVar/index.mjs";
-export { ColorScales, ColorScales$1 as CssVar, blueGeekblueMix as blue, colorScales, colorScales as colors, cyan, geekblue, gold, gray, green, lime, magenta, mauve, neutralColorScales, neutralColorScales as neutrals, olive, orange, primary, purple, red, sage, sand, slate, volcano, yellow };
+export { ColorScales, ColorScales$1 as CssVar, blueGeekblueMix as blue, colorScales, colorScales as colors, cyan, geekblue, gold, gray, green, lime, magenta, mauve, neutralColorScales, neutralColorScales as neutrals, olive, orange, primary, purple, red, sage, sand, slate, statusColorScales, volcano, yellow };

package/es/color/status/error.mjs

@@ -0,0 +1,67 @@
+//#region src/color/status/error.ts
+const error = {
+	dark: [
+		"#190a09",
+		"#340b0c",
+		"#4b141a",
+		"#641f24",
+		"#8a3334",
+		"#aa3f3e",
+		"#b53a3a",
+		"#be3738",
+		"#d64242",
+		"#e95350",
+		"#ffa8a0",
+		"#ffe1df",
+		"#fff8f7"
+	],
+	darkA: [
+		"rgba(250, 100, 90, 0.1)",
+		"rgba(248, 52, 57, 0.21)",
+		"rgba(250, 67, 87, 0.3)",
+		"rgba(250, 78, 90, 0.4)",
+		"rgba(251, 93, 95, 0.55)",
+		"rgba(254, 94, 93, 0.67)",
+		"rgba(255, 82, 82, 0.71)",
+		"rgba(253, 73, 75, 0.75)",
+		"rgba(255, 79, 79, 0.84)",
+		"rgba(253, 90, 87, 0.92)",
+		"#ffa8a0",
+		"#ffe1df",
+		"#fff8f7"
+	],
+	light: [
+		"#ffffff",
+		"#fef8f7",
+		"#fff0ee",
+		"#ffe7e4",
+		"#ffded8",
+		"#ffcec5",
+		"#ffb9ab",
+		"#ff9c88",
+		"#ff775c",
+		"#f35837",
+		"#ce461e",
+		"#9b3206",
+		"#64260f"
+	],
+	lightA: [
+		"rgba(255, 255, 255, 0.01)",
+		"rgba(230, 80, 55, 0.04)",
+		"rgba(255, 41, 12, 0.07)",
+		"rgba(255, 37, 10, 0.11)",
+		"rgba(255, 49, 11, 0.16)",
+		"rgba(255, 42, 3, 0.23)",
+		"rgba(255, 43, 0, 0.33)",
+		"rgba(255, 44, 2, 0.47)",
+		"rgba(255, 43, 0, 0.64)",
+		"rgba(240, 44, 2, 0.79)",
+		"#ce461e",
+		"#9b3206",
+		"#64260f"
+	]
+};
+//#endregion
+export { error };
+
+//# sourceMappingURL=error.mjs.map

package/es/color/status/error.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"error.mjs","names":[],"sources":["../../../src/color/status/error.ts"],"sourcesContent":["import type { ColorScaleItem } from '../types';\n\nexport const error: ColorScaleItem = {\n  dark: [\n    '#190a09',\n    '#340b0c',\n    '#4b141a',\n    '#641f24',\n    '#8a3334',\n    '#aa3f3e',\n    '#b53a3a',\n    '#be3738',\n    '#d64242',\n    '#e95350',\n    '#ffa8a0',\n    '#ffe1df',\n    '#fff8f7',\n  ],\n  darkA: [\n    'rgba(250, 100, 90, 0.1)',\n    'rgba(248, 52, 57, 0.21)',\n    'rgba(250, 67, 87, 0.3)',\n    'rgba(250, 78, 90, 0.4)',\n    'rgba(251, 93, 95, 0.55)',\n    'rgba(254, 94, 93, 0.67)',\n    'rgba(255, 82, 82, 0.71)',\n    'rgba(253, 73, 75, 0.75)',\n    'rgba(255, 79, 79, 0.84)',\n    'rgba(253, 90, 87, 0.92)',\n    '#ffa8a0',\n    '#ffe1df',\n    '#fff8f7',\n  ],\n  light: [\n    '#ffffff',\n    '#fef8f7',\n    '#fff0ee',\n    '#ffe7e4',\n    '#ffded8',\n    '#ffcec5',\n    '#ffb9ab',\n    '#ff9c88',\n    '#ff775c',\n    '#f35837',\n    '#ce461e',\n    '#9b3206',\n    '#64260f',\n  ],\n  lightA: [\n    'rgba(255, 255, 255, 0.01)',\n    'rgba(230, 80, 55, 0.04)',\n    'rgba(255, 41, 12, 0.07)',\n    'rgba(255, 37, 10, 0.11)',\n    'rgba(255, 49, 11, 0.16)',\n    'rgba(255, 42, 3, 0.23)',\n    'rgba(255, 43, 0, 0.33)',\n    'rgba(255, 44, 2, 0.47)',\n    'rgba(255, 43, 0, 0.64)',\n    'rgba(240, 44, 2, 0.79)',\n    '#ce461e',\n    '#9b3206',\n    '#64260f',\n  ],\n};\n"],"mappings":";AAEA,MAAa,QAAwB;CACnC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

package/es/color/status/index.d.mts

@@ -0,0 +1,11 @@
+import { ColorScaleItem } from "../types.mjs";
+//#region src/color/status/index.d.ts
+export interface StatusColorScales {
+  error: ColorScaleItem;
+  info: ColorScaleItem;
+  success: ColorScaleItem;
+  warning: ColorScaleItem;
+}
+export declare const statusColorScales: StatusColorScales;
+//#endregion
+//# sourceMappingURL=index.d.mts.map

package/es/color/status/index.mjs

@@ -0,0 +1,15 @@
+import { error } from "./error.mjs";
+import { info } from "./info.mjs";
+import { success } from "./success.mjs";
+import { warning } from "./warning.mjs";
+//#region src/color/status/index.ts
+const statusColorScales = {
+	error,
+	info,
+	success,
+	warning
+};
+//#endregion
+export { statusColorScales };
+
+//# sourceMappingURL=index.mjs.map

package/es/color/status/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/color/status/index.ts"],"sourcesContent":["import type { ColorScaleItem } from '../types';\nimport { error } from './error';\nimport { info } from './info';\nimport { success } from './success';\nimport { warning } from './warning';\n\nexport interface StatusColorScales {\n  error: ColorScaleItem;\n  info: ColorScaleItem;\n  success: ColorScaleItem;\n  warning: ColorScaleItem;\n}\n\nexport const statusColorScales: StatusColorScales = {\n  error,\n  info,\n  success,\n  warning,\n};\n"],"mappings":";;;;;AAaA,MAAa,oBAAuC;CAClD;CACA;CACA;CACA;AACF"}