@persona/design-system 0.10.5 → 0.10.7

package/dist/lib/useEmbeddedSurface.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useEmbeddedSurface.mjs","names":[],"sources":["../../src/lib/useEmbeddedSurface.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport {\n  EMBEDDED_SURFACE_PROTOCOL_VERSION,\n  EMBEDDED_SURFACE_CHANNEL,\n  coerceChildboundEnvelope,\n  type EmbeddedSurfacePayloads,\n} from 'design-system/lib/embeddedSurfaceProtocol';\nimport {\n  getEmbeddedSurfaceTransport,\n  subscribeEmbeddedSurfaceTransportChanges,\n  type EmbeddedSurfaceTransport,\n} from 'design-system/lib/embeddedSurfaceRegistry';\n\nconst SURFACE_REANNOUNCE_INTERVAL_MS = 2000;\nconst HELLO_ROTATION_THRESHOLD = 2;\n/**\n * How long the overlay stays paused waiting for an acknowledgement. It has to outlast the host's\n * animation lead so a slow acknowledgement still gets used rather than raced by this fallback.\n */\nexport const EMBEDDED_SURFACE_HOST_ACK_TIMEOUT_MS = 80;\n\nlet fallbackId = 0;\ntype SurfaceSession = {\n  connectionId: string;\n  surfaces: Set<string>;\n  leaseTimer?: number;\n  unsubscribe?: () => void;\n  unansweredHellos: number;\n  epoch?: string;\n  /** Acknowledged surfaces, keyed to the shared wall-clock instant their animation starts at. */\n  acknowledgedAt: Map<string, number>;\n  acknowledgementListeners: Map<string, Set<(startAt: number) => void>>;\n};\nconst sessions = new WeakMap<EmbeddedSurfaceTransport, SurfaceSession>();\n\nconst mintId = (prefix: string): string => {\n  const randomUUID =\n    typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'\n      ? crypto.randomUUID()\n      : undefined;\n  if (randomUUID) {\n    return `${prefix}-${randomUUID}`;\n  }\n  fallbackId += 1;\n  return `${prefix}-${fallbackId.toString(36)}`;\n};\n\nconst getSession = (transport: EmbeddedSurfaceTransport) => {\n  const current = sessions.get(transport);\n  if (current) {\n    return current;\n  }\n  const session: SurfaceSession = {\n    connectionId: mintId('connection'),\n    surfaces: new Set<string>(),\n    unansweredHellos: 0,\n    acknowledgedAt: new Map<string, number>(),\n    acknowledgementListeners: new Map<string, Set<(startAt: number) => void>>(),\n  };\n  sessions.set(transport, session);\n  return session;\n};\n\nconst send = (\n  transport: EmbeddedSurfaceTransport,\n  session: SurfaceSession,\n  kind: 'hello' | 'surfaceSnapshot',\n  payload: EmbeddedSurfacePayloads['hello'] | EmbeddedSurfacePayloads['surfaceSnapshot'],\n) => {\n  transport.send({\n    channel: EMBEDDED_SURFACE_CHANNEL,\n    version: EMBEDDED_SURFACE_PROTOCOL_VERSION,\n    connectionId: session.connectionId,\n    kind,\n    payload,\n  });\n};\n\nconst sendSnapshot = (transport: EmbeddedSurfaceTransport, session: SurfaceSession) => {\n  if (session.epoch == null) {\n    return;\n  }\n  send(transport, session, 'surfaceSnapshot', {\n    epoch: session.epoch,\n    surfaces: Array.from(session.surfaces, (surfaceId) => ({ surfaceId })),\n    awaitsAck: true,\n  });\n};\n\nconst rotateConnection = (session: SurfaceSession) => {\n  // The host may have retired this connectionId in its LRU, so hellos stay dropped\n  // until a fresh connectionId is minted.\n  session.connectionId = mintId('connection');\n  session.epoch = undefined;\n  session.acknowledgedAt.clear();\n  session.unansweredHellos = 0;\n};\n\nconst acknowledgeSurface = (session: SurfaceSession, surfaceId: string, startAt: number) => {\n  if (session.acknowledgedAt.has(surfaceId)) {\n    return;\n  }\n  session.acknowledgedAt.set(surfaceId, startAt);\n  session.acknowledgementListeners.get(surfaceId)?.forEach((listener) => listener(startAt));\n};\n\nconst startSurfaceLease = (transport: EmbeddedSurfaceTransport, session: SurfaceSession) => {\n  if (session.leaseTimer != null) {\n    return;\n  }\n  // Re-announces active surfaces to renew the host's lease. If the child stops\n  // running, announcements cease and the host releases shell effects after timeout.\n  session.leaseTimer = window.setInterval(() => {\n    session.unansweredHellos += 1;\n    if (session.unansweredHellos >= HELLO_ROTATION_THRESHOLD) {\n      rotateConnection(session);\n    }\n    send(transport, session, 'hello', {});\n    sendSnapshot(transport, session);\n  }, SURFACE_REANNOUNCE_INTERVAL_MS);\n};\n\nconst stopSurfaceLease = (session: SurfaceSession) => {\n  if (session.leaseTimer == null) {\n    return;\n  }\n  window.clearInterval(session.leaseTimer);\n  session.leaseTimer = undefined;\n};\n\nconst activateSession = (transport: EmbeddedSurfaceTransport, session: SurfaceSession) => {\n  if (session.unsubscribe != null) {\n    return;\n  }\n  session.epoch = undefined;\n  session.acknowledgedAt.clear();\n  session.unansweredHellos = 0;\n  session.unsubscribe = transport.subscribe((message) => {\n    const childbound = coerceChildboundEnvelope(message);\n    if (!childbound || childbound.connectionId !== session.connectionId) {\n      return;\n    }\n    session.unansweredHellos = 0;\n    if (childbound.kind === 'welcome') {\n      if (session.epoch !== childbound.payload.epoch) {\n        session.acknowledgedAt.clear();\n      }\n      session.epoch = childbound.payload.epoch;\n      sendSnapshot(transport, session);\n      return;\n    }\n    if (childbound.payload.epoch !== session.epoch) {\n      return;\n    }\n    if (childbound.kind !== 'surfaceAck') {\n      return;\n    }\n    childbound.payload.surfaces.forEach(({ surfaceId }) => {\n      acknowledgeSurface(session, surfaceId, childbound.payload.startAt);\n    });\n  });\n  send(transport, session, 'hello', {});\n};\n\nconst deactivateSession = (session: SurfaceSession) => {\n  session.unsubscribe?.();\n  session.unsubscribe = undefined;\n  stopSurfaceLease(session);\n  session.epoch = undefined;\n  session.acknowledgedAt.clear();\n  session.unansweredHellos = 0;\n};\n\nconst useEmbeddedSurfaceTransport = (): EmbeddedSurfaceTransport | null => {\n  const [transport, setTransport] = useState<EmbeddedSurfaceTransport | null>(\n    getEmbeddedSurfaceTransport,\n  );\n\n  useEffect(() => {\n    const unsubscribe = subscribeEmbeddedSurfaceTransportChanges(() => {\n      setTransport(getEmbeddedSurfaceTransport());\n    });\n    // A transport can register between render and this effect, and the registry only\n    // notifies on change, so reconcile once the subscription is installed.\n    setTransport(getEmbeddedSurfaceTransport());\n    return unsubscribe;\n  }, []);\n\n  return transport;\n};\n\n/** Mints an id for a surface whose registration and host gate live in separate components. */\nexport const useEmbeddedSurfaceId = (): string => {\n  const [surfaceId] = useState(() => mintId('surface'));\n  return surfaceId;\n};\n\n/**\n * Announces the surface to the host for as long as the caller is mounted. Callers must render\n * only while their overlay is on screen: the host dims the shell around every announced surface,\n * and holding the announcement through React Aria's exit animation is what keeps the two halves\n * of the dim disappearing together.\n */\nexport default function useEmbeddedSurface(surfaceId?: string): void {\n  const transport = useEmbeddedSurfaceTransport();\n  const fallbackSurfaceId = useEmbeddedSurfaceId();\n  const ownSurfaceId = surfaceId ?? fallbackSurfaceId;\n\n  useEffect(() => {\n    if (!transport) {\n      return;\n    }\n    const session = getSession(transport);\n    activateSession(transport, session);\n    session.surfaces.add(ownSurfaceId);\n    if (session.surfaces.size === 1) {\n      startSurfaceLease(transport, session);\n    }\n    if (session.epoch != null) {\n      sendSnapshot(transport, session);\n    }\n\n    return () => {\n      session.surfaces.delete(ownSurfaceId);\n      session.acknowledgedAt.delete(ownSurfaceId);\n      if (session.surfaces.size === 0) {\n        if (session.epoch != null) {\n          sendSnapshot(transport, session);\n        }\n        deactivateSession(session);\n      } else {\n        sendSnapshot(transport, session);\n      }\n    };\n  }, [ownSurfaceId, transport]);\n\n  useEffect(() => {\n    if (!transport) {\n      return;\n    }\n    let active = true;\n    let pendingAnimationFrame: number | null = null;\n    const handleFocusOut = (event: FocusEvent) => {\n      if (event.relatedTarget != null) {\n        return;\n      }\n      event.stopImmediatePropagation();\n      if (!(event.target instanceof HTMLElement)) {\n        return;\n      }\n      const target = event.target;\n      if (pendingAnimationFrame != null) {\n        cancelAnimationFrame(pendingAnimationFrame);\n      }\n      pendingAnimationFrame = requestAnimationFrame(() => {\n        pendingAnimationFrame = null;\n        if (!active || !target.isConnected) {\n          return;\n        }\n        if (\n          document.hasFocus() &&\n          (document.activeElement == null || document.activeElement === document.body)\n        ) {\n          target.focus();\n        }\n      });\n    };\n    document.addEventListener('focusout', handleFocusOut, true);\n    return () => {\n      active = false;\n      if (pendingAnimationFrame != null) {\n        cancelAnimationFrame(pendingAnimationFrame);\n      }\n      document.removeEventListener('focusout', handleFocusOut, true);\n    };\n  }, [transport]);\n}\n\nexport type EmbeddedSurfaceGate = {\n  /** False while the overlay must hold its opening animation paused on its first frame. */\n  ready: boolean;\n  /**\n   * CSS `animation-delay` that lands the overlay's animation on the host's shared start instant.\n   * Negative when the acknowledgement arrived after that instant, so the animation joins in\n   * progress rather than starting late.\n   */\n  animationDelayMs: number;\n};\n\nconst PENDING_GATE: EmbeddedSurfaceGate = { ready: false, animationDelayMs: 0 };\nconst RELEASED_GATE: EmbeddedSurfaceGate = { ready: true, animationDelayMs: 0 };\n// A start instant further out than the no-ack fallback would have waited is not a schedule worth\n// honouring; with fill-mode `both` an unbounded positive delay holds the overlay hidden.\nconst releasedGateAt = (startAt: number): EmbeddedSurfaceGate => ({\n  ready: true,\n  animationDelayMs: Math.min(startAt - Date.now(), EMBEDDED_SURFACE_HOST_ACK_TIMEOUT_MS),\n});\n\n/**\n * Holds the surface's opening animation until the host acknowledges it, then reports the delay that\n * aligns the animation with the host's shared start instant. Lives outside the overlay so the gate\n * can hold the child's animation from its very first frame, before the overlay content mounts and\n * announces.\n */\nexport const useEmbeddedSurfaceGate = (surfaceId: string, isOpen: boolean): EmbeddedSurfaceGate => {\n  const transport = useEmbeddedSurfaceTransport();\n  const [gate, setGate] = useState(() =>\n    getEmbeddedSurfaceTransport() == null ? RELEASED_GATE : PENDING_GATE,\n  );\n  // The gate stays mounted while closed, so a previous cycle left the surface released. Flip back\n  // to pending during the opening render: an effect would land after the browser has painted a\n  // frame of the entrance animation. Closing leaves the gate untouched so the overlay's animation\n  // declaration is stable while React Aria watches it for an exit animation.\n  const [wasOpen, setWasOpen] = useState(isOpen);\n  if (wasOpen !== isOpen) {\n    setWasOpen(isOpen);\n    if (isOpen && transport != null) {\n      setGate(PENDING_GATE);\n    }\n  }\n\n  useEffect(() => {\n    if (!transport) {\n      setGate(RELEASED_GATE);\n      return;\n    }\n    if (!isOpen) {\n      return;\n    }\n    const session = getSession(transport);\n    const acknowledgedStartAt = session.acknowledgedAt.get(surfaceId);\n    if (acknowledgedStartAt != null) {\n      setGate(releasedGateAt(acknowledgedStartAt));\n      return;\n    }\n\n    const listeners =\n      session.acknowledgementListeners.get(surfaceId) ?? new Set<(startAt: number) => void>();\n    const unsubscribe = () => {\n      listeners.delete(release);\n      if (listeners.size === 0) {\n        session.acknowledgementListeners.delete(surfaceId);\n      }\n    };\n    // A host that never acknowledges (an older dashboard, or none at all) must not leave the\n    // overlay paused at opacity 0. Once released either way, the animation is running and a later\n    // acknowledgement must not reschedule it.\n    const fallback = window.setTimeout(() => {\n      unsubscribe();\n      setGate(RELEASED_GATE);\n    }, EMBEDDED_SURFACE_HOST_ACK_TIMEOUT_MS);\n    const release = (startAt: number) => {\n      window.clearTimeout(fallback);\n      unsubscribe();\n      setGate(releasedGateAt(startAt));\n    };\n    listeners.add(release);\n    session.acknowledgementListeners.set(surfaceId, listeners);\n\n    return () => {\n      window.clearTimeout(fallback);\n      unsubscribe();\n    };\n  }, [isOpen, surfaceId, transport]);\n\n  return gate;\n};\n"],"mappings":"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"}
+{"version":3,"file":"useEmbeddedSurface.mjs","names":[],"sources":["../../src/lib/useEmbeddedSurface.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport {\n  EMBEDDED_SURFACE_PROTOCOL_VERSION,\n  EMBEDDED_SURFACE_CHANNEL,\n  coerceChildboundEnvelope,\n  type EmbeddedSurfacePayloads,\n} from '#src/lib/embeddedSurfaceProtocol';\nimport {\n  getEmbeddedSurfaceTransport,\n  subscribeEmbeddedSurfaceTransportChanges,\n  type EmbeddedSurfaceTransport,\n} from '#src/lib/embeddedSurfaceRegistry';\n\nconst SURFACE_REANNOUNCE_INTERVAL_MS = 2000;\nconst HELLO_ROTATION_THRESHOLD = 2;\n/**\n * How long the overlay stays paused waiting for an acknowledgement. It has to outlast the host's\n * animation lead so a slow acknowledgement still gets used rather than raced by this fallback.\n */\nexport const EMBEDDED_SURFACE_HOST_ACK_TIMEOUT_MS = 80;\n\nlet fallbackId = 0;\ntype SurfaceSession = {\n  connectionId: string;\n  surfaces: Set<string>;\n  leaseTimer?: number;\n  unsubscribe?: () => void;\n  unansweredHellos: number;\n  epoch?: string;\n  /** Acknowledged surfaces, keyed to the shared wall-clock instant their animation starts at. */\n  acknowledgedAt: Map<string, number>;\n  acknowledgementListeners: Map<string, Set<(startAt: number) => void>>;\n};\nconst sessions = new WeakMap<EmbeddedSurfaceTransport, SurfaceSession>();\n\nconst mintId = (prefix: string): string => {\n  const randomUUID =\n    typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'\n      ? crypto.randomUUID()\n      : undefined;\n  if (randomUUID) {\n    return `${prefix}-${randomUUID}`;\n  }\n  fallbackId += 1;\n  return `${prefix}-${fallbackId.toString(36)}`;\n};\n\nconst getSession = (transport: EmbeddedSurfaceTransport) => {\n  const current = sessions.get(transport);\n  if (current) {\n    return current;\n  }\n  const session: SurfaceSession = {\n    connectionId: mintId('connection'),\n    surfaces: new Set<string>(),\n    unansweredHellos: 0,\n    acknowledgedAt: new Map<string, number>(),\n    acknowledgementListeners: new Map<string, Set<(startAt: number) => void>>(),\n  };\n  sessions.set(transport, session);\n  return session;\n};\n\nconst send = (\n  transport: EmbeddedSurfaceTransport,\n  session: SurfaceSession,\n  kind: 'hello' | 'surfaceSnapshot',\n  payload: EmbeddedSurfacePayloads['hello'] | EmbeddedSurfacePayloads['surfaceSnapshot'],\n) => {\n  transport.send({\n    channel: EMBEDDED_SURFACE_CHANNEL,\n    version: EMBEDDED_SURFACE_PROTOCOL_VERSION,\n    connectionId: session.connectionId,\n    kind,\n    payload,\n  });\n};\n\nconst sendSnapshot = (transport: EmbeddedSurfaceTransport, session: SurfaceSession) => {\n  if (session.epoch == null) {\n    return;\n  }\n  send(transport, session, 'surfaceSnapshot', {\n    epoch: session.epoch,\n    surfaces: Array.from(session.surfaces, (surfaceId) => ({ surfaceId })),\n    awaitsAck: true,\n  });\n};\n\nconst rotateConnection = (session: SurfaceSession) => {\n  // The host may have retired this connectionId in its LRU, so hellos stay dropped\n  // until a fresh connectionId is minted.\n  session.connectionId = mintId('connection');\n  session.epoch = undefined;\n  session.acknowledgedAt.clear();\n  session.unansweredHellos = 0;\n};\n\nconst acknowledgeSurface = (session: SurfaceSession, surfaceId: string, startAt: number) => {\n  if (session.acknowledgedAt.has(surfaceId)) {\n    return;\n  }\n  session.acknowledgedAt.set(surfaceId, startAt);\n  session.acknowledgementListeners.get(surfaceId)?.forEach((listener) => listener(startAt));\n};\n\nconst startSurfaceLease = (transport: EmbeddedSurfaceTransport, session: SurfaceSession) => {\n  if (session.leaseTimer != null) {\n    return;\n  }\n  // Re-announces active surfaces to renew the host's lease. If the child stops\n  // running, announcements cease and the host releases shell effects after timeout.\n  session.leaseTimer = window.setInterval(() => {\n    session.unansweredHellos += 1;\n    if (session.unansweredHellos >= HELLO_ROTATION_THRESHOLD) {\n      rotateConnection(session);\n    }\n    send(transport, session, 'hello', {});\n    sendSnapshot(transport, session);\n  }, SURFACE_REANNOUNCE_INTERVAL_MS);\n};\n\nconst stopSurfaceLease = (session: SurfaceSession) => {\n  if (session.leaseTimer == null) {\n    return;\n  }\n  window.clearInterval(session.leaseTimer);\n  session.leaseTimer = undefined;\n};\n\nconst activateSession = (transport: EmbeddedSurfaceTransport, session: SurfaceSession) => {\n  if (session.unsubscribe != null) {\n    return;\n  }\n  session.epoch = undefined;\n  session.acknowledgedAt.clear();\n  session.unansweredHellos = 0;\n  session.unsubscribe = transport.subscribe((message) => {\n    const childbound = coerceChildboundEnvelope(message);\n    if (!childbound || childbound.connectionId !== session.connectionId) {\n      return;\n    }\n    session.unansweredHellos = 0;\n    if (childbound.kind === 'welcome') {\n      if (session.epoch !== childbound.payload.epoch) {\n        session.acknowledgedAt.clear();\n      }\n      session.epoch = childbound.payload.epoch;\n      sendSnapshot(transport, session);\n      return;\n    }\n    if (childbound.payload.epoch !== session.epoch) {\n      return;\n    }\n    if (childbound.kind !== 'surfaceAck') {\n      return;\n    }\n    childbound.payload.surfaces.forEach(({ surfaceId }) => {\n      acknowledgeSurface(session, surfaceId, childbound.payload.startAt);\n    });\n  });\n  send(transport, session, 'hello', {});\n};\n\nconst deactivateSession = (session: SurfaceSession) => {\n  session.unsubscribe?.();\n  session.unsubscribe = undefined;\n  stopSurfaceLease(session);\n  session.epoch = undefined;\n  session.acknowledgedAt.clear();\n  session.unansweredHellos = 0;\n};\n\nconst useEmbeddedSurfaceTransport = (): EmbeddedSurfaceTransport | null => {\n  const [transport, setTransport] = useState<EmbeddedSurfaceTransport | null>(\n    getEmbeddedSurfaceTransport,\n  );\n\n  useEffect(() => {\n    const unsubscribe = subscribeEmbeddedSurfaceTransportChanges(() => {\n      setTransport(getEmbeddedSurfaceTransport());\n    });\n    // A transport can register between render and this effect, and the registry only\n    // notifies on change, so reconcile once the subscription is installed.\n    setTransport(getEmbeddedSurfaceTransport());\n    return unsubscribe;\n  }, []);\n\n  return transport;\n};\n\n/** Mints an id for a surface whose registration and host gate live in separate components. */\nexport const useEmbeddedSurfaceId = (): string => {\n  const [surfaceId] = useState(() => mintId('surface'));\n  return surfaceId;\n};\n\n/**\n * Announces the surface to the host for as long as the caller is mounted. Callers must render\n * only while their overlay is on screen: the host dims the shell around every announced surface,\n * and holding the announcement through React Aria's exit animation is what keeps the two halves\n * of the dim disappearing together.\n */\nexport default function useEmbeddedSurface(surfaceId?: string): void {\n  const transport = useEmbeddedSurfaceTransport();\n  const fallbackSurfaceId = useEmbeddedSurfaceId();\n  const ownSurfaceId = surfaceId ?? fallbackSurfaceId;\n\n  useEffect(() => {\n    if (!transport) {\n      return;\n    }\n    const session = getSession(transport);\n    activateSession(transport, session);\n    session.surfaces.add(ownSurfaceId);\n    if (session.surfaces.size === 1) {\n      startSurfaceLease(transport, session);\n    }\n    if (session.epoch != null) {\n      sendSnapshot(transport, session);\n    }\n\n    return () => {\n      session.surfaces.delete(ownSurfaceId);\n      session.acknowledgedAt.delete(ownSurfaceId);\n      if (session.surfaces.size === 0) {\n        if (session.epoch != null) {\n          sendSnapshot(transport, session);\n        }\n        deactivateSession(session);\n      } else {\n        sendSnapshot(transport, session);\n      }\n    };\n  }, [ownSurfaceId, transport]);\n\n  useEffect(() => {\n    if (!transport) {\n      return;\n    }\n    let active = true;\n    let pendingAnimationFrame: number | null = null;\n    const handleFocusOut = (event: FocusEvent) => {\n      if (event.relatedTarget != null) {\n        return;\n      }\n      event.stopImmediatePropagation();\n      if (!(event.target instanceof HTMLElement)) {\n        return;\n      }\n      const target = event.target;\n      if (pendingAnimationFrame != null) {\n        cancelAnimationFrame(pendingAnimationFrame);\n      }\n      pendingAnimationFrame = requestAnimationFrame(() => {\n        pendingAnimationFrame = null;\n        if (!active || !target.isConnected) {\n          return;\n        }\n        if (\n          document.hasFocus() &&\n          (document.activeElement == null || document.activeElement === document.body)\n        ) {\n          target.focus();\n        }\n      });\n    };\n    document.addEventListener('focusout', handleFocusOut, true);\n    return () => {\n      active = false;\n      if (pendingAnimationFrame != null) {\n        cancelAnimationFrame(pendingAnimationFrame);\n      }\n      document.removeEventListener('focusout', handleFocusOut, true);\n    };\n  }, [transport]);\n}\n\nexport type EmbeddedSurfaceGate = {\n  /** False while the overlay must hold its opening animation paused on its first frame. */\n  ready: boolean;\n  /**\n   * CSS `animation-delay` that lands the overlay's animation on the host's shared start instant.\n   * Negative when the acknowledgement arrived after that instant, so the animation joins in\n   * progress rather than starting late.\n   */\n  animationDelayMs: number;\n};\n\nconst PENDING_GATE: EmbeddedSurfaceGate = { ready: false, animationDelayMs: 0 };\nconst RELEASED_GATE: EmbeddedSurfaceGate = { ready: true, animationDelayMs: 0 };\n// A start instant further out than the no-ack fallback would have waited is not a schedule worth\n// honouring; with fill-mode `both` an unbounded positive delay holds the overlay hidden.\nconst releasedGateAt = (startAt: number): EmbeddedSurfaceGate => ({\n  ready: true,\n  animationDelayMs: Math.min(startAt - Date.now(), EMBEDDED_SURFACE_HOST_ACK_TIMEOUT_MS),\n});\n\n/**\n * Holds the surface's opening animation until the host acknowledges it, then reports the delay that\n * aligns the animation with the host's shared start instant. Lives outside the overlay so the gate\n * can hold the child's animation from its very first frame, before the overlay content mounts and\n * announces.\n */\nexport const useEmbeddedSurfaceGate = (surfaceId: string, isOpen: boolean): EmbeddedSurfaceGate => {\n  const transport = useEmbeddedSurfaceTransport();\n  const [gate, setGate] = useState(() =>\n    getEmbeddedSurfaceTransport() == null ? RELEASED_GATE : PENDING_GATE,\n  );\n  // The gate stays mounted while closed, so a previous cycle left the surface released. Flip back\n  // to pending during the opening render: an effect would land after the browser has painted a\n  // frame of the entrance animation. Closing leaves the gate untouched so the overlay's animation\n  // declaration is stable while React Aria watches it for an exit animation.\n  const [wasOpen, setWasOpen] = useState(isOpen);\n  if (wasOpen !== isOpen) {\n    setWasOpen(isOpen);\n    if (isOpen && transport != null) {\n      setGate(PENDING_GATE);\n    }\n  }\n\n  useEffect(() => {\n    if (!transport) {\n      setGate(RELEASED_GATE);\n      return;\n    }\n    if (!isOpen) {\n      return;\n    }\n    const session = getSession(transport);\n    const acknowledgedStartAt = session.acknowledgedAt.get(surfaceId);\n    if (acknowledgedStartAt != null) {\n      setGate(releasedGateAt(acknowledgedStartAt));\n      return;\n    }\n\n    const listeners =\n      session.acknowledgementListeners.get(surfaceId) ?? new Set<(startAt: number) => void>();\n    const unsubscribe = () => {\n      listeners.delete(release);\n      if (listeners.size === 0) {\n        session.acknowledgementListeners.delete(surfaceId);\n      }\n    };\n    // A host that never acknowledges (an older dashboard, or none at all) must not leave the\n    // overlay paused at opacity 0. Once released either way, the animation is running and a later\n    // acknowledgement must not reschedule it.\n    const fallback = window.setTimeout(() => {\n      unsubscribe();\n      setGate(RELEASED_GATE);\n    }, EMBEDDED_SURFACE_HOST_ACK_TIMEOUT_MS);\n    const release = (startAt: number) => {\n      window.clearTimeout(fallback);\n      unsubscribe();\n      setGate(releasedGateAt(startAt));\n    };\n    listeners.add(release);\n    session.acknowledgementListeners.set(surfaceId, listeners);\n\n    return () => {\n      window.clearTimeout(fallback);\n      unsubscribe();\n    };\n  }, [isOpen, surfaceId, transport]);\n\n  return gate;\n};\n"],"mappings":"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"}

package/dist/lint/index.d.mts

@@ -1,4 +1,4 @@
-import { n as Plugin } from "../index-BWAycP6L.mjs";
+import { n as Plugin } from "../index-B9kfFACl.mjs";
 
 //#region src/lint/index.d.ts
 /**

package/dist/{listbox-options-CkwENvff.d.mts → listbox-options-D0JmYWjB.d.mts}

@@ -1,5 +1,5 @@
-import { n as PossibleChainSchema } from "./chainTypes-aF5rWav-.mjs";
-import { a as Mode, u as ValueType } from "./types-XjJqUj-p.mjs";
+import { n as PossibleChainSchema } from "./chainTypes-CLKwXymd.mjs";
+import { a as Mode, u as ValueType } from "./types-BnXYfNrd.mjs";
 
 //#region src/components/SmartTextInput/listbox-options.d.ts
 type MethodChainOption = {
@@ -35,4 +35,4 @@ declare const getContextMenuOptions: (valueIsEmpty: boolean, allowedValueType: V
 declare const getMethodChainOptions: (options: PossibleChainSchema[]) => MethodChainOption[];
 //#endregion
 export { SmartTextInputOption as a, isContextMenuOption as c, MethodChainOption as i, isMethodChainOption as l, ContextMenuOption as n, getContextMenuOptions as o, EXIT_METHOD_CHAIN_VALUE_TYPE_OPTION as r, getMethodChainOptions as s, ContextMenuExamples as t };
-//# sourceMappingURL=listbox-options-CkwENvff.d.mts.map
+//# sourceMappingURL=listbox-options-D0JmYWjB.d.mts.map

package/dist/listbox-options.d.mts

@@ -1,2 +1,2 @@
-import { a as SmartTextInputOption, c as isContextMenuOption, i as MethodChainOption, l as isMethodChainOption, n as ContextMenuOption, o as getContextMenuOptions, r as EXIT_METHOD_CHAIN_VALUE_TYPE_OPTION, s as getMethodChainOptions, t as ContextMenuExamples } from "./listbox-options-CkwENvff.mjs";
+import { a as SmartTextInputOption, c as isContextMenuOption, i as MethodChainOption, l as isMethodChainOption, n as ContextMenuOption, o as getContextMenuOptions, r as EXIT_METHOD_CHAIN_VALUE_TYPE_OPTION, s as getMethodChainOptions, t as ContextMenuExamples } from "./listbox-options-D0JmYWjB.mjs";
 export { ContextMenuExamples, ContextMenuOption, EXIT_METHOD_CHAIN_VALUE_TYPE_OPTION, MethodChainOption, SmartTextInputOption, getContextMenuOptions, getMethodChainOptions, isContextMenuOption, isMethodChainOption };

package/dist/{message-klSuXfNN.d.mts → message-Bk5UTw75.d.mts}

@@ -6,4 +6,4 @@ declare enum MessageType {
 }
 //#endregion
 export { MessageType as t };
-//# sourceMappingURL=message-klSuXfNN.d.mts.map
+//# sourceMappingURL=message-Bk5UTw75.d.mts.map

package/dist/{methodChain-CRYRDa1k.d.mts → methodChain-C3u60_V8.d.mts}

@@ -1,6 +1,6 @@
-import { u as ASTNodeType } from "./types-C2RhHxbE.mjs";
-import { n as JsonSchema } from "./jsonSchema-DUkfAip_.mjs";
-import { a as FunctionParamType, c as NumberNode, i as FunctionNode, l as StringNode, n as Chain, o as IdentifierNode, r as CustomFunctionNode, s as MethodChainNode, t as ArrayNode } from "./methodChainTypes-BtbYWrdP.mjs";
+import { u as ASTNodeType } from "./types-Bu5rhBdH.mjs";
+import { n as JsonSchema } from "./jsonSchema-BJpNaFc4.mjs";
+import { a as FunctionParamType, c as NumberNode, i as FunctionNode, l as StringNode, n as Chain, o as IdentifierNode, r as CustomFunctionNode, s as MethodChainNode, t as ArrayNode } from "./methodChainTypes-Di4GCMX7.mjs";
 
 //#region src/components/SmartTextInput/parser/method-chain/parser.d.ts
 declare class SyntaxError extends Error {
@@ -63,4 +63,4 @@ declare const getSyntaxError: () => typeof SyntaxError;
 declare const methodChainNodeToJsonSchema: (node: StringNode | NumberNode | ArrayNode) => JsonSchema | null;
 //#endregion
 export { tryParseMethodChain as C, removeFunctionNode as S, methodChainToString as _, getFunctionParams as a, pathContainsFunctionNode as b, isCustomFunctionNode as c, isIdentifierNode as d, isStringNode as f, methodChainRootName as g, methodChainNodeToJsonSchema as h, containsFunctionNode as i, isEmpty as l, methodChainCache as m, MethodChainNodeTypes as n, getSyntaxError as o, isValid as p, appendedMethodChain as r, isArrayNode as s, EMPTY_METHOD_CHAIN as t, isFunctionNode as u, parseMethodChain as v, pathIsNormative as x, parseWithPartialOption as y };
-//# sourceMappingURL=methodChain-CRYRDa1k.d.mts.map
+//# sourceMappingURL=methodChain-C3u60_V8.d.mts.map

package/dist/{methodChainTypes-BtbYWrdP.d.mts → methodChainTypes-Di4GCMX7.d.mts}

@@ -1,4 +1,4 @@
-import { c as ASTIdentifierNode, d as ASTNumberNode, m as ASTStringNode, n as ASTChain, o as ASTFunctionNode, r as ASTCustomFunctionNode, t as ASTArrayNode } from "./types-C2RhHxbE.mjs";
+import { c as ASTIdentifierNode, d as ASTNumberNode, m as ASTStringNode, n as ASTChain, o as ASTFunctionNode, r as ASTCustomFunctionNode, t as ASTArrayNode } from "./types-Bu5rhBdH.mjs";
 
 //#region src/lib/methodChainTypes.d.ts
 type MethodChainNode = IdentifierNode | FunctionNode | CustomFunctionNode;
@@ -20,4 +20,4 @@ type CustomFunctionNode = Omit<ASTCustomFunctionNode, 'children' | 'start' | 'en
 };
 //#endregion
 export { FunctionParamType as a, NumberNode as c, FunctionNode as i, StringNode as l, Chain as n, IdentifierNode as o, CustomFunctionNode as r, MethodChainNode as s, ArrayNode as t };
-//# sourceMappingURL=methodChainTypes-BtbYWrdP.d.mts.map
+//# sourceMappingURL=methodChainTypes-Di4GCMX7.d.mts.map

package/dist/min-copy-size.d.mts

@@ -1,4 +1,4 @@
-import { r as Rule } from "./index-BWAycP6L.mjs";
+import { r as Rule } from "./index-B9kfFACl.mjs";
 
 //#region src/lint/rules/min-copy-size.d.ts
 declare const minCopySize: Rule;

package/dist/mixins/focus.d.mts

@@ -1,4 +1,4 @@
-import { t as PseudoClassProps } from "../PseudoClassProps-D_f-JUT1.mjs";
+import { t as PseudoClassProps } from "../PseudoClassProps-D-sdJdnG.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region src/mixins/focus.d.ts

package/dist/mixins/focus.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"focus.mjs","names":[],"sources":["../../src/mixins/focus.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { isFocusedVisible, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { type MaybeSemanticTheme, semanticColor } from 'design-system/lib/semanticColor';\n\nconst focusColor = (theme: MaybeSemanticTheme) =>\n  semanticColor(theme, 'BorderFocus', Color.BorderFocus);\n\nexport const focusStyle = css`\n  outline-offset: 1px;\n  outline: ${({ theme }) => focusColor(theme)} solid 2px;\n`;\n\nexport const focusOutline = css`\n  outline: none;\n\n  &:focus-visible {\n    outline-offset: 1px;\n    outline: ${({ theme }) => focusColor(theme)} solid 2px;\n  }\n`;\n\nexport const focusOutlineControlled = css`\n  outline: none;\n\n  &${isFocusedVisible}${isNotDisabled} {\n    outline-offset: 1px;\n    outline: ${({ theme }) => focusColor(theme)} solid 2px;\n  }\n`;\n\nexport const focusWithinOutline = css`\n  &:focus-within {\n    outline-offset: 1px;\n    outline: ${({ theme }) => focusColor(theme)} solid 2px;\n  }\n`;\n"],"mappings":";;;;;AAMA,MAAM,cAAc,UAClB,cAAc,OAAO,eAAe,MAAM,YAAY;AAExD,MAAa,aAAa,GAAG;;cAEf,EAAE,YAAY,WAAW,MAAM,CAAC;;AAG9C,MAAa,eAAe,GAAG;;;;;gBAKf,EAAE,YAAY,WAAW,MAAM,CAAC;;;AAIhD,MAAa,yBAAyB,GAAG;;;KAGpC,mBAAmB,cAAc;;gBAEtB,EAAE,YAAY,WAAW,MAAM,CAAC;;;AAIhD,MAAa,qBAAqB,GAAG;;;gBAGrB,EAAE,YAAY,WAAW,MAAM,CAAC"}
+{"version":3,"file":"focus.mjs","names":[],"sources":["../../src/mixins/focus.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\n\nimport { isFocusedVisible, isNotDisabled } from '#src/lib/pseudoClass';\nimport { type MaybeSemanticTheme, semanticColor } from '#src/lib/semanticColor';\n\nconst focusColor = (theme: MaybeSemanticTheme) =>\n  semanticColor(theme, 'BorderFocus', Color.BorderFocus);\n\nexport const focusStyle = css`\n  outline-offset: 1px;\n  outline: ${({ theme }) => focusColor(theme)} solid 2px;\n`;\n\nexport const focusOutline = css`\n  outline: none;\n\n  &:focus-visible {\n    outline-offset: 1px;\n    outline: ${({ theme }) => focusColor(theme)} solid 2px;\n  }\n`;\n\nexport const focusOutlineControlled = css`\n  outline: none;\n\n  &${isFocusedVisible}${isNotDisabled} {\n    outline-offset: 1px;\n    outline: ${({ theme }) => focusColor(theme)} solid 2px;\n  }\n`;\n\nexport const focusWithinOutline = css`\n  &:focus-within {\n    outline-offset: 1px;\n    outline: ${({ theme }) => focusColor(theme)} solid 2px;\n  }\n`;\n"],"mappings":";;;;;AAOA,MAAM,cAAc,UAClB,cAAc,OAAO,eAAe,MAAM,YAAY;AAExD,MAAa,aAAa,GAAG;;cAEf,EAAE,YAAY,WAAW,MAAM,CAAC;;AAG9C,MAAa,eAAe,GAAG;;;;;gBAKf,EAAE,YAAY,WAAW,MAAM,CAAC;;;AAIhD,MAAa,yBAAyB,GAAG;;;KAGpC,mBAAmB,cAAc;;gBAEtB,EAAE,YAAY,WAAW,MAAM,CAAC;;;AAIhD,MAAa,qBAAqB,GAAG;;;gBAGrB,EAAE,YAAY,WAAW,MAAM,CAAC"}

package/dist/mixins/hoverable.d.mts

@@ -1,5 +1,5 @@
-import { o as Variant } from "../theme-mQ4WkH90.mjs";
-import { t as PseudoClassProps } from "../PseudoClassProps-D_f-JUT1.mjs";
+import { o as Variant } from "../theme-BFP-_PEh.mjs";
+import { t as PseudoClassProps } from "../PseudoClassProps-D-sdJdnG.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region src/mixins/hoverable.d.ts

package/dist/mixins/hoverable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"hoverable.mjs","names":[],"sources":["../../src/mixins/hoverable.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport type { Variant } from 'design-system/theme';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { Elevation } from 'design-system/variables/effect';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ninterface HoverableMixinProps extends PseudoClassProps {\n  variant?: Variant;\n}\n\nexport const hoverMixin = css<HoverableMixinProps>`\n  box-shadow:\n    0 0 0 3px transparent,\n    ${Elevation.Mid};\n`;\n\n/**\n * Adds an outline for a11y when focused, and a shadow when hovered.\n */\nconst hoverableMixin = css<HoverableMixinProps>`\n  cursor: pointer;\n  &${isDisabled} {\n    cursor: not-allowed;\n  }\n\n  transition: box-shadow ${TransitionDuration.Fast};\n\n  &${isHovered}${isNotDisabled} {\n    ${hoverMixin};\n  }\n\n  ${focusOutlineControlled}\n`;\n\nexport default hoverableMixin;\n"],"mappings":";;;;;;AAaA,MAAa,aAAa,GAAwB;;;mFAG9B;;;;;AAMpB,MAAM,iBAAiB,GAAwB;;KAE1C,WAAW;;;;mCAImC;;KAE9C,YAAY,cAAc;MACzB,WAAW;;;IAGb,uBAAuB"}
+{"version":3,"file":"hoverable.mjs","names":[],"sources":["../../src/mixins/hoverable.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { isDisabled, isHovered, isNotDisabled } from '#src/lib/pseudoClass';\nimport { focusOutlineControlled } from '#src/mixins/focus';\nimport type { Variant } from '#src/theme';\nimport type PseudoClassProps from '#src/types/PseudoClassProps';\nimport { Elevation } from '#src/variables/effect';\nimport { TransitionDuration } from '#src/variables/transitions';\n\ninterface HoverableMixinProps extends PseudoClassProps {\n  variant?: Variant;\n}\n\nexport const hoverMixin = css<HoverableMixinProps>`\n  box-shadow:\n    0 0 0 3px transparent,\n    ${Elevation.Mid};\n`;\n\n/**\n * Adds an outline for a11y when focused, and a shadow when hovered.\n */\nconst hoverableMixin = css<HoverableMixinProps>`\n  cursor: pointer;\n  &${isDisabled} {\n    cursor: not-allowed;\n  }\n\n  transition: box-shadow ${TransitionDuration.Fast};\n\n  &${isHovered}${isNotDisabled} {\n    ${hoverMixin};\n  }\n\n  ${focusOutlineControlled}\n`;\n\nexport default hoverableMixin;\n"],"mappings":";;;;;;AAaA,MAAa,aAAa,GAAwB;;;mFAG9B;;;;;AAMpB,MAAM,iBAAiB,GAAwB;;KAE1C,WAAW;;;;mCAImC;;KAE9C,YAAY,cAAc;MACzB,WAAW;;;IAGb,uBAAuB"}

package/dist/mixins/input.d.mts

@@ -1,2 +1,2 @@
-import { n as InputSizes, r as inputMixin, t as InputMixinProps } from "../input-gtTnb9M8.mjs";
+import { n as InputSizes, r as inputMixin, t as InputMixinProps } from "../input-RTMLTvG1.mjs";
 export { InputMixinProps, InputSizes, inputMixin as default };

package/dist/mixins/input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"input.mjs","names":[],"sources":["../../src/mixins/input.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { withAlpha } from 'design-system/lib/color';\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticColor, semanticTokens } from 'design-system/lib/semanticColor';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { printMixins } from 'design-system/mixins/print';\nimport type ErrorProps from 'design-system/types/ErrorProps';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport type InputSizes = 'md' | 'sm';\n\nexport interface InputMixinProps extends ErrorProps, PseudoClassProps {\n  $size?: InputSizes;\n}\n\n/**\n * Provides input-like hover and focus outline effects. Can also be applied to\n * non-input elements (like divs) to give input-like styles.\n */\nconst inputMixin = css<InputMixinProps>`\n  background: ${({ theme }) =>\n    semanticColor(theme, 'InputSurfaceDefault', theme.color.background.primary)};\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n  border-width: 1px;\n  border-style: solid;\n  border-color: ${({ theme }) => semanticColor(theme, 'InputBorderDefault', theme.color.border.input)};\n  box-sizing: border-box;\n  border-radius: ${({ theme }) => theme.element.borderRadius};\n\n  width: 100%;\n  min-width: 0;\n\n  ${focusOutlineControlled}\n\n  text-decoration: none;\n  transition-duration: ${TransitionDuration.Fast};\n  transition-property: background-color, color, border-color, width, height;\n\n  /* Some input-likes like <select/> reduce opacity when disabled */\n  opacity: 1;\n\n  &::placeholder {\n    font-weight: ${({ theme }) => theme.text.paragraph.md.fontWeight};\n    color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.tertiary)};\n  }\n\n  &${isDisabled} {\n    background: ${({ theme }) => {\n      const tokens = semanticTokens(theme);\n      return tokens\n        ? withAlpha(tokens.InputSurfaceDisabled, tokens.Opacity65)\n        : theme.color.background.disabled;\n    }};\n    border-color: ${({ theme }) =>\n      semanticColor(theme, 'InputBorderDisabled', theme.color.border.disabled)};\n    color: ${({ theme }) => semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n    ::placeholder {\n      color: ${({ theme }) => semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n    }\n  }\n\n  &${isHovered}${isNotDisabled} {\n    ${({ theme }) => {\n      const tokens = semanticTokens(theme);\n      return tokens\n        ? css`\n            background: ${tokens.InputSurfaceHover};\n            border-color: ${tokens.InputBorderHover};\n          `\n        : css`\n            border-color: ${theme.color.border.inputHover};\n          `;\n    }}\n  }\n\n  ${({ $size }) => {\n    switch ($size) {\n      default:\n      case 'md':\n        return css`\n          height: ${({ theme }) => theme.element.height.xs};\n          padding-top: ${Spacing[2]};\n          padding-right: ${Spacing[3]};\n          padding-bottom: ${Spacing[2]};\n          padding-left: ${Spacing[3]};\n          ${Typography.TextMedium};\n        `;\n      case 'sm':\n        return css`\n          height: 24px;\n          padding-top: ${Spacing[1]};\n          padding-right: ${Spacing[2]};\n          padding-bottom: ${Spacing[1]};\n          padding-left: ${Spacing[2]};\n          ${Typography.TextSmall};\n        `;\n    }\n  }}\n\n  /* Validation borders are for enabled fields only. Disabled fields keep the\n     disabled border above, whose :disabled selector outranks this bare rule. */\n  ${({ theme, hasError, hasWarning }) => {\n    if (hasError) {\n      const danger = semanticColor(theme, 'BorderDanger', theme.color.variants.danger.default);\n      return css`\n        border-color: ${danger};\n\n        &${isHovered}${isNotDisabled} {\n          border-color: ${danger};\n        }\n      `;\n    }\n\n    if (hasWarning) {\n      const warning = semanticColor(theme, 'BorderWarning', Color.CoreOrange700);\n      return css`\n        border-color: ${warning};\n\n        &${isHovered}${isNotDisabled} {\n          border-color: ${warning};\n        }\n      `;\n    }\n\n    return css`\n      border-color: ${semanticColor(theme, 'InputBorderDefault', theme.color.border.input)};\n    `;\n  }}\n\n  ${printMixins.hide}\n`;\n\nexport default inputMixin;\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,aAAa,GAAoB;iBACtB,EAAE,YACf,cAAc,OAAO,uBAAuB,MAAM,MAAM,WAAW,QAAQ,CAAC;YACpE,EAAE,YAAY,cAAc,OAAO,aAAa,MAAM,MAAM,KAAK,QAAQ,CAAC;;;mBAGnE,EAAE,YAAY,cAAc,OAAO,sBAAsB,MAAM,MAAM,OAAO,MAAM,CAAC;;oBAElF,EAAE,YAAY,MAAM,QAAQ,aAAa;;;;;IAKzD,uBAAuB;;;iCAGsB;;;;;;;oBAO7B,EAAE,YAAY,MAAM,KAAK,UAAU,GAAG,WAAW;cACvD,EAAE,YAAY,cAAc,OAAO,eAAe,MAAM,MAAM,KAAK,SAAS,CAAC;;;KAGtF,WAAW;mBACG,EAAE,YAAY;CAC3B,MAAM,SAAS,eAAe,MAAM;AACpC,QAAO,SACH,UAAU,OAAO,sBAAsB,OAAO,UAAU,GACxD,MAAM,MAAM,WAAW;EAC3B;qBACe,EAAE,YACjB,cAAc,OAAO,uBAAuB,MAAM,MAAM,OAAO,SAAS,CAAC;cACjE,EAAE,YAAY,cAAc,OAAO,cAAc,MAAM,MAAM,KAAK,SAAS,CAAC;;gBAE1E,EAAE,YAAY,cAAc,OAAO,cAAc,MAAM,MAAM,KAAK,SAAS,CAAC;;;;KAIvF,YAAY,cAAc;OACxB,EAAE,YAAY;CACf,MAAM,SAAS,eAAe,MAAM;AACpC,QAAO,SACH,GAAG;0BACa,OAAO,kBAAkB;4BACvB,OAAO,iBAAiB;cAE1C,GAAG;4BACe,MAAM,MAAM,OAAO,WAAW;;EAEpD;;;KAGD,EAAE,YAAY;AACf,SAAQ,OAAR;EACE;EACA,KAAK,KACH,QAAO,GAAG;qBACG,EAAE,YAAY,MAAM,QAAQ,OAAO,GAAG;yBAClC,QAAQ,GAAG;2BACT,QAAQ,GAAG;4BACV,QAAQ,GAAG;0BACb,QAAQ,GAAG;YACzB,WAAW,WAAW;;EAE5B,KAAK,KACH,QAAO,GAAG;;yBAEO,QAAQ,GAAG;2BACT,QAAQ,GAAG;4BACV,QAAQ,GAAG;0BACb,QAAQ,GAAG;YACzB,WAAW,UAAU;;;EAG7B;;;;KAIC,EAAE,OAAO,UAAU,iBAAiB;AACrC,KAAI,UAAU;EACZ,MAAM,SAAS,cAAc,OAAO,gBAAgB,MAAM,MAAM,SAAS,OAAO,QAAQ;AACxF,SAAO,GAAG;wBACQ,OAAO;;WAEpB,YAAY,cAAc;0BACX,OAAO;;;;AAK7B,KAAI,YAAY;EACd,MAAM,UAAU,cAAc,OAAO,iBAAiB,MAAM,cAAc;AAC1E,SAAO,GAAG;wBACQ,QAAQ;;WAErB,YAAY,cAAc;0BACX,QAAQ;;;;AAK9B,QAAO,GAAG;sBACQ,cAAc,OAAO,sBAAsB,MAAM,MAAM,OAAO,MAAM,CAAC;;EAEvF;;IAEA,YAAY,KAAK"}
+{"version":3,"file":"input.mjs","names":[],"sources":["../../src/mixins/input.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\n\nimport { withAlpha } from '#src/lib/color';\nimport { isDisabled, isHovered, isNotDisabled } from '#src/lib/pseudoClass';\nimport { semanticColor, semanticTokens } from '#src/lib/semanticColor';\nimport { focusOutlineControlled } from '#src/mixins/focus';\nimport { printMixins } from '#src/mixins/print';\nimport type ErrorProps from '#src/types/ErrorProps';\nimport type PseudoClassProps from '#src/types/PseudoClassProps';\nimport { TransitionDuration } from '#src/variables/transitions';\n\nexport type InputSizes = 'md' | 'sm';\n\nexport interface InputMixinProps extends ErrorProps, PseudoClassProps {\n  $size?: InputSizes;\n}\n\n/**\n * Provides input-like hover and focus outline effects. Can also be applied to\n * non-input elements (like divs) to give input-like styles.\n */\nconst inputMixin = css<InputMixinProps>`\n  background: ${({ theme }) =>\n    semanticColor(theme, 'InputSurfaceDefault', theme.color.background.primary)};\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n  border-width: 1px;\n  border-style: solid;\n  border-color: ${({ theme }) => semanticColor(theme, 'InputBorderDefault', theme.color.border.input)};\n  box-sizing: border-box;\n  border-radius: ${({ theme }) => theme.element.borderRadius};\n\n  width: 100%;\n  min-width: 0;\n\n  ${focusOutlineControlled}\n\n  text-decoration: none;\n  transition-duration: ${TransitionDuration.Fast};\n  transition-property: background-color, color, border-color, width, height;\n\n  /* Some input-likes like <select/> reduce opacity when disabled */\n  opacity: 1;\n\n  &::placeholder {\n    font-weight: ${({ theme }) => theme.text.paragraph.md.fontWeight};\n    color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.tertiary)};\n  }\n\n  &${isDisabled} {\n    background: ${({ theme }) => {\n      const tokens = semanticTokens(theme);\n      return tokens\n        ? withAlpha(tokens.InputSurfaceDisabled, tokens.Opacity65)\n        : theme.color.background.disabled;\n    }};\n    border-color: ${({ theme }) =>\n      semanticColor(theme, 'InputBorderDisabled', theme.color.border.disabled)};\n    color: ${({ theme }) => semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n    ::placeholder {\n      color: ${({ theme }) => semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n    }\n  }\n\n  &${isHovered}${isNotDisabled} {\n    ${({ theme }) => {\n      const tokens = semanticTokens(theme);\n      return tokens\n        ? css`\n            background: ${tokens.InputSurfaceHover};\n            border-color: ${tokens.InputBorderHover};\n          `\n        : css`\n            border-color: ${theme.color.border.inputHover};\n          `;\n    }}\n  }\n\n  ${({ $size }) => {\n    switch ($size) {\n      default:\n      case 'md':\n        return css`\n          height: ${({ theme }) => theme.element.height.xs};\n          padding-top: ${Spacing[2]};\n          padding-right: ${Spacing[3]};\n          padding-bottom: ${Spacing[2]};\n          padding-left: ${Spacing[3]};\n          ${Typography.TextMedium};\n        `;\n      case 'sm':\n        return css`\n          height: 24px;\n          padding-top: ${Spacing[1]};\n          padding-right: ${Spacing[2]};\n          padding-bottom: ${Spacing[1]};\n          padding-left: ${Spacing[2]};\n          ${Typography.TextSmall};\n        `;\n    }\n  }}\n\n  /* Validation borders are for enabled fields only. Disabled fields keep the\n     disabled border above, whose :disabled selector outranks this bare rule. */\n  ${({ theme, hasError, hasWarning }) => {\n    if (hasError) {\n      const danger = semanticColor(theme, 'BorderDanger', theme.color.variants.danger.default);\n      return css`\n        border-color: ${danger};\n\n        &${isHovered}${isNotDisabled} {\n          border-color: ${danger};\n        }\n      `;\n    }\n\n    if (hasWarning) {\n      const warning = semanticColor(theme, 'BorderWarning', Color.CoreOrange700);\n      return css`\n        border-color: ${warning};\n\n        &${isHovered}${isNotDisabled} {\n          border-color: ${warning};\n        }\n      `;\n    }\n\n    return css`\n      border-color: ${semanticColor(theme, 'InputBorderDefault', theme.color.border.input)};\n    `;\n  }}\n\n  ${printMixins.hide}\n`;\n\nexport default inputMixin;\n"],"mappings":";;;;;;;;;;;;;AAuBA,MAAM,aAAa,GAAoB;iBACtB,EAAE,YACf,cAAc,OAAO,uBAAuB,MAAM,MAAM,WAAW,QAAQ,CAAC;YACpE,EAAE,YAAY,cAAc,OAAO,aAAa,MAAM,MAAM,KAAK,QAAQ,CAAC;;;mBAGnE,EAAE,YAAY,cAAc,OAAO,sBAAsB,MAAM,MAAM,OAAO,MAAM,CAAC;;oBAElF,EAAE,YAAY,MAAM,QAAQ,aAAa;;;;;IAKzD,uBAAuB;;;iCAGsB;;;;;;;oBAO7B,EAAE,YAAY,MAAM,KAAK,UAAU,GAAG,WAAW;cACvD,EAAE,YAAY,cAAc,OAAO,eAAe,MAAM,MAAM,KAAK,SAAS,CAAC;;;KAGtF,WAAW;mBACG,EAAE,YAAY;CAC3B,MAAM,SAAS,eAAe,MAAM;AACpC,QAAO,SACH,UAAU,OAAO,sBAAsB,OAAO,UAAU,GACxD,MAAM,MAAM,WAAW;EAC3B;qBACe,EAAE,YACjB,cAAc,OAAO,uBAAuB,MAAM,MAAM,OAAO,SAAS,CAAC;cACjE,EAAE,YAAY,cAAc,OAAO,cAAc,MAAM,MAAM,KAAK,SAAS,CAAC;;gBAE1E,EAAE,YAAY,cAAc,OAAO,cAAc,MAAM,MAAM,KAAK,SAAS,CAAC;;;;KAIvF,YAAY,cAAc;OACxB,EAAE,YAAY;CACf,MAAM,SAAS,eAAe,MAAM;AACpC,QAAO,SACH,GAAG;0BACa,OAAO,kBAAkB;4BACvB,OAAO,iBAAiB;cAE1C,GAAG;4BACe,MAAM,MAAM,OAAO,WAAW;;EAEpD;;;KAGD,EAAE,YAAY;AACf,SAAQ,OAAR;EACE;EACA,KAAK,KACH,QAAO,GAAG;qBACG,EAAE,YAAY,MAAM,QAAQ,OAAO,GAAG;yBAClC,QAAQ,GAAG;2BACT,QAAQ,GAAG;4BACV,QAAQ,GAAG;0BACb,QAAQ,GAAG;YACzB,WAAW,WAAW;;EAE5B,KAAK,KACH,QAAO,GAAG;;yBAEO,QAAQ,GAAG;2BACT,QAAQ,GAAG;4BACV,QAAQ,GAAG;0BACb,QAAQ,GAAG;YACzB,WAAW,UAAU;;;EAG7B;;;;KAIC,EAAE,OAAO,UAAU,iBAAiB;AACrC,KAAI,UAAU;EACZ,MAAM,SAAS,cAAc,OAAO,gBAAgB,MAAM,MAAM,SAAS,OAAO,QAAQ;AACxF,SAAO,GAAG;wBACQ,OAAO;;WAEpB,YAAY,cAAc;0BACX,OAAO;;;;AAK7B,KAAI,YAAY;EACd,MAAM,UAAU,cAAc,OAAO,iBAAiB,MAAM,cAAc;AAC1E,SAAO,GAAG;wBACQ,QAAQ;;WAErB,YAAY,cAAc;0BACX,QAAQ;;;;AAK9B,QAAO,GAAG;sBACQ,cAAc,OAAO,sBAAsB,MAAM,MAAM,OAAO,MAAM,CAAC;;EAEvF;;IAEA,YAAY,KAAK"}

package/dist/mixins/menuItem.d.mts

@@ -1,5 +1,5 @@
-import { o as Variant } from "../theme-mQ4WkH90.mjs";
-import { t as PseudoClassProps } from "../PseudoClassProps-D_f-JUT1.mjs";
+import { o as Variant } from "../theme-BFP-_PEh.mjs";
+import { t as PseudoClassProps } from "../PseudoClassProps-D-sdJdnG.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region src/mixins/menuItem.d.ts

package/dist/mixins/menuItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"menuItem.mjs","names":[],"sources":["../../src/mixins/menuItem.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { withAlpha } from 'design-system/lib/color';\nimport { semanticColor, semanticTokens } from 'design-system/lib/semanticColor';\nimport type { PersonaTheme, Variant } from 'design-system/theme';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ninterface MenuItemMixinProps extends PseudoClassProps {\n  variant?: Variant;\n}\n\nconst iconStrokeReset = css`\n  svg.pds-icon {\n    * {\n      stroke: unset;\n    }\n    /* Support icons with stroke */\n    *[stroke] {\n      stroke: currentColor;\n    }\n  }\n`;\n\nconst hoverColor = (theme: PersonaTheme, variant: Variant) => {\n  const tokens = semanticTokens(theme);\n  if (tokens) {\n    return variant === 'danger' ? tokens.FgDanger2 : tokens.FgPrimary;\n  }\n  if (variant === 'basic') {\n    return theme.color.text.primary;\n  }\n  if (variant === 'danger') {\n    return Color.CoreRed900;\n  }\n  return theme.color.variants[variant].default;\n};\n\n/**\n * Adds styles for hovered and selected states. For use with dropdowns, menu\n * items, etc.\n *\n * The mixins are split by interaction state for more flexibility. We need to\n * implement each state differently when used with React Router's NavLink, for\n * example.\n *\n * Note that we override the palette for 'basic' to match the neutral usecase\n * shown in the mocks. There are never menu items that match our basic palette.\n *\n * Default: standard and disabled styles\n * Hover: hover and focus styles\n * Active: active styles\n */\nconst menuItemMixins = {\n  default: css<MenuItemMixinProps>`\n    cursor: pointer;\n    color: ${({ theme, variant = 'basic' }) => {\n      const tokens = semanticTokens(theme);\n      if (tokens) {\n        return variant === 'danger' ? tokens.FgDanger1 : tokens.FgPrimary;\n      }\n      // default text color for these two should be neutral\n      return ['basic', 'primary'].includes(variant)\n        ? theme.color.text.primary\n        : theme.color.variants[variant].default;\n    }};\n\n    ${({ theme }) => css`\n      background-color: ${semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n      border-radius: ${theme.element.borderRadius};\n    `}\n\n    ${({ theme, disabled, variant = 'basic' }) => {\n      if (disabled) {\n        const disabledColor = semanticColor(theme, 'FgDisabled', theme.color.text.disabled);\n        return css`\n          background-color: ${semanticColor(\n            theme,\n            'SurfacePrimary',\n            theme.color.background.primary,\n          )};\n          color: ${disabledColor};\n          cursor: default;\n\n          svg * {\n            stroke: ${disabledColor};\n          }\n\n          ${iconStrokeReset}\n        `;\n      }\n\n      const tokens = semanticTokens(theme);\n      return (\n        tokens &&\n        variant === 'basic' &&\n        css`\n          svg * {\n            stroke: ${tokens.FgPrimary};\n          }\n\n          ${iconStrokeReset}\n        `\n      );\n    }}\n  `,\n  hover: css<MenuItemMixinProps>`\n    transition-duration: ${TransitionDuration.Fast};\n    color: ${({ theme, variant = 'basic' }) => hoverColor(theme, variant)};\n\n    background-color: ${({ theme, variant = 'basic' }) => {\n      const tokens = semanticTokens(theme);\n      if (tokens) {\n        return variant === 'danger'\n          ? withAlpha(tokens.FeedbackDanger1, tokens.Opacity25)\n          : tokens.SurfaceHover;\n      }\n      return variant === 'basic'\n        ? theme.color.background.secondary\n        : theme.color.variants[variant].highlightLight;\n    }};\n\n    ${({ theme, disabled, variant = 'basic' }) =>\n      !disabled &&\n      css`\n        svg * {\n          stroke: ${hoverColor(theme, variant)};\n        }\n\n        ${iconStrokeReset}\n      `}\n  `,\n  active: css<MenuItemMixinProps>`\n    transition-duration: ${TransitionDuration.Fast};\n    color: ${({ theme, variant = 'basic' }) => {\n      const tokens = semanticTokens(theme);\n      if (tokens) {\n        if (variant === 'basic') {\n          return tokens.FgAccent;\n        }\n        return variant === 'danger' ? tokens.FgDanger2 : tokens.FgPrimary;\n      }\n      return variant === 'basic' ? theme.color.text.inverse : theme.color.variants[variant].default;\n    }};\n    background-color: ${({ theme, variant = 'basic' }) => {\n      const tokens = semanticTokens(theme);\n      if (tokens) {\n        if (variant === 'basic') {\n          return withAlpha(tokens.SurfaceAccent, tokens.Opacity25);\n        }\n        return variant === 'danger'\n          ? withAlpha(tokens.FeedbackDanger1, tokens.Opacity25)\n          : tokens.SurfaceSecondary;\n      }\n      return variant === 'basic'\n        ? theme.color.primary.brand\n        : theme.color.variants[variant].highlightLight;\n    }};\n\n    ${({ theme, disabled, variant = 'basic' }) =>\n      !disabled &&\n      css`\n        svg * {\n          stroke: ${(() => {\n            const tokens = semanticTokens(theme);\n            if (tokens) {\n              if (variant === 'basic') {\n                return tokens.FgAccent;\n              }\n              return variant === 'danger' ? tokens.FgDanger2 : tokens.FgPrimary;\n            }\n            if (variant === 'basic') {\n              return theme.color.text.primary;\n            }\n            if (variant === 'danger') {\n              return Color.CoreRed900;\n            }\n            return theme.color.variants[variant].default;\n          })()};\n        }\n\n        ${iconStrokeReset}\n      `}\n  `,\n};\n\nexport default menuItemMixins;\n"],"mappings":"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"}
+{"version":3,"file":"menuItem.mjs","names":[],"sources":["../../src/mixins/menuItem.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\n\nimport { withAlpha } from '#src/lib/color';\nimport { semanticColor, semanticTokens } from '#src/lib/semanticColor';\nimport type { PersonaTheme, Variant } from '#src/theme';\nimport type PseudoClassProps from '#src/types/PseudoClassProps';\nimport { TransitionDuration } from '#src/variables/transitions';\n\ninterface MenuItemMixinProps extends PseudoClassProps {\n  variant?: Variant;\n}\n\nconst iconStrokeReset = css`\n  svg.pds-icon {\n    * {\n      stroke: unset;\n    }\n    /* Support icons with stroke */\n    *[stroke] {\n      stroke: currentColor;\n    }\n  }\n`;\n\nconst hoverColor = (theme: PersonaTheme, variant: Variant) => {\n  const tokens = semanticTokens(theme);\n  if (tokens) {\n    return variant === 'danger' ? tokens.FgDanger2 : tokens.FgPrimary;\n  }\n  if (variant === 'basic') {\n    return theme.color.text.primary;\n  }\n  if (variant === 'danger') {\n    return Color.CoreRed900;\n  }\n  return theme.color.variants[variant].default;\n};\n\n/**\n * Adds styles for hovered and selected states. For use with dropdowns, menu\n * items, etc.\n *\n * The mixins are split by interaction state for more flexibility. We need to\n * implement each state differently when used with React Router's NavLink, for\n * example.\n *\n * Note that we override the palette for 'basic' to match the neutral usecase\n * shown in the mocks. There are never menu items that match our basic palette.\n *\n * Default: standard and disabled styles\n * Hover: hover and focus styles\n * Active: active styles\n */\nconst menuItemMixins = {\n  default: css<MenuItemMixinProps>`\n    cursor: pointer;\n    color: ${({ theme, variant = 'basic' }) => {\n      const tokens = semanticTokens(theme);\n      if (tokens) {\n        return variant === 'danger' ? tokens.FgDanger1 : tokens.FgPrimary;\n      }\n      // default text color for these two should be neutral\n      return ['basic', 'primary'].includes(variant)\n        ? theme.color.text.primary\n        : theme.color.variants[variant].default;\n    }};\n\n    ${({ theme }) => css`\n      background-color: ${semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n      border-radius: ${theme.element.borderRadius};\n    `}\n\n    ${({ theme, disabled, variant = 'basic' }) => {\n      if (disabled) {\n        const disabledColor = semanticColor(theme, 'FgDisabled', theme.color.text.disabled);\n        return css`\n          background-color: ${semanticColor(\n            theme,\n            'SurfacePrimary',\n            theme.color.background.primary,\n          )};\n          color: ${disabledColor};\n          cursor: default;\n\n          svg * {\n            stroke: ${disabledColor};\n          }\n\n          ${iconStrokeReset}\n        `;\n      }\n\n      const tokens = semanticTokens(theme);\n      return (\n        tokens &&\n        variant === 'basic' &&\n        css`\n          svg * {\n            stroke: ${tokens.FgPrimary};\n          }\n\n          ${iconStrokeReset}\n        `\n      );\n    }}\n  `,\n  hover: css<MenuItemMixinProps>`\n    transition-duration: ${TransitionDuration.Fast};\n    color: ${({ theme, variant = 'basic' }) => hoverColor(theme, variant)};\n\n    background-color: ${({ theme, variant = 'basic' }) => {\n      const tokens = semanticTokens(theme);\n      if (tokens) {\n        return variant === 'danger'\n          ? withAlpha(tokens.FeedbackDanger1, tokens.Opacity25)\n          : tokens.SurfaceHover;\n      }\n      return variant === 'basic'\n        ? theme.color.background.secondary\n        : theme.color.variants[variant].highlightLight;\n    }};\n\n    ${({ theme, disabled, variant = 'basic' }) =>\n      !disabled &&\n      css`\n        svg * {\n          stroke: ${hoverColor(theme, variant)};\n        }\n\n        ${iconStrokeReset}\n      `}\n  `,\n  active: css<MenuItemMixinProps>`\n    transition-duration: ${TransitionDuration.Fast};\n    color: ${({ theme, variant = 'basic' }) => {\n      const tokens = semanticTokens(theme);\n      if (tokens) {\n        if (variant === 'basic') {\n          return tokens.FgAccent;\n        }\n        return variant === 'danger' ? tokens.FgDanger2 : tokens.FgPrimary;\n      }\n      return variant === 'basic' ? theme.color.text.inverse : theme.color.variants[variant].default;\n    }};\n    background-color: ${({ theme, variant = 'basic' }) => {\n      const tokens = semanticTokens(theme);\n      if (tokens) {\n        if (variant === 'basic') {\n          return withAlpha(tokens.SurfaceAccent, tokens.Opacity25);\n        }\n        return variant === 'danger'\n          ? withAlpha(tokens.FeedbackDanger1, tokens.Opacity25)\n          : tokens.SurfaceSecondary;\n      }\n      return variant === 'basic'\n        ? theme.color.primary.brand\n        : theme.color.variants[variant].highlightLight;\n    }};\n\n    ${({ theme, disabled, variant = 'basic' }) =>\n      !disabled &&\n      css`\n        svg * {\n          stroke: ${(() => {\n            const tokens = semanticTokens(theme);\n            if (tokens) {\n              if (variant === 'basic') {\n                return tokens.FgAccent;\n              }\n              return variant === 'danger' ? tokens.FgDanger2 : tokens.FgPrimary;\n            }\n            if (variant === 'basic') {\n              return theme.color.text.primary;\n            }\n            if (variant === 'danger') {\n              return Color.CoreRed900;\n            }\n            return theme.color.variants[variant].default;\n          })()};\n        }\n\n        ${iconStrokeReset}\n      `}\n  `,\n};\n\nexport default menuItemMixins;\n"],"mappings":"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"}

package/dist/mixins/print/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/mixins/print/index.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { semanticColor } from 'design-system/lib/semanticColor';\n\nexport const printMixins = {\n  hide: css`\n    @media print {\n      display: none;\n    }\n  `,\n  border: css`\n    @media print {\n      border: 1px solid\n        ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n    }\n  `,\n  avoidPageBreak: css`\n    @media print {\n      break-inside: avoid;\n    }\n  `,\n};\n"],"mappings":";;;AAIA,MAAa,cAAc;CACzB,MAAM,GAAG;;;;;CAKT,QAAQ,GAAG;;;WAGF,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,MAAM,OAAO,QAAQ,CAAC;;;CAGzF,gBAAgB,GAAG;;;;;CAKpB"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/mixins/print/index.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { semanticColor } from '#src/lib/semanticColor';\n\nexport const printMixins = {\n  hide: css`\n    @media print {\n      display: none;\n    }\n  `,\n  border: css`\n    @media print {\n      border: 1px solid\n        ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n    }\n  `,\n  avoidPageBreak: css`\n    @media print {\n      break-inside: avoid;\n    }\n  `,\n};\n"],"mappings":";;;AAIA,MAAa,cAAc;CACzB,MAAM,GAAG;;;;;CAKT,QAAQ,GAAG;;;WAGF,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,MAAM,OAAO,QAAQ,CAAC;;;CAGzF,gBAAgB,GAAG;;;;;CAKpB"}

package/dist/mixins/scrollbar.d.mts

@@ -1,4 +1,4 @@
-import { t as MaybeSemanticTheme } from "../semanticColor-Bxufk3ZO.mjs";
+import { t as MaybeSemanticTheme } from "../semanticColor-y9byerSl.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region src/mixins/scrollbar.d.ts

package/dist/mixins/scrollbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbar.mjs","names":[],"sources":["../../src/mixins/scrollbar.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { semanticOnly } from 'design-system/lib/semanticColor';\n\n// Legacy themes keep the browser scrollbar. These colors exist only once semantic tokens are installed.\nexport const semanticScrollbar = css`\n  ${semanticOnly(\n    (tokens) => `\n      scrollbar-color: ${tokens.BorderDefault} transparent;\n\n      &::-webkit-scrollbar {\n        width: ${Spacing[2]};\n        height: ${Spacing[2]};\n      }\n\n      &::-webkit-scrollbar-track {\n        background: transparent;\n      }\n\n      &::-webkit-scrollbar-thumb {\n        background: ${tokens.BorderDefault};\n        border-radius: ${Spacing[2]};\n      }\n\n      &::-webkit-scrollbar-thumb:hover {\n        background: ${tokens.BorderHover};\n      }\n    `,\n  )}\n`;\n"],"mappings":";;;;AAMA,MAAa,oBAAoB,GAAG;IAChC,cACC,WAAW;yBACS,OAAO,cAAc;;;iBAG7B,QAAQ,GAAG;kBACV,QAAQ,GAAG;;;;;;;;sBAQP,OAAO,cAAc;yBAClB,QAAQ,GAAG;;;;sBAId,OAAO,YAAY;;MAGtC,CAAC"}
+{"version":3,"file":"scrollbar.mjs","names":[],"sources":["../../src/mixins/scrollbar.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { semanticOnly } from '#src/lib/semanticColor';\n\n// Legacy themes keep the browser scrollbar. These colors exist only once semantic tokens are installed.\nexport const semanticScrollbar = css`\n  ${semanticOnly(\n    (tokens) => `\n      scrollbar-color: ${tokens.BorderDefault} transparent;\n\n      &::-webkit-scrollbar {\n        width: ${Spacing[2]};\n        height: ${Spacing[2]};\n      }\n\n      &::-webkit-scrollbar-track {\n        background: transparent;\n      }\n\n      &::-webkit-scrollbar-thumb {\n        background: ${tokens.BorderDefault};\n        border-radius: ${Spacing[2]};\n      }\n\n      &::-webkit-scrollbar-thumb:hover {\n        background: ${tokens.BorderHover};\n      }\n    `,\n  )}\n`;\n"],"mappings":";;;;AAOA,MAAa,oBAAoB,GAAG;IAChC,cACC,WAAW;yBACS,OAAO,cAAc;;;iBAG7B,QAAQ,GAAG;kBACV,QAAQ,GAAG;;;;;;;;sBAQP,OAAO,cAAc;yBAClB,QAAQ,GAAG;;;;sBAId,OAAO,YAAY;;MAGtC,CAAC"}

package/dist/mixins/text.d.mts

@@ -1,2 +1,2 @@
-import { a as displayMixins, c as paragraphMixins, i as ParagraphSize, n as HeadingSize, o as fontFamilyMixin, r as ParagraphMixinSize, s as headingMixins, t as DisplaySize } from "../text-Csytfclh.mjs";
+import { a as displayMixins, c as paragraphMixins, i as ParagraphSize, n as HeadingSize, o as fontFamilyMixin, r as ParagraphMixinSize, s as headingMixins, t as DisplaySize } from "../text-CKLxMlG4.mjs";
 export { DisplaySize, HeadingSize, ParagraphMixinSize, ParagraphSize, displayMixins, fontFamilyMixin, headingMixins, paragraphMixins };

package/dist/no-raw-table.d.mts

@@ -1,4 +1,4 @@
-import { r as Rule } from "./index-BWAycP6L.mjs";
+import { r as Rule } from "./index-B9kfFACl.mjs";
 
 //#region src/lint/rules/no-raw-table.d.ts
 declare const noRawTable: Rule;

package/dist/{operators-gCG7uZ6y.d.mts → operators-BTCnQpeu.d.mts}

@@ -1,5 +1,5 @@
-import { a as FilterConditionOperator, c as FilterFieldType, d as FilterRuleValue, l as FilterOperator, o as FilterField, r as DateRangeFilterValue, u as FilterRule } from "./types-DbOD5vE_.mjs";
-import { i as CommonStrings } from "./strings-CK9n6b65.mjs";
+import { a as FilterConditionOperator, c as FilterFieldType, d as FilterRuleValue, l as FilterOperator, o as FilterField, r as DateRangeFilterValue, u as FilterRule } from "./types-K57NVM0M.mjs";
+import { i as CommonStrings } from "./strings-T-gsdqiJ.mjs";
 //#region src/components/DataTable/TableControls/FiltersV2/operators.d.ts
 type OperatorLabelKey = 'operatorIs' | 'operatorIsNot' | 'operatorContains' | 'operatorDoesNotContain' | 'operatorIsEmpty' | 'operatorIsNotEmpty' | 'operatorIsTrue' | 'operatorIsFalse' | 'operatorBefore' | 'operatorAfter' | 'operatorBetween' | 'operatorIsAnyOf' | 'operatorIsNoneOf' | 'operatorGreaterThan' | 'operatorGreaterThanOrEqual' | 'operatorLessThan' | 'operatorLessThanOrEqual' | 'operatorIsEqualTo' | 'operatorIsGreaterThan' | 'operatorIsLessThan';
 /**
@@ -109,4 +109,4 @@ declare function emptyValueForRule(field: Pick<FilterField, 'type' | 'condition'
 declare function reconcileValueForOperator(field: Pick<FilterField, 'type' | 'condition'>, nextOperator: FilterOperator, previousOperator: FilterOperator, value: FilterRuleValue): FilterRuleValue;
 //#endregion
 export { isNumericComparisonOperator as _, emptyValueForRule as a, reconcileValueForOperator as b, getDefaultOperatorForType as c, getOperatorsForType as d, hasCompleteConditionValue as f, isNumericComparison as g, isMinutePrecisionDate as h, emptyValueForFieldType as i, getOperatorLabel as l, isCompleteNumericComparisonValue as m, NumericComparisonOperator as n, fieldHasMultipleOperators as o, isCompleteDateRange as p, carriesDateRange as r, getConditionOperator as s, NUMERIC_COMPARISON_OPERATORS as t, getOperatorsForField as u, isRangeOperator as v, withValue as x, isValuelessOperator as y };
-//# sourceMappingURL=operators-gCG7uZ6y.d.mts.map
+//# sourceMappingURL=operators-BTCnQpeu.d.mts.map

package/dist/operators.d.mts

@@ -1,2 +1,2 @@
-import { _ as isNumericComparisonOperator, a as emptyValueForRule, b as reconcileValueForOperator, c as getDefaultOperatorForType, d as getOperatorsForType, f as hasCompleteConditionValue, g as isNumericComparison, h as isMinutePrecisionDate, i as emptyValueForFieldType, l as getOperatorLabel, m as isCompleteNumericComparisonValue, n as NumericComparisonOperator, o as fieldHasMultipleOperators, p as isCompleteDateRange, r as carriesDateRange, s as getConditionOperator, t as NUMERIC_COMPARISON_OPERATORS, u as getOperatorsForField, v as isRangeOperator, x as withValue, y as isValuelessOperator } from "./operators-gCG7uZ6y.mjs";
+import { _ as isNumericComparisonOperator, a as emptyValueForRule, b as reconcileValueForOperator, c as getDefaultOperatorForType, d as getOperatorsForType, f as hasCompleteConditionValue, g as isNumericComparison, h as isMinutePrecisionDate, i as emptyValueForFieldType, l as getOperatorLabel, m as isCompleteNumericComparisonValue, n as NumericComparisonOperator, o as fieldHasMultipleOperators, p as isCompleteDateRange, r as carriesDateRange, s as getConditionOperator, t as NUMERIC_COMPARISON_OPERATORS, u as getOperatorsForField, v as isRangeOperator, x as withValue, y as isValuelessOperator } from "./operators-BTCnQpeu.mjs";
 export { NUMERIC_COMPARISON_OPERATORS, NumericComparisonOperator, carriesDateRange, emptyValueForFieldType, emptyValueForRule, fieldHasMultipleOperators, getConditionOperator, getDefaultOperatorForType, getOperatorLabel, getOperatorsForField, getOperatorsForType, hasCompleteConditionValue, isCompleteDateRange, isCompleteNumericComparisonValue, isMinutePrecisionDate, isNumericComparison, isNumericComparisonOperator, isRangeOperator, isValuelessOperator, reconcileValueForOperator, withValue };

package/dist/{palette-C1gBbxLO.d.mts → palette-D61sDyDI.d.mts}

@@ -1,5 +1,5 @@
-import { n as PdsColor } from "./color-Cy_0z4IY.mjs";
-import { i as PersonaTheme } from "./theme-mQ4WkH90.mjs";
+import { n as PdsColor } from "./color-Db57Wms_.mjs";
+import { i as PersonaTheme } from "./theme-BFP-_PEh.mjs";
 import { Color } from "@persona/design-tokens";
 
 //#region src/components/Button/palette.d.ts
@@ -18,4 +18,4 @@ interface ButtonPalette {
 declare const buttonPalette: (theme: PersonaTheme, variant: ButtonVariant) => ButtonPalette;
 //#endregion
 export { ButtonVariant as n, buttonPalette as r, ButtonPalette as t };
-//# sourceMappingURL=palette-C1gBbxLO.d.mts.map
+//# sourceMappingURL=palette-D61sDyDI.d.mts.map

package/dist/palette.d.mts

@@ -1,2 +1,2 @@
-import { n as ButtonVariant, r as buttonPalette, t as ButtonPalette } from "./palette-C1gBbxLO.mjs";
+import { n as ButtonVariant, r as buttonPalette, t as ButtonPalette } from "./palette-D61sDyDI.mjs";
 export { ButtonPalette, ButtonVariant, buttonPalette };

package/dist/patterns/CardGrouping/index.mjs

@@ -11,7 +11,7 @@ import { n as Stack, t as HStack } from "../../Stack-Bzom2BTR.mjs";
 import { n as Button$1, t as IconButton } from "../../IconButton-DftINsp7.mjs";
 import { n as DropdownMenu_default } from "../../DropdownMenu-Q8S-9rXm.mjs";
 import { t as DropdownButton } from "../../DropdownButton-BiFRlSVD.mjs";
-import { n as SingleColumnLayout } from "../../PageLayout-DCe3F76N.mjs";
+import { n as SingleColumnLayout } from "../../PageLayout-DjtGrvJa.mjs";
 import { cloneElement } from "react";
 import { Color, Spacing } from "@persona/design-tokens";
 import { Disclosure, DisclosurePanel } from "react-aria-components";

package/dist/patterns/CardGrouping/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Heading","Button","DropdownMenu"],"sources":["../../../src/patterns/CardGrouping/CardGrouping.tsx"],"sourcesContent":["import { cloneElement, type ReactElement, type ReactNode } from 'react';\nimport { Disclosure, DisclosurePanel } from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { ChevronDownIcon, MoreIcon } from '@persona/icons';\nimport Button, { IconButton } from 'design-system/components/Button';\nimport DropdownButton from 'design-system/components/DropdownButton';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport { HStack, Stack } from 'design-system/components/Stack';\nimport { Heading, Paragraph } from 'design-system/components/Text';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { HeadlessAriaButton } from 'design-system/lib/HeadlessAriaButton';\nimport { RouterLink } from 'design-system/lib/router';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { TruncatedText } from 'design-system/lib/TruncatedText';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport type { IconAction, TextAction } from 'design-system/types/Action';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nimport { SingleColumnLayout, type SingleColumnLayoutProps } from '../PageLayout';\n\ntype HeaderAction = IconAction | TextAction;\n\nconst isIconAction = (action: HeaderAction): action is IconAction => 'icon' in action;\n\nconst splitGroupActions = (actions: HeaderAction[]) => {\n  if (actions.length <= 1) {\n    return { inlineActions: actions, overflowActions: [] as HeaderAction[] };\n  }\n\n  const primaryIndex = actions.findIndex(\n    (action) => !isIconAction(action) && action.variant === 'primary',\n  );\n  const inlineIndex = primaryIndex === -1 ? 0 : primaryIndex;\n\n  return {\n    inlineActions: [actions[inlineIndex]],\n    overflowActions: actions.filter((_, index) => index !== inlineIndex),\n  };\n};\n\nconst actionKey = (action: HeaderAction, index: number) =>\n  isIconAction(action)\n    ? (action.id ?? action.ariaLabel ?? `action-${index}`)\n    : (action.id ?? action.label ?? `action-${index}`);\n\nconst actionLabel = (action: HeaderAction) =>\n  isIconAction(action) ? action.ariaLabel : action.label;\n\nconst overflowLinkProps = (action: HeaderAction) => {\n  if (action.disabled || action.to == null) {\n    return {};\n  }\n\n  if (typeof action.to === 'string' && action.to.startsWith('https://')) {\n    return {\n      as: 'a' as const,\n      href: action.to,\n      target: '_blank' as const,\n      rel: 'noreferrer',\n    };\n  }\n\n  return { as: RouterLink, to: action.to };\n};\n\nconst TitleBlock = styled(Stack)`\n  min-width: 0;\n  flex: 1;\n\n  > * {\n    min-width: 0;\n  }\n`;\n\nconst TitleHeading = styled(Heading)`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n  min-width: 0;\n  max-width: 100%;\n  overflow: hidden;\n`;\n\nconst TitleText = styled.span`\n  min-width: 0;\n`;\n\nconst Actions = styled(HStack)`\n  flex-shrink: 0;\n`;\n\nconst Adornment = styled.span`\n  display: flex;\n  flex-shrink: 0;\n  max-width: 180px;\n`;\n\nconst ActionRow = ({\n  actions,\n  size,\n  collapseToPrimary = false,\n}: {\n  actions: HeaderAction[];\n  size: 'sm' | 'md';\n  collapseToPrimary?: boolean;\n}) => {\n  const visibleActions = actions.filter((action) => !action.hidden);\n  const { inlineActions, overflowActions } = collapseToPrimary\n    ? splitGroupActions(visibleActions)\n    : { inlineActions: visibleActions, overflowActions: [] as HeaderAction[] };\n\n  const buttons = inlineActions.map((action, i) => {\n    const key = actionKey(action, i);\n\n    const button = isIconAction(action) ? (\n      <IconButton\n        id={action.id}\n        key={key}\n        to={action.to}\n        size={size}\n        disabled={action.disabled}\n        aria-label={action.ariaLabel}\n        onClick={(event) => {\n          event.stopPropagation();\n          return action.onClick?.(event);\n        }}\n      >\n        {action.icon}\n      </IconButton>\n    ) : (\n      <Button\n        id={action.id}\n        key={key}\n        to={action.to}\n        aria-label={action.ariaLabel}\n        disabled={action.disabled}\n        variant={action.variant ?? 'basic'}\n        size={size}\n        width='auto'\n        onSecondaryBackground={(action.variant ?? 'basic') === 'basic'}\n        prefixIcon={action.prefixIcon}\n        suffixIcon={action.suffixIcon}\n        onClick={(event) => {\n          event.stopPropagation();\n          return action.onClick?.(event);\n        }}\n      >\n        {action.label}\n      </Button>\n    );\n\n    return action.tooltip ? (\n      <Tooltip key={key} {...action.tooltipProps} trigger={button}>\n        {action.tooltip}\n      </Tooltip>\n    ) : (\n      button\n    );\n  });\n\n  return (\n    <Actions spacing={Spacing[2]}>\n      {buttons}\n      {overflowActions.length > 0 && (\n        <DropdownButton\n          variant='basic'\n          size={size}\n          width='icon'\n          onSecondaryBackground\n          suffixIcon={undefined}\n          aria-label='More actions'\n          menuProps={{ portal: true }}\n          menuItems={overflowActions.map((action, index) => (\n            <DropdownMenu.Item\n              id={action.id ?? actionLabel(action)}\n              key={actionKey(action, index)}\n              disabled={action.disabled}\n              variant={!isIconAction(action) && action.variant === 'danger' ? 'danger' : undefined}\n              {...overflowLinkProps(action)}\n              onClick={(event) => {\n                event.stopPropagation();\n                return action.onClick?.(event);\n              }}\n            >\n              {actionLabel(action)}\n            </DropdownMenu.Item>\n          ))}\n        >\n          <MoreIcon />\n        </DropdownButton>\n      )}\n    </Actions>\n  );\n};\n\nconst onSecondarySurface = (node: ReactElement) =>\n  cloneElement(node as ReactElement<{ onSecondaryBackground?: boolean }>, {\n    onSecondaryBackground: true,\n  });\n\nconst Controls = styled.div`\n  margin-top: ${Spacing[2]};\n\n  > * {\n    margin-bottom: 0;\n  }\n`;\n\nconst ListHeader = ({\n  title,\n  description,\n  sticker,\n  status,\n  actions,\n  controls,\n}: {\n  title: string;\n  description?: string;\n  sticker?: ReactElement;\n  status?: ReactElement;\n  actions?: HeaderAction[];\n  controls?: ReactNode;\n}) => (\n  <HStack align='flex-start' justify='space-between' spacing={Spacing[4]} fullWidth>\n    <TitleBlock spacing={Spacing[1]}>\n      <TitleHeading forwardedAs='h2' size='xsm'>\n        <TitleText>\n          <TruncatedText>{title}</TruncatedText>\n        </TitleText>\n        {sticker && <Adornment>{onSecondarySurface(sticker)}</Adornment>}\n        {status && <Adornment>{status}</Adornment>}\n      </TitleHeading>\n      {description && <Paragraph size='md'>{description}</Paragraph>}\n      {controls && <Controls>{controls}</Controls>}\n    </TitleBlock>\n    {actions && actions.length > 0 && <ActionRow actions={actions} size='md' />}\n  </HStack>\n);\n\nconst GroupDisclosure = styled(Disclosure)`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst GroupHeader = styled(HStack)`\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  height: ${Spacing[9]};\n`;\n\nconst Trigger = styled(HeadlessAriaButton)`\n  min-width: 0;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n  text-align: left;\n\n  &:focus-visible {\n    ${focusStyle}\n  }\n`;\n\nconst Chevron = styled.span<{ $expanded: boolean }>`\n  display: flex;\n  flex-shrink: 0;\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n\n  svg {\n    transition: transform ${TransitionDuration.Faster} ease-out;\n    transform: rotate(${({ $expanded }) => ($expanded ? '0deg' : '-90deg')});\n  }\n`;\n\nconst GroupList = styled(Stack)`\n  && {\n    gap: 0;\n  }\n\n  > *:not(:last-child) {\n    border-bottom: 1px solid\n      ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n  }\n`;\n\nconst GroupCards = styled(Stack)`\n  padding-top: ${Spacing[4]};\n  padding-bottom: ${Spacing[4]};\n`;\n\nexport type CardGroupingGroup = {\n  title: string;\n  sticker?: ReactElement;\n  actions?: HeaderAction[];\n  /** @defaultValue false */\n  defaultExpanded?: boolean;\n  children: ReactNode;\n};\n\ntype CardGroupingHeaderProps = Omit<SingleColumnLayoutProps, 'main'> & {\n  title?: string;\n  description?: string;\n  sticker?: ReactElement;\n  status?: ReactElement;\n  actions?: HeaderAction[];\n  /** Extra controls under the description, inside the list title group. */\n  controls?: ReactNode;\n};\n\nexport type CardGroupingProps = CardGroupingHeaderProps & {\n  groups: CardGroupingGroup[];\n};\n\nconst GroupRow = ({\n  title,\n  sticker,\n  actions,\n  defaultExpanded = false,\n  children,\n}: CardGroupingGroup) => (\n  <GroupDisclosure defaultExpanded={defaultExpanded}>\n    {({ isExpanded }) => (\n      <>\n        <GroupHeader align='center' justify='space-between' spacing={Spacing[2]}>\n          <Trigger slot='trigger' aria-label={title}>\n            <Chevron $expanded={isExpanded} aria-hidden>\n              <ChevronDownIcon />\n            </Chevron>\n            <TitleBlock spacing={Spacing[1]}>\n              <TitleHeading forwardedAs='h3' size='xsm'>\n                <TitleText>\n                  <TruncatedText>{title}</TruncatedText>\n                </TitleText>\n                {sticker && <Adornment>{onSecondarySurface(sticker)}</Adornment>}\n              </TitleHeading>\n            </TitleBlock>\n          </Trigger>\n          {actions && actions.length > 0 && (\n            <ActionRow actions={actions} size='sm' collapseToPrimary />\n          )}\n        </GroupHeader>\n        <DisclosurePanel>\n          <GroupCards spacing={Spacing[4]}>{children}</GroupCards>\n        </DisclosurePanel>\n      </>\n    )}\n  </GroupDisclosure>\n);\n\nexport const CardGrouping = ({\n  title,\n  description,\n  sticker,\n  status,\n  actions,\n  controls,\n  groups,\n  ...chrome\n}: CardGroupingProps) => (\n  <SingleColumnLayout\n    {...chrome}\n    main={\n      <Stack spacing={Spacing[4]} fullWidth>\n        {title ? (\n          <ListHeader\n            title={title}\n            description={description}\n            sticker={sticker}\n            status={status}\n            actions={actions}\n            controls={controls}\n          />\n        ) : (\n          description && <Paragraph size='md'>{description}</Paragraph>\n        )}\n        <GroupList fullWidth>\n          {groups.map((group, index) => (\n            <GroupRow key={`${group.title}-${index}`} {...group} />\n          ))}\n        </GroupList>\n      </Stack>\n    }\n  />\n);\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["Heading","Button","DropdownMenu"],"sources":["../../../src/patterns/CardGrouping/CardGrouping.tsx"],"sourcesContent":["import { cloneElement, type ReactElement, type ReactNode } from 'react';\nimport { Disclosure, DisclosurePanel } from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { ChevronDownIcon, MoreIcon } from '@persona/icons';\n\nimport Button, { IconButton } from '#src/components/Button';\nimport DropdownButton from '#src/components/DropdownButton';\nimport DropdownMenu from '#src/components/DropdownMenu';\nimport { HStack, Stack } from '#src/components/Stack';\nimport { Heading, Paragraph } from '#src/components/Text';\nimport Tooltip from '#src/components/Tooltip';\nimport { HeadlessAriaButton } from '#src/lib/HeadlessAriaButton';\nimport { RouterLink } from '#src/lib/router';\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { TruncatedText } from '#src/lib/TruncatedText';\nimport { focusStyle } from '#src/mixins/focus';\nimport type { IconAction, TextAction } from '#src/types/Action';\nimport { TransitionDuration } from '#src/variables/transitions';\n\nimport { SingleColumnLayout, type SingleColumnLayoutProps } from '../PageLayout';\n\ntype HeaderAction = IconAction | TextAction;\n\nconst isIconAction = (action: HeaderAction): action is IconAction => 'icon' in action;\n\nconst splitGroupActions = (actions: HeaderAction[]) => {\n  if (actions.length <= 1) {\n    return { inlineActions: actions, overflowActions: [] as HeaderAction[] };\n  }\n\n  const primaryIndex = actions.findIndex(\n    (action) => !isIconAction(action) && action.variant === 'primary',\n  );\n  const inlineIndex = primaryIndex === -1 ? 0 : primaryIndex;\n\n  return {\n    inlineActions: [actions[inlineIndex]],\n    overflowActions: actions.filter((_, index) => index !== inlineIndex),\n  };\n};\n\nconst actionKey = (action: HeaderAction, index: number) =>\n  isIconAction(action)\n    ? (action.id ?? action.ariaLabel ?? `action-${index}`)\n    : (action.id ?? action.label ?? `action-${index}`);\n\nconst actionLabel = (action: HeaderAction) =>\n  isIconAction(action) ? action.ariaLabel : action.label;\n\nconst overflowLinkProps = (action: HeaderAction) => {\n  if (action.disabled || action.to == null) {\n    return {};\n  }\n\n  if (typeof action.to === 'string' && action.to.startsWith('https://')) {\n    return {\n      as: 'a' as const,\n      href: action.to,\n      target: '_blank' as const,\n      rel: 'noreferrer',\n    };\n  }\n\n  return { as: RouterLink, to: action.to };\n};\n\nconst TitleBlock = styled(Stack)`\n  min-width: 0;\n  flex: 1;\n\n  > * {\n    min-width: 0;\n  }\n`;\n\nconst TitleHeading = styled(Heading)`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n  min-width: 0;\n  max-width: 100%;\n  overflow: hidden;\n`;\n\nconst TitleText = styled.span`\n  min-width: 0;\n`;\n\nconst Actions = styled(HStack)`\n  flex-shrink: 0;\n`;\n\nconst Adornment = styled.span`\n  display: flex;\n  flex-shrink: 0;\n  max-width: 180px;\n`;\n\nconst ActionRow = ({\n  actions,\n  size,\n  collapseToPrimary = false,\n}: {\n  actions: HeaderAction[];\n  size: 'sm' | 'md';\n  collapseToPrimary?: boolean;\n}) => {\n  const visibleActions = actions.filter((action) => !action.hidden);\n  const { inlineActions, overflowActions } = collapseToPrimary\n    ? splitGroupActions(visibleActions)\n    : { inlineActions: visibleActions, overflowActions: [] as HeaderAction[] };\n\n  const buttons = inlineActions.map((action, i) => {\n    const key = actionKey(action, i);\n\n    const button = isIconAction(action) ? (\n      <IconButton\n        id={action.id}\n        key={key}\n        to={action.to}\n        size={size}\n        disabled={action.disabled}\n        aria-label={action.ariaLabel}\n        onClick={(event) => {\n          event.stopPropagation();\n          return action.onClick?.(event);\n        }}\n      >\n        {action.icon}\n      </IconButton>\n    ) : (\n      <Button\n        id={action.id}\n        key={key}\n        to={action.to}\n        aria-label={action.ariaLabel}\n        disabled={action.disabled}\n        variant={action.variant ?? 'basic'}\n        size={size}\n        width='auto'\n        onSecondaryBackground={(action.variant ?? 'basic') === 'basic'}\n        prefixIcon={action.prefixIcon}\n        suffixIcon={action.suffixIcon}\n        onClick={(event) => {\n          event.stopPropagation();\n          return action.onClick?.(event);\n        }}\n      >\n        {action.label}\n      </Button>\n    );\n\n    return action.tooltip ? (\n      <Tooltip key={key} {...action.tooltipProps} trigger={button}>\n        {action.tooltip}\n      </Tooltip>\n    ) : (\n      button\n    );\n  });\n\n  return (\n    <Actions spacing={Spacing[2]}>\n      {buttons}\n      {overflowActions.length > 0 && (\n        <DropdownButton\n          variant='basic'\n          size={size}\n          width='icon'\n          onSecondaryBackground\n          suffixIcon={undefined}\n          aria-label='More actions'\n          menuProps={{ portal: true }}\n          menuItems={overflowActions.map((action, index) => (\n            <DropdownMenu.Item\n              id={action.id ?? actionLabel(action)}\n              key={actionKey(action, index)}\n              disabled={action.disabled}\n              variant={!isIconAction(action) && action.variant === 'danger' ? 'danger' : undefined}\n              {...overflowLinkProps(action)}\n              onClick={(event) => {\n                event.stopPropagation();\n                return action.onClick?.(event);\n              }}\n            >\n              {actionLabel(action)}\n            </DropdownMenu.Item>\n          ))}\n        >\n          <MoreIcon />\n        </DropdownButton>\n      )}\n    </Actions>\n  );\n};\n\nconst onSecondarySurface = (node: ReactElement) =>\n  cloneElement(node as ReactElement<{ onSecondaryBackground?: boolean }>, {\n    onSecondaryBackground: true,\n  });\n\nconst Controls = styled.div`\n  margin-top: ${Spacing[2]};\n\n  > * {\n    margin-bottom: 0;\n  }\n`;\n\nconst ListHeader = ({\n  title,\n  description,\n  sticker,\n  status,\n  actions,\n  controls,\n}: {\n  title: string;\n  description?: string;\n  sticker?: ReactElement;\n  status?: ReactElement;\n  actions?: HeaderAction[];\n  controls?: ReactNode;\n}) => (\n  <HStack align='flex-start' justify='space-between' spacing={Spacing[4]} fullWidth>\n    <TitleBlock spacing={Spacing[1]}>\n      <TitleHeading forwardedAs='h2' size='xsm'>\n        <TitleText>\n          <TruncatedText>{title}</TruncatedText>\n        </TitleText>\n        {sticker && <Adornment>{onSecondarySurface(sticker)}</Adornment>}\n        {status && <Adornment>{status}</Adornment>}\n      </TitleHeading>\n      {description && <Paragraph size='md'>{description}</Paragraph>}\n      {controls && <Controls>{controls}</Controls>}\n    </TitleBlock>\n    {actions && actions.length > 0 && <ActionRow actions={actions} size='md' />}\n  </HStack>\n);\n\nconst GroupDisclosure = styled(Disclosure)`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst GroupHeader = styled(HStack)`\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  height: ${Spacing[9]};\n`;\n\nconst Trigger = styled(HeadlessAriaButton)`\n  min-width: 0;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n  text-align: left;\n\n  &:focus-visible {\n    ${focusStyle}\n  }\n`;\n\nconst Chevron = styled.span<{ $expanded: boolean }>`\n  display: flex;\n  flex-shrink: 0;\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n\n  svg {\n    transition: transform ${TransitionDuration.Faster} ease-out;\n    transform: rotate(${({ $expanded }) => ($expanded ? '0deg' : '-90deg')});\n  }\n`;\n\nconst GroupList = styled(Stack)`\n  && {\n    gap: 0;\n  }\n\n  > *:not(:last-child) {\n    border-bottom: 1px solid\n      ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n  }\n`;\n\nconst GroupCards = styled(Stack)`\n  padding-top: ${Spacing[4]};\n  padding-bottom: ${Spacing[4]};\n`;\n\nexport type CardGroupingGroup = {\n  title: string;\n  sticker?: ReactElement;\n  actions?: HeaderAction[];\n  /** @defaultValue false */\n  defaultExpanded?: boolean;\n  children: ReactNode;\n};\n\ntype CardGroupingHeaderProps = Omit<SingleColumnLayoutProps, 'main'> & {\n  title?: string;\n  description?: string;\n  sticker?: ReactElement;\n  status?: ReactElement;\n  actions?: HeaderAction[];\n  /** Extra controls under the description, inside the list title group. */\n  controls?: ReactNode;\n};\n\nexport type CardGroupingProps = CardGroupingHeaderProps & {\n  groups: CardGroupingGroup[];\n};\n\nconst GroupRow = ({\n  title,\n  sticker,\n  actions,\n  defaultExpanded = false,\n  children,\n}: CardGroupingGroup) => (\n  <GroupDisclosure defaultExpanded={defaultExpanded}>\n    {({ isExpanded }) => (\n      <>\n        <GroupHeader align='center' justify='space-between' spacing={Spacing[2]}>\n          <Trigger slot='trigger' aria-label={title}>\n            <Chevron $expanded={isExpanded} aria-hidden>\n              <ChevronDownIcon />\n            </Chevron>\n            <TitleBlock spacing={Spacing[1]}>\n              <TitleHeading forwardedAs='h3' size='xsm'>\n                <TitleText>\n                  <TruncatedText>{title}</TruncatedText>\n                </TitleText>\n                {sticker && <Adornment>{onSecondarySurface(sticker)}</Adornment>}\n              </TitleHeading>\n            </TitleBlock>\n          </Trigger>\n          {actions && actions.length > 0 && (\n            <ActionRow actions={actions} size='sm' collapseToPrimary />\n          )}\n        </GroupHeader>\n        <DisclosurePanel>\n          <GroupCards spacing={Spacing[4]}>{children}</GroupCards>\n        </DisclosurePanel>\n      </>\n    )}\n  </GroupDisclosure>\n);\n\nexport const CardGrouping = ({\n  title,\n  description,\n  sticker,\n  status,\n  actions,\n  controls,\n  groups,\n  ...chrome\n}: CardGroupingProps) => (\n  <SingleColumnLayout\n    {...chrome}\n    main={\n      <Stack spacing={Spacing[4]} fullWidth>\n        {title ? (\n          <ListHeader\n            title={title}\n            description={description}\n            sticker={sticker}\n            status={status}\n            actions={actions}\n            controls={controls}\n          />\n        ) : (\n          description && <Paragraph size='md'>{description}</Paragraph>\n        )}\n        <GroupList fullWidth>\n          {groups.map((group, index) => (\n            <GroupRow key={`${group.title}-${index}`} {...group} />\n          ))}\n        </GroupList>\n      </Stack>\n    }\n  />\n);\n"],"mappings":"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"}

package/dist/patterns/IndexTableLayout/index.mjs

@@ -1,7 +1,7 @@
 import { t as Card_default } from "../../Card-DuQHyroh.mjs";
-import { t as DataTable } from "../../DataTable-DEJHWrsy.mjs";
-import { t as PageHeader } from "../../PageHeader-BzvA_NNt.mjs";
-import { a as Section, i as Container } from "../../PageLayout-DCe3F76N.mjs";
+import { t as DataTable } from "../../DataTable-B7QqP6YU.mjs";
+import { t as PageHeader } from "../../PageHeader-DEKTopzU.mjs";
+import { a as Section, i as Container } from "../../PageLayout-DjtGrvJa.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/patterns/IndexTableLayout/useColumnConfiguration.ts

package/dist/patterns/IndexTableLayout/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Card"],"sources":["../../../src/patterns/IndexTableLayout/useColumnConfiguration.ts","../../../src/patterns/IndexTableLayout/IndexTableLayout.tsx"],"sourcesContent":["import type { RowData } from '@tanstack/react-table';\nimport { useMemo } from 'react';\n\nimport type { TableViewConfigurationProps } from 'design-system/components/DataTable/TableControls';\nimport type { ColumnConfig } from 'design-system/components/DataTable/types';\n\ntype AttributeColumn = TableViewConfigurationProps['columnConfiguration'][number];\n\nexport interface ColumnDefinition<TData extends RowData> extends ColumnConfig<TData> {\n  key?: string;\n  label: string;\n  isCustomField?: boolean;\n}\n\nexport type ColumnDefinitions<TData extends RowData> = Record<string, ColumnDefinition<TData>>;\n\nexport interface UseColumnConfigurationOptions<TData extends RowData> {\n  columnDefinitions: ColumnDefinitions<TData>;\n  defaultColumns: string[];\n  columnConfiguration?: AttributeColumn[];\n  onColumnConfigurationChange?: (c: AttributeColumn[]) => void;\n  getColumnDisabled?: (columnId: string, shownColumnIds: string[]) => boolean;\n  sortByRelevance?: boolean;\n}\n\nexport const useColumnConfiguration = <TData extends RowData>({\n  columnDefinitions,\n  columnConfiguration,\n  onColumnConfigurationChange,\n  defaultColumns,\n  getColumnDisabled,\n  sortByRelevance,\n}: UseColumnConfigurationOptions<TData>): {\n  columns: ColumnConfig<TData>[];\n  columnConfigurationProps?: TableViewConfigurationProps;\n} => {\n  const visibleColumnKeys = useMemo(() => {\n    if (!columnConfiguration || columnConfiguration.length === 0) {\n      return defaultColumns;\n    }\n\n    return columnConfiguration.map((column) => column.key);\n  }, [columnConfiguration, defaultColumns]);\n\n  const columns = useMemo(\n    () =>\n      visibleColumnKeys\n        .map((key): ColumnConfig<TData> | null => {\n          const definition = columnDefinitions[key];\n          if (!definition) {\n            return null;\n          }\n\n          const {\n            key: _key,\n            label: _label,\n            isCustomField: _isCustomField,\n            ...columnConfig\n          } = definition;\n          return columnConfig;\n        })\n        .filter((column): column is ColumnConfig<TData> => column != null),\n    [visibleColumnKeys, columnDefinitions],\n  );\n\n  const columnConfigurationProps = useMemo(() => {\n    if (!columnConfiguration || !onColumnConfigurationChange) {\n      return undefined;\n    }\n\n    const attributeOptions = Object.keys(columnDefinitions).map((key) => ({\n      key: String(key),\n      label: columnDefinitions[key].label,\n      isCustomField: columnDefinitions[key].isCustomField,\n    }));\n\n    const currentConfiguration: AttributeColumn[] = visibleColumnKeys\n      .filter((key) => columnDefinitions[key] != null)\n      .map((key) => ({\n        key: String(key),\n        label: columnDefinitions[key].label,\n      }));\n\n    return {\n      columnConfiguration: currentConfiguration,\n      attributeOptions,\n      updateColumnConfiguration: onColumnConfigurationChange,\n      getColumnDisabled,\n      sortByRelevance,\n    };\n  }, [\n    columnConfiguration,\n    onColumnConfigurationChange,\n    columnDefinitions,\n    visibleColumnKeys,\n    getColumnDisabled,\n    sortByRelevance,\n  ]);\n\n  return { columns, columnConfigurationProps };\n};\n","import type { RowData } from '@tanstack/react-table';\nimport type { ReactNode } from 'react';\n\nimport type { BreadcrumbsProps } from 'design-system/components/Breadcrumbs';\nimport Card from 'design-system/components/Card';\nimport DataTable, { type DataTableProps } from 'design-system/components/DataTable';\nimport type {\n  BaseFilterConfig,\n  FilterConfig,\n  TableControlsProps,\n} from 'design-system/components/DataTable/TableControls';\nimport PageHeader, { type PageHeaderProps } from 'design-system/components/PageHeader';\nimport { Container, Section } from 'design-system/patterns/PageLayout';\n\nimport {\n  useColumnConfiguration,\n  type UseColumnConfigurationOptions,\n} from './useColumnConfiguration';\n\nexport type IndexTableLayoutHeaderProps =\n  | (Omit<Extract<PageHeaderProps, { breadcrumbs?: never }>, 'title'> & { title?: ReactNode })\n  | Extract<PageHeaderProps, { breadcrumbs: BreadcrumbsProps }>;\n\nexport interface IndexTableLayoutProps<\n  TData extends RowData,\n  TFilter extends BaseFilterConfig = FilterConfig,\n>\n  extends\n    Omit<\n      DataTableProps<TData, TFilter>,\n      | 'title'\n      | 'showControls'\n      | 'controls'\n      | 'columns'\n      | 'enableRowSelection'\n      | 'showColumnProperties'\n      | 'onUpdateColumnProperties'\n    >,\n    UseColumnConfigurationOptions<TData> {\n  title: string;\n  tableTitle?: string;\n  headerProps?: IndexTableLayoutHeaderProps;\n  banner?: ReactNode;\n  className?: string;\n  /** Host-built table controls: search, filters/filterResolver/filterPanel, saved-view ControlBar props, tableActions… */\n  controls?: Omit<TableControlsProps<TFilter>, 'columnConfigurationProps'>;\n}\n\nexport const IndexTableLayout = <\n  TData extends RowData,\n  TFilter extends BaseFilterConfig = FilterConfig,\n>({\n  title,\n  tableTitle,\n  headerProps,\n  banner,\n  className,\n  controls,\n  columnDefinitions,\n  defaultColumns,\n  columnConfiguration,\n  onColumnConfigurationChange,\n  getColumnDisabled,\n  sortByRelevance,\n  ...dataTableProps\n}: IndexTableLayoutProps<TData, TFilter>) => {\n  const { columns, columnConfigurationProps } = useColumnConfiguration({\n    columnDefinitions,\n    defaultColumns,\n    columnConfiguration,\n    onColumnConfigurationChange,\n    getColumnDisabled,\n    sortByRelevance,\n  });\n\n  const hasBulkActions =\n    (dataTableProps.bulkActions?.length ?? 0) > 0 ||\n    (controls?.bulkActions?.length ?? 0) > 0 ||\n    dataTableProps.getAvailableBulkActions != null;\n\n  const {\n    title: headerTitle,\n    subtitle: headerSubtitle,\n    breadcrumbs,\n    ...restHeaderProps\n  } = headerProps ?? {};\n\n  const forwardedDataTableProps = { ...dataTableProps } as typeof dataTableProps &\n    Pick<DataTableProps<TData, TFilter>, 'showColumnProperties' | 'onUpdateColumnProperties'>;\n  delete forwardedDataTableProps.showColumnProperties;\n  delete forwardedDataTableProps.onUpdateColumnProperties;\n\n  return (\n    <Container className={className}>\n      <PageHeader\n        {...restHeaderProps}\n        {...(breadcrumbs\n          ? { breadcrumbs }\n          : { title: headerTitle ?? title, subtitle: headerSubtitle })}\n      />\n      <Section>\n        <Card>\n          <Card.Body>\n            {banner}\n            <DataTable<TData, TFilter>\n              {...forwardedDataTableProps}\n              columns={columns}\n              title={tableTitle}\n              showControls\n              controls={{ ...controls, columnConfigurationProps }}\n              enableRowSelection={hasBulkActions}\n            />\n          </Card.Body>\n        </Card>\n      </Section>\n    </Container>\n  );\n};\n\nexport default IndexTableLayout;\n"],"mappings":";;;;;;;AAyBA,MAAa,0BAAiD,EAC5D,mBACA,qBACA,6BACA,gBACA,mBACA,sBAIG;CACH,MAAM,oBAAoB,cAAc;AACtC,MAAI,CAAC,uBAAuB,oBAAoB,WAAW,EACzD,QAAO;AAGT,SAAO,oBAAoB,KAAK,WAAW,OAAO,IAAI;IACrD,CAAC,qBAAqB,eAAe,CAAC;AAyDzC,QAAO;EAAE,SAvDO,cAEZ,kBACG,KAAK,QAAoC;GACxC,MAAM,aAAa,kBAAkB;AACrC,OAAI,CAAC,WACH,QAAO;GAGT,MAAM,EACJ,KAAK,MACL,OAAO,QACP,eAAe,gBACf,GAAG,iBACD;AACJ,UAAO;IACP,CACD,QAAQ,WAA0C,UAAU,KAAK,EACtE,CAAC,mBAAmB,kBAAkB,CAqCxB;EAAE,0BAlCe,cAAc;AAC7C,OAAI,CAAC,uBAAuB,CAAC,4BAC3B;GAGF,MAAM,mBAAmB,OAAO,KAAK,kBAAkB,CAAC,KAAK,SAAS;IACpE,KAAK,OAAO,IAAI;IAChB,OAAO,kBAAkB,KAAK;IAC9B,eAAe,kBAAkB,KAAK;IACvC,EAAE;AASH,UAAO;IACL,qBAR8C,kBAC7C,QAAQ,QAAQ,kBAAkB,QAAQ,KAAK,CAC/C,KAAK,SAAS;KACb,KAAK,OAAO,IAAI;KAChB,OAAO,kBAAkB,KAAK;KAC/B,EAGwC;IACzC;IACA,2BAA2B;IAC3B;IACA;IACD;KACA;GACD;GACA;GACA;GACA;GACA;GACA;GACD,CAEyC;EAAE;;;;ACnD9C,MAAa,oBAGX,EACA,OACA,YACA,aACA,QACA,WACA,UACA,mBACA,gBACA,qBACA,6BACA,mBACA,iBACA,GAAG,qBACwC;CAC3C,MAAM,EAAE,SAAS,6BAA6B,uBAAuB;EACnE;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,kBACH,eAAe,aAAa,UAAU,KAAK,MAC3C,UAAU,aAAa,UAAU,KAAK,KACvC,eAAe,2BAA2B;CAE5C,MAAM,EACJ,OAAO,aACP,UAAU,gBACV,aACA,GAAG,oBACD,eAAe,EAAE;CAErB,MAAM,0BAA0B,EAAE,GAAG,gBAAgB;AAErD,QAAO,wBAAwB;AAC/B,QAAO,wBAAwB;AAE/B,QACE,qBAAC,WAAD;EAAsB;YAAtB,CACE,oBAAC,YAAD;GACE,GAAI;GACJ,GAAK,cACD,EAAE,aAAa,GACf;IAAE,OAAO,eAAe;IAAO,UAAU;IAAgB;GAC7D,CAAA,EACF,oBAAC,SAAD,EAAA,UACE,oBAACA,cAAD,EAAA,UACE,qBAACA,aAAK,MAAN,EAAA,UAAA,CACG,QACD,oBAAC,WAAD;GACE,GAAI;GACK;GACT,OAAO;GACP,cAAA;GACA,UAAU;IAAE,GAAG;IAAU;IAA0B;GACnD,oBAAoB;GACpB,CAAA,CACQ,EAAA,CAAA,EACP,CAAA,EACC,CAAA,CACA"}
+{"version":3,"file":"index.mjs","names":["Card"],"sources":["../../../src/patterns/IndexTableLayout/useColumnConfiguration.ts","../../../src/patterns/IndexTableLayout/IndexTableLayout.tsx"],"sourcesContent":["import type { RowData } from '@tanstack/react-table';\nimport { useMemo } from 'react';\n\nimport type { TableViewConfigurationProps } from '#src/components/DataTable/TableControls';\nimport type { ColumnConfig } from '#src/components/DataTable/types';\n\ntype AttributeColumn = TableViewConfigurationProps['columnConfiguration'][number];\n\nexport interface ColumnDefinition<TData extends RowData> extends ColumnConfig<TData> {\n  key?: string;\n  label: string;\n  isCustomField?: boolean;\n}\n\nexport type ColumnDefinitions<TData extends RowData> = Record<string, ColumnDefinition<TData>>;\n\nexport interface UseColumnConfigurationOptions<TData extends RowData> {\n  columnDefinitions: ColumnDefinitions<TData>;\n  defaultColumns: string[];\n  columnConfiguration?: AttributeColumn[];\n  onColumnConfigurationChange?: (c: AttributeColumn[]) => void;\n  getColumnDisabled?: (columnId: string, shownColumnIds: string[]) => boolean;\n  sortByRelevance?: boolean;\n}\n\nexport const useColumnConfiguration = <TData extends RowData>({\n  columnDefinitions,\n  columnConfiguration,\n  onColumnConfigurationChange,\n  defaultColumns,\n  getColumnDisabled,\n  sortByRelevance,\n}: UseColumnConfigurationOptions<TData>): {\n  columns: ColumnConfig<TData>[];\n  columnConfigurationProps?: TableViewConfigurationProps;\n} => {\n  const visibleColumnKeys = useMemo(() => {\n    if (!columnConfiguration || columnConfiguration.length === 0) {\n      return defaultColumns;\n    }\n\n    return columnConfiguration.map((column) => column.key);\n  }, [columnConfiguration, defaultColumns]);\n\n  const columns = useMemo(\n    () =>\n      visibleColumnKeys\n        .map((key): ColumnConfig<TData> | null => {\n          const definition = columnDefinitions[key];\n          if (!definition) {\n            return null;\n          }\n\n          const {\n            key: _key,\n            label: _label,\n            isCustomField: _isCustomField,\n            ...columnConfig\n          } = definition;\n          return columnConfig;\n        })\n        .filter((column): column is ColumnConfig<TData> => column != null),\n    [visibleColumnKeys, columnDefinitions],\n  );\n\n  const columnConfigurationProps = useMemo(() => {\n    if (!columnConfiguration || !onColumnConfigurationChange) {\n      return undefined;\n    }\n\n    const attributeOptions = Object.keys(columnDefinitions).map((key) => ({\n      key: String(key),\n      label: columnDefinitions[key].label,\n      isCustomField: columnDefinitions[key].isCustomField,\n    }));\n\n    const currentConfiguration: AttributeColumn[] = visibleColumnKeys\n      .filter((key) => columnDefinitions[key] != null)\n      .map((key) => ({\n        key: String(key),\n        label: columnDefinitions[key].label,\n      }));\n\n    return {\n      columnConfiguration: currentConfiguration,\n      attributeOptions,\n      updateColumnConfiguration: onColumnConfigurationChange,\n      getColumnDisabled,\n      sortByRelevance,\n    };\n  }, [\n    columnConfiguration,\n    onColumnConfigurationChange,\n    columnDefinitions,\n    visibleColumnKeys,\n    getColumnDisabled,\n    sortByRelevance,\n  ]);\n\n  return { columns, columnConfigurationProps };\n};\n","import type { RowData } from '@tanstack/react-table';\nimport type { ReactNode } from 'react';\n\nimport type { BreadcrumbsProps } from '#src/components/Breadcrumbs';\nimport Card from '#src/components/Card';\nimport DataTable, { type DataTableProps } from '#src/components/DataTable';\nimport type {\n  BaseFilterConfig,\n  FilterConfig,\n  TableControlsProps,\n} from '#src/components/DataTable/TableControls';\nimport PageHeader, { type PageHeaderProps } from '#src/components/PageHeader';\nimport { Container, Section } from '#src/patterns/PageLayout';\n\nimport {\n  useColumnConfiguration,\n  type UseColumnConfigurationOptions,\n} from './useColumnConfiguration';\n\nexport type IndexTableLayoutHeaderProps =\n  | (Omit<Extract<PageHeaderProps, { breadcrumbs?: never }>, 'title'> & { title?: ReactNode })\n  | Extract<PageHeaderProps, { breadcrumbs: BreadcrumbsProps }>;\n\nexport interface IndexTableLayoutProps<\n  TData extends RowData,\n  TFilter extends BaseFilterConfig = FilterConfig,\n>\n  extends\n    Omit<\n      DataTableProps<TData, TFilter>,\n      | 'title'\n      | 'showControls'\n      | 'controls'\n      | 'columns'\n      | 'enableRowSelection'\n      | 'showColumnProperties'\n      | 'onUpdateColumnProperties'\n    >,\n    UseColumnConfigurationOptions<TData> {\n  title: string;\n  tableTitle?: string;\n  headerProps?: IndexTableLayoutHeaderProps;\n  banner?: ReactNode;\n  className?: string;\n  /** Host-built table controls: search, filters/filterResolver/filterPanel, saved-view ControlBar props, tableActions… */\n  controls?: Omit<TableControlsProps<TFilter>, 'columnConfigurationProps'>;\n}\n\nexport const IndexTableLayout = <\n  TData extends RowData,\n  TFilter extends BaseFilterConfig = FilterConfig,\n>({\n  title,\n  tableTitle,\n  headerProps,\n  banner,\n  className,\n  controls,\n  columnDefinitions,\n  defaultColumns,\n  columnConfiguration,\n  onColumnConfigurationChange,\n  getColumnDisabled,\n  sortByRelevance,\n  ...dataTableProps\n}: IndexTableLayoutProps<TData, TFilter>) => {\n  const { columns, columnConfigurationProps } = useColumnConfiguration({\n    columnDefinitions,\n    defaultColumns,\n    columnConfiguration,\n    onColumnConfigurationChange,\n    getColumnDisabled,\n    sortByRelevance,\n  });\n\n  const hasBulkActions =\n    (dataTableProps.bulkActions?.length ?? 0) > 0 ||\n    (controls?.bulkActions?.length ?? 0) > 0 ||\n    dataTableProps.getAvailableBulkActions != null;\n\n  const {\n    title: headerTitle,\n    subtitle: headerSubtitle,\n    breadcrumbs,\n    ...restHeaderProps\n  } = headerProps ?? {};\n\n  const forwardedDataTableProps = { ...dataTableProps } as typeof dataTableProps &\n    Pick<DataTableProps<TData, TFilter>, 'showColumnProperties' | 'onUpdateColumnProperties'>;\n  delete forwardedDataTableProps.showColumnProperties;\n  delete forwardedDataTableProps.onUpdateColumnProperties;\n\n  return (\n    <Container className={className}>\n      <PageHeader\n        {...restHeaderProps}\n        {...(breadcrumbs\n          ? { breadcrumbs }\n          : { title: headerTitle ?? title, subtitle: headerSubtitle })}\n      />\n      <Section>\n        <Card>\n          <Card.Body>\n            {banner}\n            <DataTable<TData, TFilter>\n              {...forwardedDataTableProps}\n              columns={columns}\n              title={tableTitle}\n              showControls\n              controls={{ ...controls, columnConfigurationProps }}\n              enableRowSelection={hasBulkActions}\n            />\n          </Card.Body>\n        </Card>\n      </Section>\n    </Container>\n  );\n};\n\nexport default IndexTableLayout;\n"],"mappings":";;;;;;;AAyBA,MAAa,0BAAiD,EAC5D,mBACA,qBACA,6BACA,gBACA,mBACA,sBAIG;CACH,MAAM,oBAAoB,cAAc;AACtC,MAAI,CAAC,uBAAuB,oBAAoB,WAAW,EACzD,QAAO;AAGT,SAAO,oBAAoB,KAAK,WAAW,OAAO,IAAI;IACrD,CAAC,qBAAqB,eAAe,CAAC;AAyDzC,QAAO;EAAE,SAvDO,cAEZ,kBACG,KAAK,QAAoC;GACxC,MAAM,aAAa,kBAAkB;AACrC,OAAI,CAAC,WACH,QAAO;GAGT,MAAM,EACJ,KAAK,MACL,OAAO,QACP,eAAe,gBACf,GAAG,iBACD;AACJ,UAAO;IACP,CACD,QAAQ,WAA0C,UAAU,KAAK,EACtE,CAAC,mBAAmB,kBAAkB,CAqCxB;EAAE,0BAlCe,cAAc;AAC7C,OAAI,CAAC,uBAAuB,CAAC,4BAC3B;GAGF,MAAM,mBAAmB,OAAO,KAAK,kBAAkB,CAAC,KAAK,SAAS;IACpE,KAAK,OAAO,IAAI;IAChB,OAAO,kBAAkB,KAAK;IAC9B,eAAe,kBAAkB,KAAK;IACvC,EAAE;AASH,UAAO;IACL,qBAR8C,kBAC7C,QAAQ,QAAQ,kBAAkB,QAAQ,KAAK,CAC/C,KAAK,SAAS;KACb,KAAK,OAAO,IAAI;KAChB,OAAO,kBAAkB,KAAK;KAC/B,EAGwC;IACzC;IACA,2BAA2B;IAC3B;IACA;IACD;KACA;GACD;GACA;GACA;GACA;GACA;GACA;GACD,CAEyC;EAAE;;;;ACnD9C,MAAa,oBAGX,EACA,OACA,YACA,aACA,QACA,WACA,UACA,mBACA,gBACA,qBACA,6BACA,mBACA,iBACA,GAAG,qBACwC;CAC3C,MAAM,EAAE,SAAS,6BAA6B,uBAAuB;EACnE;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,kBACH,eAAe,aAAa,UAAU,KAAK,MAC3C,UAAU,aAAa,UAAU,KAAK,KACvC,eAAe,2BAA2B;CAE5C,MAAM,EACJ,OAAO,aACP,UAAU,gBACV,aACA,GAAG,oBACD,eAAe,EAAE;CAErB,MAAM,0BAA0B,EAAE,GAAG,gBAAgB;AAErD,QAAO,wBAAwB;AAC/B,QAAO,wBAAwB;AAE/B,QACE,qBAAC,WAAD;EAAsB;YAAtB,CACE,oBAAC,YAAD;GACE,GAAI;GACJ,GAAK,cACD,EAAE,aAAa,GACf;IAAE,OAAO,eAAe;IAAO,UAAU;IAAgB;GAC7D,CAAA,EACF,oBAAC,SAAD,EAAA,UACE,oBAACA,cAAD,EAAA,UACE,qBAACA,aAAK,MAAN,EAAA,UAAA,CACG,QACD,oBAAC,WAAD;GACE,GAAI;GACK;GACT,OAAO;GACP,cAAA;GACA,UAAU;IAAE,GAAG;IAAU;IAA0B;GACnD,oBAAoB;GACpB,CAAA,CACQ,EAAA,CAAA,EACP,CAAA,EACC,CAAA,CACA"}

package/dist/patterns/LayoutLoadingShimmer/index.mjs

@@ -3,7 +3,7 @@ import { n as Stack, t as HStack } from "../../Stack-Bzom2BTR.mjs";
 import { t as LoadingShimmer } from "../../LoadingShimmer-oPIv2ESr.mjs";
 import { t as Card_default } from "../../CardV2-BRJbRSts.mjs";
 import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "../../Table-DPi4Dt5H.mjs";
-import { n as PageHeaderContainer } from "../../PageHeader-BzvA_NNt.mjs";
+import { n as PageHeaderContainer } from "../../PageHeader-DEKTopzU.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/patterns/containers.tsx

package/dist/patterns/LayoutLoadingShimmer/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["CardV2"],"sources":["../../../src/patterns/containers.tsx","../../../src/patterns/LayoutLoadingShimmer/LayoutLoadingShimmer.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport const Layout = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  padding: ${Spacing[7]};\n`;\n\nexport const DetailLayout = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  padding: ${Spacing[4]} ${Spacing[5]};\n`;\n","import styled from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport CardV2 from 'design-system/components/CardV2';\nimport { LoadingShimmer } from 'design-system/components/LoadingShimmer';\nimport { PageHeaderContainer } from 'design-system/components/PageHeader';\nimport Stack, { HStack } from 'design-system/components/Stack';\nimport Table, {\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeaderCell,\n  TableRow,\n} from 'design-system/components/Table';\nimport { Layout, DetailLayout } from 'design-system/patterns/containers';\n\nexport const DataTableShimmer = () => {\n  return (\n    <Stack>\n      <Table>\n        <TableHead>\n          <TableRow>\n            {Array.from({ length: 5 }).map((_, i) => (\n              <TableHeaderCell key={i}>\n                <LoadingShimmer width='100%' height='20px' />\n              </TableHeaderCell>\n            ))}\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {Array.from({ length: 8 }).map((_, i) => (\n            <TableRow key={i} disableHoverBackground>\n              {Array.from({ length: 5 }).map((_, i) => (\n                <TableCell key={i}>\n                  <LoadingShimmer width='100%' height='24px' />\n                </TableCell>\n              ))}\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Stack>\n  );\n};\n\nconst HeaderShimmer = () => {\n  return (\n    <PageHeaderContainer>\n      <LoadingShimmer width='150px' height='30px' />\n      <HStack>\n        <LoadingShimmer width='80px' height='30px' />\n        <LoadingShimmer width='80px' height='30px' />\n      </HStack>\n    </PageHeaderContainer>\n  );\n};\n\n/**\n * Render a single full-width card with a loading state mimicking a DataTable.\n */\nexport const IndexViewLayoutShimmer = () => {\n  return (\n    <>\n      <HeaderShimmer />\n      <Layout>\n        <CardV2>\n          <CardV2.Section>\n            <DataTableShimmer />\n          </CardV2.Section>\n        </CardV2>\n      </Layout>\n    </>\n  );\n};\n\n/**\n * Render `cards.length` full-width cards of the specified height in a loading state.\n */\nexport const SimpleLayoutShimmer = ({ cards = [400] }: { cards?: number[] }) => {\n  return (\n    <>\n      <HeaderShimmer />\n      <Layout>\n        <Stack spacing={Spacing[4]}>\n          {cards.map((height, i) => (\n            <CardV2 key={i} loading loadingProps={{ height: `${height}px` }}>\n              <></>\n            </CardV2>\n          ))}\n        </Stack>\n      </Layout>\n    </>\n  );\n};\n\nconst TabsDivider = styled.hr`\n  border-top: 1px solid ${Color.BorderDivider};\n  margin: 0;\n`;\n\nconst TabsShimmer = () => {\n  return (\n    <Stack>\n      <HStack>\n        <LoadingShimmer variant='secondary' width='100px' height='20px' />\n        <LoadingShimmer variant='secondary' width='100px' height='20px' />\n      </HStack>\n      <TabsDivider />\n    </Stack>\n  );\n};\n\nconst MainColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: ${Spacing[4]};\n  flex: 2;\n`;\n\nconst RightColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: ${Spacing[4]};\n  flex: 1;\n`;\n\nexport const ShowViewLayoutShimmer = () => {\n  return (\n    <>\n      <HeaderShimmer />\n      <DetailLayout>\n        <Stack spacing={Spacing[4]}>\n          <TabsShimmer />\n          <HStack spacing={Spacing[4]}>\n            <MainColumn>\n              <CardV2 heading={{ title: 'Loading' }} loading loadingProps={{ height: '100px' }}>\n                <></>\n              </CardV2>\n              <CardV2 heading={{ title: 'Loading' }} loading loadingProps={{ height: '400px' }}>\n                <></>\n              </CardV2>\n              <CardV2 heading={{ title: 'Loading' }} loading>\n                <></>\n              </CardV2>\n            </MainColumn>\n            <RightColumn>\n              <CardV2 heading={{ title: 'Loading' }} loading loadingProps={{ height: '400px' }}>\n                <></>\n              </CardV2>\n              <CardV2 heading={{ title: 'Loading' }} loading>\n                <></>\n              </CardV2>\n            </RightColumn>\n          </HStack>\n        </Stack>\n      </DetailLayout>\n    </>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["CardV2"],"sources":["../../../src/patterns/containers.tsx","../../../src/patterns/LayoutLoadingShimmer/LayoutLoadingShimmer.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport const Layout = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  padding: ${Spacing[7]};\n`;\n\nexport const DetailLayout = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  padding: ${Spacing[4]} ${Spacing[5]};\n`;\n","import styled from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\n\nimport CardV2 from '#src/components/CardV2';\nimport { LoadingShimmer } from '#src/components/LoadingShimmer';\nimport { PageHeaderContainer } from '#src/components/PageHeader';\nimport Stack, { HStack } from '#src/components/Stack';\nimport Table, {\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeaderCell,\n  TableRow,\n} from '#src/components/Table';\nimport { Layout, DetailLayout } from '#src/patterns/containers';\n\nexport const DataTableShimmer = () => {\n  return (\n    <Stack>\n      <Table>\n        <TableHead>\n          <TableRow>\n            {Array.from({ length: 5 }).map((_, i) => (\n              <TableHeaderCell key={i}>\n                <LoadingShimmer width='100%' height='20px' />\n              </TableHeaderCell>\n            ))}\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {Array.from({ length: 8 }).map((_, i) => (\n            <TableRow key={i} disableHoverBackground>\n              {Array.from({ length: 5 }).map((_, i) => (\n                <TableCell key={i}>\n                  <LoadingShimmer width='100%' height='24px' />\n                </TableCell>\n              ))}\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Stack>\n  );\n};\n\nconst HeaderShimmer = () => {\n  return (\n    <PageHeaderContainer>\n      <LoadingShimmer width='150px' height='30px' />\n      <HStack>\n        <LoadingShimmer width='80px' height='30px' />\n        <LoadingShimmer width='80px' height='30px' />\n      </HStack>\n    </PageHeaderContainer>\n  );\n};\n\n/**\n * Render a single full-width card with a loading state mimicking a DataTable.\n */\nexport const IndexViewLayoutShimmer = () => {\n  return (\n    <>\n      <HeaderShimmer />\n      <Layout>\n        <CardV2>\n          <CardV2.Section>\n            <DataTableShimmer />\n          </CardV2.Section>\n        </CardV2>\n      </Layout>\n    </>\n  );\n};\n\n/**\n * Render `cards.length` full-width cards of the specified height in a loading state.\n */\nexport const SimpleLayoutShimmer = ({ cards = [400] }: { cards?: number[] }) => {\n  return (\n    <>\n      <HeaderShimmer />\n      <Layout>\n        <Stack spacing={Spacing[4]}>\n          {cards.map((height, i) => (\n            <CardV2 key={i} loading loadingProps={{ height: `${height}px` }}>\n              <></>\n            </CardV2>\n          ))}\n        </Stack>\n      </Layout>\n    </>\n  );\n};\n\nconst TabsDivider = styled.hr`\n  border-top: 1px solid ${Color.BorderDivider};\n  margin: 0;\n`;\n\nconst TabsShimmer = () => {\n  return (\n    <Stack>\n      <HStack>\n        <LoadingShimmer variant='secondary' width='100px' height='20px' />\n        <LoadingShimmer variant='secondary' width='100px' height='20px' />\n      </HStack>\n      <TabsDivider />\n    </Stack>\n  );\n};\n\nconst MainColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: ${Spacing[4]};\n  flex: 2;\n`;\n\nconst RightColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: ${Spacing[4]};\n  flex: 1;\n`;\n\nexport const ShowViewLayoutShimmer = () => {\n  return (\n    <>\n      <HeaderShimmer />\n      <DetailLayout>\n        <Stack spacing={Spacing[4]}>\n          <TabsShimmer />\n          <HStack spacing={Spacing[4]}>\n            <MainColumn>\n              <CardV2 heading={{ title: 'Loading' }} loading loadingProps={{ height: '100px' }}>\n                <></>\n              </CardV2>\n              <CardV2 heading={{ title: 'Loading' }} loading loadingProps={{ height: '400px' }}>\n                <></>\n              </CardV2>\n              <CardV2 heading={{ title: 'Loading' }} loading>\n                <></>\n              </CardV2>\n            </MainColumn>\n            <RightColumn>\n              <CardV2 heading={{ title: 'Loading' }} loading loadingProps={{ height: '400px' }}>\n                <></>\n              </CardV2>\n              <CardV2 heading={{ title: 'Loading' }} loading>\n                <></>\n              </CardV2>\n            </RightColumn>\n          </HStack>\n        </Stack>\n      </DetailLayout>\n    </>\n  );\n};\n"],"mappings":"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"}