@persona/design-system 0.7.1 → 0.8.0

package/dist/components/CardV2/index.mjs

@@ -1,2 +1,2 @@
-import { n as CARD_HEADING_STICKY_OFFSET, t as Card_default } from "../../CardV2-M3o4BELp.mjs";
+import { n as CARD_HEADING_STICKY_OFFSET, t as Card_default } from "../../CardV2-D9p7D7jX.mjs";
 export { CARD_HEADING_STICKY_OFFSET, Card_default as Card, Card_default as default };

package/dist/components/Checkbox/index.d.mts

@@ -1,2 +1,2 @@
-import { n as CheckboxProps, t as Checkbox } from "../../Checkbox-C-hMfItK.mjs";
+import { n as CheckboxProps, t as Checkbox } from "../../Checkbox-DoJpxPEz.mjs";
 export { Checkbox, Checkbox as default, CheckboxProps };

package/dist/components/Checkbox/index.mjs

@@ -1,2 +1,2 @@
-import { t as Checkbox } from "../../Checkbox-CyWXhuby.mjs";
+import { t as Checkbox } from "../../Checkbox-DQynkc_I.mjs";
 export { Checkbox, Checkbox as default };

package/dist/components/CodeHighlight/index.mjs

@@ -2,7 +2,8 @@ import { a as styled } from "../../styledComponentsInterop-NxwFjeA4.mjs";
 import { t as useToggle } from "../../useToggle-DUHQjohK.mjs";
 import { Z_INDICES } from "../../lib/zindex.mjs";
 import { focusOutline } from "../../mixins/focus.mjs";
-import { n as Button } from "../../IconButton-CqTPMhjV.mjs";
+import { semanticScrollbar } from "../../mixins/scrollbar.mjs";
+import { n as Button } from "../../IconButton-CCLMYWVN.mjs";
 import PrismWithLanguages_default from "./PrismWithLanguages.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -62,6 +63,7 @@ const Pre = styled.pre`
   text-align: left;
   padding: 1rem; // Custom padding to match typical code block formatting
   overflow: auto;
+  ${semanticScrollbar}
 
   a {
     /* overwrite dashboard global styles */

package/dist/components/CodeHighlight/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Prism","ChevronRightIcon","ChevronDownIcon"],"sources":["../../../components/CodeHighlight/CodeHighlight.tsx","../../../components/CodeHighlight/index.ts"],"sourcesContent":["import { Highlight, type Language, type PrismTheme, themes } from 'prism-react-renderer';\nimport { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport Button from '@persona/design-system/components/Button';\nimport { Z_INDICES } from '@persona/design-system/lib/zindex';\nimport { focusOutline } from '@persona/design-system/mixins/focus';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { ArrowCollapseIcon, ArrowExpandIcon } from '@persona/icons';\nimport { ChevronDownIcon, ChevronRightIcon } from '@persona/icons/12px';\nimport useToggle from 'design-system/lib/useToggle';\n\nimport Prism from './PrismWithLanguages';\n\nconst LINE_HEIGHT = 1.5;\n\nexport const Wrapper = styled.div`\n  font-family: ${({ theme }) => theme.text.fontFamily.mono};\n  font-size: ${({ theme }) => theme.text.paragraph.sm.fontSize};\n  line-height: ${LINE_HEIGHT};\n  text-align: center;\n  position: relative;\n`;\n\nexport const ExpandButtonContainer = styled.div`\n  position: absolute;\n  top: ${Spacing[2]};\n  right: ${Spacing[4]};\n  display: flex;\n  gap: ${Spacing[1]};\n  z-index: ${Z_INDICES.withShadow};\n`;\n\nexport const CollapseTriangle = styled.button<{ $isCollapsed: boolean }>`\n  cursor: pointer;\n  user-select: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  margin-right: ${Spacing[1]};\n  color: ${Color.TextSecondary};\n  background: none;\n  border: none;\n  padding: 0;\n\n  &:hover {\n    color: ${Color.TextActive};\n  }\n\n  ${focusOutline}\n`;\n\nexport const Pre = styled.pre<{ expanded: boolean; rowsToShow?: number }>`\n  max-height: ${({ theme, expanded, rowsToShow }) => {\n    if (expanded || rowsToShow == null) {\n      return 'unset';\n    }\n\n    const charHeight = parseFloat(theme.text.paragraph.sm.fontSize);\n    const rowHeight = charHeight * LINE_HEIGHT;\n    const marginHeight = charHeight * 2; // margin is 1rem\n    // Row height + top/bottom padding\n    return `${rowsToShow * rowHeight + marginHeight}px`;\n  }};\n\n  border-radius: ${({ theme }) => theme.element.borderRadius};\n  font-family: inherit;\n  text-align: left;\n  padding: 1rem; // Custom padding to match typical code block formatting\n  overflow: auto;\n\n  a {\n    /* overwrite dashboard global styles */\n    font-size: inherit;\n    line-height: inherit;\n    text-decoration: underline;\n  }\n`;\n\nexport const Line = styled.div`\n  display: table-row;\n`;\n\nexport const LineNo = styled.span`\n  display: table-cell;\n  text-align: right;\n  padding-right: 1rem; // Custom padding for line number gutter spacing\n  user-select: none;\n  opacity: 0.5;\n`;\n\nexport const LineContent = styled.span`\n  display: table-cell;\n`;\n\nexport const IndentSpacer = styled.span`\n  display: inline-block;\n  width: 16px; // Match collapse triangle icon (12px) + margin (4px) for alignment\n`;\n\nexport const CollapsedItemCount = styled.span`\n  color: ${Color.TextSecondary};\n`;\n\n// mirrored from lib -- not exported\ntype Token = {\n  types: string[];\n  content: string;\n  empty?: boolean;\n};\n\ntype CollapsibleRegion = {\n  startLine: number;\n  endLine: number;\n  type: 'object' | 'array';\n  itemCount: number;\n};\n\n// Analyzes JSON structure from Prism tokens to find collapsible regions\n// This correctly handles brackets/braces inside strings by using tokenization\nconst analyzeJsonStructure = (\n  tokens: Token[][],\n  jsonString: string,\n): Map<number, CollapsibleRegion> => {\n  const collapsibleRegions = new Map<number, CollapsibleRegion>();\n\n  try {\n    // Validate JSON is parseable\n    const parsed = JSON.parse(jsonString);\n\n    // Use a stack to track opening brackets/braces with their line numbers\n    const stack: Array<{ line: number; char: '{' | '['; depth: number }> = [];\n    let depth = 0;\n\n    tokens.forEach((line, lineNum) => {\n      line.forEach((token) => {\n        // Only process punctuation tokens (not strings)\n        if (token.types.includes('punctuation')) {\n          if (token.content === '{' || token.content === '[') {\n            stack.push({ line: lineNum, char: token.content, depth });\n            depth++;\n          } else if (token.content === '}' || token.content === ']') {\n            depth--;\n            const opening = stack.pop();\n\n            if (opening && opening.line < lineNum) {\n              // This is a multi-line object/array\n              const startLine = opening.line;\n              const endLine = lineNum;\n\n              // Skip root-level (depth 0) regions\n              if (opening.depth === 0) {\n                return;\n              }\n\n              // Count items in this region\n              const itemCount = countItemsInRegion(\n                parsed,\n                tokens,\n                startLine,\n                endLine,\n                opening.char,\n              );\n\n              // Only add regions with items (skip empty objects/arrays)\n              if (itemCount > 0) {\n                collapsibleRegions.set(startLine, {\n                  startLine,\n                  endLine,\n                  type: opening.char === '{' ? 'object' : 'array',\n                  itemCount,\n                });\n              }\n            }\n          }\n        }\n      });\n    });\n  } catch {\n    // If JSON is invalid, return empty map\n    return new Map();\n  }\n\n  return collapsibleRegions;\n};\n\n// Count items in a collapsible region by counting commas at the same depth\nconst countItemsInRegion = (\n  _parsed: unknown,\n  tokens: Token[][],\n  startLine: number,\n  endLine: number,\n  openChar: '{' | '[',\n): number => {\n  let itemCount = 0;\n  let depth = 0;\n\n  // Iterate through lines in the region\n  for (let i = startLine; i <= endLine; i++) {\n    tokens[i]?.forEach((token) => {\n      if (!token.types.includes('punctuation')) {\n        return;\n      }\n\n      // Track depth\n      if (token.content === openChar) {\n        depth++;\n      } else if (token.content === (openChar === '{' ? '}' : ']')) {\n        depth--;\n      }\n\n      // Count commas at depth 1 (immediate children)\n      if (token.content === ',' && depth === 1) {\n        itemCount++;\n      }\n    });\n  }\n\n  // Items = commas + 1 (if any content exists)\n  return itemCount > 0 ? itemCount + 1 : 0;\n};\n\ninterface CodeHighlightProps {\n  id?: string;\n  children: string;\n  language?: Language;\n  rowsToShow?: number;\n  light?: boolean;\n  className?: string;\n  resolveEntityLink?: (token: string) => string | undefined;\n}\n\nconst CodeHighlight = ({\n  id,\n  children = '',\n  language = 'markup',\n  rowsToShow,\n  light = false,\n  className,\n  resolveEntityLink,\n}: CodeHighlightProps) => {\n  const [expanded, { toggle: toggleExpanded }] = useToggle();\n  const rowCount = useMemo(() => children.match(/\\n/g)?.length ?? 0, [children]);\n\n  // JSON folding state\n  const [collapsedLines, setCollapsedLines] = useState<Set<number>>(new Set());\n  const [hasCollapsibleRegions, setHasCollapsibleRegions] = useState(false);\n  const collapsibleRegionsRef = useRef<Map<number, CollapsibleRegion>>(new Map());\n\n  // Sync hasCollapsibleRegions state from ref after render (avoids state update during render)\n  useLayoutEffect(() => {\n    if (language !== 'json') {\n      if (hasCollapsibleRegions) {\n        setHasCollapsibleRegions(false);\n      }\n      return;\n    }\n\n    const hasRegions = collapsibleRegionsRef.current.size > 0;\n    if (hasRegions !== hasCollapsibleRegions) {\n      setHasCollapsibleRegions(hasRegions);\n    }\n  });\n\n  const toggleLineCollapse = useCallback(\n    (lineNumber: number, event?: React.KeyboardEvent | React.MouseEvent) => {\n      // Prevent default if it's a keyboard event to avoid page scrolling\n      if (event && 'key' in event) {\n        event.preventDefault();\n      }\n\n      setCollapsedLines((prev) => {\n        const next = new Set(prev);\n        if (next.has(lineNumber)) {\n          next.delete(lineNumber);\n        } else {\n          next.add(lineNumber);\n        }\n        return next;\n      });\n    },\n    [],\n  );\n\n  const collapseAll = useCallback(() => {\n    setCollapsedLines(new Set(collapsibleRegionsRef.current.keys()));\n  }, []);\n\n  const expandAll = useCallback(() => {\n    setCollapsedLines(new Set());\n  }, []);\n\n  const allowExpanding = rowsToShow != null && rowsToShow < rowCount;\n\n  return (\n    <Wrapper className={className}>\n      {(allowExpanding || hasCollapsibleRegions) && (\n        <ExpandButtonContainer>\n          {hasCollapsibleRegions && (\n            <>\n              <Button\n                id={`code-highlight__${id}__collapse-all`}\n                size='sm'\n                variant='inverse'\n                onClick={collapseAll}\n                aria-label='Collapse all JSON regions'\n                data-test='code-highlight__collapse-all'\n              >\n                Collapse All\n              </Button>\n              <Button\n                id={`code-highlight__${id}__expand-all`}\n                size='sm'\n                variant='inverse'\n                onClick={expandAll}\n                aria-label='Expand all JSON regions'\n                data-test='code-highlight__expand-all'\n              >\n                Expand All\n              </Button>\n            </>\n          )}\n          {allowExpanding && (\n            <Button\n              id={`code-highlight__${id}__expand-button`}\n              size='sm'\n              width='icon'\n              onClick={toggleExpanded}\n              variant='inverse'\n              data-test='code-highlight__expand'\n            >\n              {expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n            </Button>\n          )}\n        </ExpandButtonContainer>\n      )}\n      <Highlight\n        data-test='code-highlight'\n        theme={light ? themes.nightOwlLight : THEME}\n        code={children}\n        prism={Prism}\n        language={language}\n      >\n        {({ className, style, tokens, getLineProps, getTokenProps }) => {\n          // Compute collapsible regions from tokens (only for JSON)\n          const collapsibleRegions =\n            language === 'json' ? analyzeJsonStructure(tokens, children) : new Map();\n\n          // Update ref (state will be synced in useLayoutEffect)\n          collapsibleRegionsRef.current = collapsibleRegions;\n\n          const isJsonFoldingEnabled = collapsibleRegions.size > 0;\n\n          // Determine which lines should be hidden based on collapsed state\n          const hiddenLines = new Set<number>();\n          collapsedLines.forEach((collapsedLine) => {\n            const region = collapsibleRegions.get(collapsedLine);\n            if (region) {\n              // Hide all lines between start and end (exclusive)\n              for (let i = region.startLine + 1; i <= region.endLine; i++) {\n                hiddenLines.add(i);\n              }\n            }\n          });\n\n          return (\n            <Pre\n              className={className}\n              style={style}\n              data-test={id}\n              expanded={expanded}\n              rowsToShow={rowsToShow}\n            >\n              {tokens.map((line, i) => {\n                // Skip hidden lines\n                if (hiddenLines.has(i)) {\n                  return null;\n                }\n\n                const region = collapsibleRegions.get(i);\n                const isCollapsed = collapsedLines.has(i);\n                const isCollapsible = region != null;\n\n                return (\n                  <Line key={i} {...getLineProps({ line, key: i })}>\n                    <LineNo>{i + 1}</LineNo>\n                    <LineContent>\n                      {isCollapsible && (\n                        <CollapseTriangle\n                          $isCollapsed={isCollapsed}\n                          onClick={(e) => toggleLineCollapse(i, e)}\n                          onKeyDown={(e) => {\n                            if (e.key === 'Enter' || e.key === ' ') {\n                              toggleLineCollapse(i, e);\n                            }\n                          }}\n                          aria-expanded={!isCollapsed}\n                          aria-label={`${isCollapsed ? 'Expand' : 'Collapse'} JSON ${region?.type} with ${region?.itemCount} items`}\n                          type='button'\n                          tabIndex={0}\n                          data-test={`code-highlight__collapse-toggle__${i}`}\n                        >\n                          {isCollapsed ? <ChevronRightIcon /> : <ChevronDownIcon />}\n                        </CollapseTriangle>\n                      )}\n                      {!isCollapsible && isJsonFoldingEnabled && <IndentSpacer />}\n                      {isCollapsed && region ? (\n                        // Render collapsed representation\n                        <>\n                          {line.map((token, key) => {\n                            const tokenProps = getTokenProps({ token, key });\n                            // Only render up to the opening bracket\n                            if (token.content === '{' || token.content === '[') {\n                              return (\n                                <span key={key}>\n                                  <span {...tokenProps} />\n                                  <CollapsedItemCount>\n                                    {` ${region.itemCount} ${region.itemCount === 1 ? 'item' : 'items'} `}\n                                  </CollapsedItemCount>\n                                  <span {...tokenProps}>\n                                    {region.type === 'object' ? '}' : ']'}\n                                  </span>\n                                </span>\n                              );\n                            }\n                            // Render tokens before the bracket\n                            return <span key={key} {...tokenProps} />;\n                          })}\n                        </>\n                      ) : (\n                        // Render normal line\n                        <>\n                          {line.map((token, key) => {\n                            const tokenProps = getTokenProps({ token, key });\n                            const tokenLink =\n                              resolveEntityLink != null && token.types[0] === 'string'\n                                ? resolveEntityLink(\n                                    token.content.slice(1, token.content.length - 1),\n                                  )\n                                : undefined;\n\n                            return tokenLink != null ? (\n                              <span {...tokenProps}>\n                                &quot;\n                                <Link to={tokenLink} {...tokenProps}>\n                                  {tokenProps.children.slice(1, tokenProps.children.length - 1)}\n                                </Link>\n                                &quot;\n                              </span>\n                            ) : (\n                              <span key={key} {...tokenProps} />\n                            );\n                          })}\n                        </>\n                      )}\n                    </LineContent>\n                  </Line>\n                );\n              })}\n            </Pre>\n          );\n        }}\n      </Highlight>\n    </Wrapper>\n  );\n};\n\nexport default CodeHighlight;\n\n// Based off of https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/themes/duotoneDark.js\n// NOTE: This theme uses hardcoded hex colors instead of design tokens because it's a specialized\n// syntax highlighting theme for the prism-react-renderer library. The colors are carefully chosen\n// for code readability and are not semantic UI colors from our design system.\nconst THEME: PrismTheme = {\n  plain: {\n    backgroundColor: '#161320', // edited\n    color: '#9a86fd',\n  },\n  styles: [\n    {\n      types: ['comment', 'prolog', 'doctype', 'cdata', 'punctuation'],\n      style: {\n        color: '#6c6783',\n      },\n    },\n    {\n      types: ['namespace'],\n      style: {\n        opacity: 0.7,\n      },\n    },\n    {\n      types: ['tag', 'operator', 'number', 'keyword'],\n      style: {\n        color: '#e09142',\n        fontWeight: 'bold', // added for more contrast\n      },\n    },\n    {\n      types: ['property', 'function'],\n      style: {\n        color: '#9a86fd',\n      },\n    },\n    {\n      types: ['tag-id', 'selector', 'atrule-id'],\n      style: {\n        color: '#eeebff',\n      },\n    },\n    {\n      types: ['attr-name'],\n      style: {\n        color: '#c4b9fe',\n      },\n    },\n    {\n      types: [\n        'boolean',\n        'string',\n        'entity',\n        'url',\n        'attr-value',\n        'control',\n        'directive',\n        'unit',\n        'statement',\n        'regex',\n        'at-rule',\n        'placeholder',\n        'variable',\n      ],\n      style: {\n        color: '#ffcc99',\n      },\n    },\n    {\n      types: ['deleted'],\n      style: {\n        textDecorationLine: 'line-through',\n      },\n    },\n    {\n      types: ['inserted'],\n      style: {\n        textDecorationLine: 'underline',\n      },\n    },\n    {\n      types: ['italic'],\n      style: {\n        fontStyle: 'italic',\n      },\n    },\n    {\n      types: ['important', 'bold'],\n      style: {\n        fontWeight: 'bold',\n      },\n    },\n    {\n      types: ['important'],\n      style: {\n        color: '#c4b9fe',\n      },\n    },\n  ],\n};\n","import CodeHighlight from './CodeHighlight';\n\nexport default CodeHighlight;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["Prism","ChevronRightIcon","ChevronDownIcon"],"sources":["../../../components/CodeHighlight/CodeHighlight.tsx","../../../components/CodeHighlight/index.ts"],"sourcesContent":["import { Highlight, type Language, type PrismTheme, themes } from 'prism-react-renderer';\nimport { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport Button from '@persona/design-system/components/Button';\nimport { Z_INDICES } from '@persona/design-system/lib/zindex';\nimport { focusOutline } from '@persona/design-system/mixins/focus';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { ArrowCollapseIcon, ArrowExpandIcon } from '@persona/icons';\nimport { ChevronDownIcon, ChevronRightIcon } from '@persona/icons/12px';\nimport useToggle from 'design-system/lib/useToggle';\nimport { semanticScrollbar } from 'design-system/mixins/scrollbar';\n\nimport Prism from './PrismWithLanguages';\n\nconst LINE_HEIGHT = 1.5;\n\nexport const Wrapper = styled.div`\n  font-family: ${({ theme }) => theme.text.fontFamily.mono};\n  font-size: ${({ theme }) => theme.text.paragraph.sm.fontSize};\n  line-height: ${LINE_HEIGHT};\n  text-align: center;\n  position: relative;\n`;\n\nexport const ExpandButtonContainer = styled.div`\n  position: absolute;\n  top: ${Spacing[2]};\n  right: ${Spacing[4]};\n  display: flex;\n  gap: ${Spacing[1]};\n  z-index: ${Z_INDICES.withShadow};\n`;\n\nexport const CollapseTriangle = styled.button<{ $isCollapsed: boolean }>`\n  cursor: pointer;\n  user-select: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  margin-right: ${Spacing[1]};\n  color: ${Color.TextSecondary};\n  background: none;\n  border: none;\n  padding: 0;\n\n  &:hover {\n    color: ${Color.TextActive};\n  }\n\n  ${focusOutline}\n`;\n\nexport const Pre = styled.pre<{ expanded: boolean; rowsToShow?: number }>`\n  max-height: ${({ theme, expanded, rowsToShow }) => {\n    if (expanded || rowsToShow == null) {\n      return 'unset';\n    }\n\n    const charHeight = parseFloat(theme.text.paragraph.sm.fontSize);\n    const rowHeight = charHeight * LINE_HEIGHT;\n    const marginHeight = charHeight * 2; // margin is 1rem\n    // Row height + top/bottom padding\n    return `${rowsToShow * rowHeight + marginHeight}px`;\n  }};\n\n  border-radius: ${({ theme }) => theme.element.borderRadius};\n  font-family: inherit;\n  text-align: left;\n  padding: 1rem; // Custom padding to match typical code block formatting\n  overflow: auto;\n  ${semanticScrollbar}\n\n  a {\n    /* overwrite dashboard global styles */\n    font-size: inherit;\n    line-height: inherit;\n    text-decoration: underline;\n  }\n`;\n\nexport const Line = styled.div`\n  display: table-row;\n`;\n\nexport const LineNo = styled.span`\n  display: table-cell;\n  text-align: right;\n  padding-right: 1rem; // Custom padding for line number gutter spacing\n  user-select: none;\n  opacity: 0.5;\n`;\n\nexport const LineContent = styled.span`\n  display: table-cell;\n`;\n\nexport const IndentSpacer = styled.span`\n  display: inline-block;\n  width: 16px; // Match collapse triangle icon (12px) + margin (4px) for alignment\n`;\n\nexport const CollapsedItemCount = styled.span`\n  color: ${Color.TextSecondary};\n`;\n\n// mirrored from lib -- not exported\ntype Token = {\n  types: string[];\n  content: string;\n  empty?: boolean;\n};\n\ntype CollapsibleRegion = {\n  startLine: number;\n  endLine: number;\n  type: 'object' | 'array';\n  itemCount: number;\n};\n\n// Analyzes JSON structure from Prism tokens to find collapsible regions\n// This correctly handles brackets/braces inside strings by using tokenization\nconst analyzeJsonStructure = (\n  tokens: Token[][],\n  jsonString: string,\n): Map<number, CollapsibleRegion> => {\n  const collapsibleRegions = new Map<number, CollapsibleRegion>();\n\n  try {\n    // Validate JSON is parseable\n    const parsed = JSON.parse(jsonString);\n\n    // Use a stack to track opening brackets/braces with their line numbers\n    const stack: Array<{ line: number; char: '{' | '['; depth: number }> = [];\n    let depth = 0;\n\n    tokens.forEach((line, lineNum) => {\n      line.forEach((token) => {\n        // Only process punctuation tokens (not strings)\n        if (token.types.includes('punctuation')) {\n          if (token.content === '{' || token.content === '[') {\n            stack.push({ line: lineNum, char: token.content, depth });\n            depth++;\n          } else if (token.content === '}' || token.content === ']') {\n            depth--;\n            const opening = stack.pop();\n\n            if (opening && opening.line < lineNum) {\n              // This is a multi-line object/array\n              const startLine = opening.line;\n              const endLine = lineNum;\n\n              // Skip root-level (depth 0) regions\n              if (opening.depth === 0) {\n                return;\n              }\n\n              // Count items in this region\n              const itemCount = countItemsInRegion(\n                parsed,\n                tokens,\n                startLine,\n                endLine,\n                opening.char,\n              );\n\n              // Only add regions with items (skip empty objects/arrays)\n              if (itemCount > 0) {\n                collapsibleRegions.set(startLine, {\n                  startLine,\n                  endLine,\n                  type: opening.char === '{' ? 'object' : 'array',\n                  itemCount,\n                });\n              }\n            }\n          }\n        }\n      });\n    });\n  } catch {\n    // If JSON is invalid, return empty map\n    return new Map();\n  }\n\n  return collapsibleRegions;\n};\n\n// Count items in a collapsible region by counting commas at the same depth\nconst countItemsInRegion = (\n  _parsed: unknown,\n  tokens: Token[][],\n  startLine: number,\n  endLine: number,\n  openChar: '{' | '[',\n): number => {\n  let itemCount = 0;\n  let depth = 0;\n\n  // Iterate through lines in the region\n  for (let i = startLine; i <= endLine; i++) {\n    tokens[i]?.forEach((token) => {\n      if (!token.types.includes('punctuation')) {\n        return;\n      }\n\n      // Track depth\n      if (token.content === openChar) {\n        depth++;\n      } else if (token.content === (openChar === '{' ? '}' : ']')) {\n        depth--;\n      }\n\n      // Count commas at depth 1 (immediate children)\n      if (token.content === ',' && depth === 1) {\n        itemCount++;\n      }\n    });\n  }\n\n  // Items = commas + 1 (if any content exists)\n  return itemCount > 0 ? itemCount + 1 : 0;\n};\n\ninterface CodeHighlightProps {\n  id?: string;\n  children: string;\n  language?: Language;\n  rowsToShow?: number;\n  light?: boolean;\n  className?: string;\n  resolveEntityLink?: (token: string) => string | undefined;\n}\n\nconst CodeHighlight = ({\n  id,\n  children = '',\n  language = 'markup',\n  rowsToShow,\n  light = false,\n  className,\n  resolveEntityLink,\n}: CodeHighlightProps) => {\n  const [expanded, { toggle: toggleExpanded }] = useToggle();\n  const rowCount = useMemo(() => children.match(/\\n/g)?.length ?? 0, [children]);\n\n  // JSON folding state\n  const [collapsedLines, setCollapsedLines] = useState<Set<number>>(new Set());\n  const [hasCollapsibleRegions, setHasCollapsibleRegions] = useState(false);\n  const collapsibleRegionsRef = useRef<Map<number, CollapsibleRegion>>(new Map());\n\n  // Sync hasCollapsibleRegions state from ref after render (avoids state update during render)\n  useLayoutEffect(() => {\n    if (language !== 'json') {\n      if (hasCollapsibleRegions) {\n        setHasCollapsibleRegions(false);\n      }\n      return;\n    }\n\n    const hasRegions = collapsibleRegionsRef.current.size > 0;\n    if (hasRegions !== hasCollapsibleRegions) {\n      setHasCollapsibleRegions(hasRegions);\n    }\n  });\n\n  const toggleLineCollapse = useCallback(\n    (lineNumber: number, event?: React.KeyboardEvent | React.MouseEvent) => {\n      // Prevent default if it's a keyboard event to avoid page scrolling\n      if (event && 'key' in event) {\n        event.preventDefault();\n      }\n\n      setCollapsedLines((prev) => {\n        const next = new Set(prev);\n        if (next.has(lineNumber)) {\n          next.delete(lineNumber);\n        } else {\n          next.add(lineNumber);\n        }\n        return next;\n      });\n    },\n    [],\n  );\n\n  const collapseAll = useCallback(() => {\n    setCollapsedLines(new Set(collapsibleRegionsRef.current.keys()));\n  }, []);\n\n  const expandAll = useCallback(() => {\n    setCollapsedLines(new Set());\n  }, []);\n\n  const allowExpanding = rowsToShow != null && rowsToShow < rowCount;\n\n  return (\n    <Wrapper className={className}>\n      {(allowExpanding || hasCollapsibleRegions) && (\n        <ExpandButtonContainer>\n          {hasCollapsibleRegions && (\n            <>\n              <Button\n                id={`code-highlight__${id}__collapse-all`}\n                size='sm'\n                variant='inverse'\n                onClick={collapseAll}\n                aria-label='Collapse all JSON regions'\n                data-test='code-highlight__collapse-all'\n              >\n                Collapse All\n              </Button>\n              <Button\n                id={`code-highlight__${id}__expand-all`}\n                size='sm'\n                variant='inverse'\n                onClick={expandAll}\n                aria-label='Expand all JSON regions'\n                data-test='code-highlight__expand-all'\n              >\n                Expand All\n              </Button>\n            </>\n          )}\n          {allowExpanding && (\n            <Button\n              id={`code-highlight__${id}__expand-button`}\n              size='sm'\n              width='icon'\n              onClick={toggleExpanded}\n              variant='inverse'\n              data-test='code-highlight__expand'\n            >\n              {expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n            </Button>\n          )}\n        </ExpandButtonContainer>\n      )}\n      <Highlight\n        data-test='code-highlight'\n        theme={light ? themes.nightOwlLight : THEME}\n        code={children}\n        prism={Prism}\n        language={language}\n      >\n        {({ className, style, tokens, getLineProps, getTokenProps }) => {\n          // Compute collapsible regions from tokens (only for JSON)\n          const collapsibleRegions =\n            language === 'json' ? analyzeJsonStructure(tokens, children) : new Map();\n\n          // Update ref (state will be synced in useLayoutEffect)\n          collapsibleRegionsRef.current = collapsibleRegions;\n\n          const isJsonFoldingEnabled = collapsibleRegions.size > 0;\n\n          // Determine which lines should be hidden based on collapsed state\n          const hiddenLines = new Set<number>();\n          collapsedLines.forEach((collapsedLine) => {\n            const region = collapsibleRegions.get(collapsedLine);\n            if (region) {\n              // Hide all lines between start and end (exclusive)\n              for (let i = region.startLine + 1; i <= region.endLine; i++) {\n                hiddenLines.add(i);\n              }\n            }\n          });\n\n          return (\n            <Pre\n              className={className}\n              style={style}\n              data-test={id}\n              expanded={expanded}\n              rowsToShow={rowsToShow}\n            >\n              {tokens.map((line, i) => {\n                // Skip hidden lines\n                if (hiddenLines.has(i)) {\n                  return null;\n                }\n\n                const region = collapsibleRegions.get(i);\n                const isCollapsed = collapsedLines.has(i);\n                const isCollapsible = region != null;\n\n                return (\n                  <Line key={i} {...getLineProps({ line, key: i })}>\n                    <LineNo>{i + 1}</LineNo>\n                    <LineContent>\n                      {isCollapsible && (\n                        <CollapseTriangle\n                          $isCollapsed={isCollapsed}\n                          onClick={(e) => toggleLineCollapse(i, e)}\n                          onKeyDown={(e) => {\n                            if (e.key === 'Enter' || e.key === ' ') {\n                              toggleLineCollapse(i, e);\n                            }\n                          }}\n                          aria-expanded={!isCollapsed}\n                          aria-label={`${isCollapsed ? 'Expand' : 'Collapse'} JSON ${region?.type} with ${region?.itemCount} items`}\n                          type='button'\n                          tabIndex={0}\n                          data-test={`code-highlight__collapse-toggle__${i}`}\n                        >\n                          {isCollapsed ? <ChevronRightIcon /> : <ChevronDownIcon />}\n                        </CollapseTriangle>\n                      )}\n                      {!isCollapsible && isJsonFoldingEnabled && <IndentSpacer />}\n                      {isCollapsed && region ? (\n                        // Render collapsed representation\n                        <>\n                          {line.map((token, key) => {\n                            const tokenProps = getTokenProps({ token, key });\n                            // Only render up to the opening bracket\n                            if (token.content === '{' || token.content === '[') {\n                              return (\n                                <span key={key}>\n                                  <span {...tokenProps} />\n                                  <CollapsedItemCount>\n                                    {` ${region.itemCount} ${region.itemCount === 1 ? 'item' : 'items'} `}\n                                  </CollapsedItemCount>\n                                  <span {...tokenProps}>\n                                    {region.type === 'object' ? '}' : ']'}\n                                  </span>\n                                </span>\n                              );\n                            }\n                            // Render tokens before the bracket\n                            return <span key={key} {...tokenProps} />;\n                          })}\n                        </>\n                      ) : (\n                        // Render normal line\n                        <>\n                          {line.map((token, key) => {\n                            const tokenProps = getTokenProps({ token, key });\n                            const tokenLink =\n                              resolveEntityLink != null && token.types[0] === 'string'\n                                ? resolveEntityLink(\n                                    token.content.slice(1, token.content.length - 1),\n                                  )\n                                : undefined;\n\n                            return tokenLink != null ? (\n                              <span {...tokenProps}>\n                                &quot;\n                                <Link to={tokenLink} {...tokenProps}>\n                                  {tokenProps.children.slice(1, tokenProps.children.length - 1)}\n                                </Link>\n                                &quot;\n                              </span>\n                            ) : (\n                              <span key={key} {...tokenProps} />\n                            );\n                          })}\n                        </>\n                      )}\n                    </LineContent>\n                  </Line>\n                );\n              })}\n            </Pre>\n          );\n        }}\n      </Highlight>\n    </Wrapper>\n  );\n};\n\nexport default CodeHighlight;\n\n// Based off of https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/themes/duotoneDark.js\n// NOTE: This theme uses hardcoded hex colors instead of design tokens because it's a specialized\n// syntax highlighting theme for the prism-react-renderer library. The colors are carefully chosen\n// for code readability and are not semantic UI colors from our design system.\nconst THEME: PrismTheme = {\n  plain: {\n    backgroundColor: '#161320', // edited\n    color: '#9a86fd',\n  },\n  styles: [\n    {\n      types: ['comment', 'prolog', 'doctype', 'cdata', 'punctuation'],\n      style: {\n        color: '#6c6783',\n      },\n    },\n    {\n      types: ['namespace'],\n      style: {\n        opacity: 0.7,\n      },\n    },\n    {\n      types: ['tag', 'operator', 'number', 'keyword'],\n      style: {\n        color: '#e09142',\n        fontWeight: 'bold', // added for more contrast\n      },\n    },\n    {\n      types: ['property', 'function'],\n      style: {\n        color: '#9a86fd',\n      },\n    },\n    {\n      types: ['tag-id', 'selector', 'atrule-id'],\n      style: {\n        color: '#eeebff',\n      },\n    },\n    {\n      types: ['attr-name'],\n      style: {\n        color: '#c4b9fe',\n      },\n    },\n    {\n      types: [\n        'boolean',\n        'string',\n        'entity',\n        'url',\n        'attr-value',\n        'control',\n        'directive',\n        'unit',\n        'statement',\n        'regex',\n        'at-rule',\n        'placeholder',\n        'variable',\n      ],\n      style: {\n        color: '#ffcc99',\n      },\n    },\n    {\n      types: ['deleted'],\n      style: {\n        textDecorationLine: 'line-through',\n      },\n    },\n    {\n      types: ['inserted'],\n      style: {\n        textDecorationLine: 'underline',\n      },\n    },\n    {\n      types: ['italic'],\n      style: {\n        fontStyle: 'italic',\n      },\n    },\n    {\n      types: ['important', 'bold'],\n      style: {\n        fontWeight: 'bold',\n      },\n    },\n    {\n      types: ['important'],\n      style: {\n        color: '#c4b9fe',\n      },\n    },\n  ],\n};\n","import CodeHighlight from './CodeHighlight';\n\nexport default CodeHighlight;\n"],"mappings":"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"}

package/dist/components/Combobox/index.d.mts

@@ -1,3 +1,3 @@
-import { D as flattenOptions, a as ComboboxOptionGroup, i as ComboboxOption, o as ComboboxOptionsOrGroups, t as CaretButton } from "../../ComboboxBase-B3YqkjQp.mjs";
-import { n as ComboboxProps, t as Combobox } from "../../Combobox-DyNllwt8.mjs";
+import { D as flattenOptions, a as ComboboxOptionGroup, i as ComboboxOption, o as ComboboxOptionsOrGroups, t as CaretButton } from "../../ComboboxBase-BMCY6O7Y.mjs";
+import { n as ComboboxProps, t as Combobox } from "../../Combobox-D7hyf-jA.mjs";
 export { CaretButton, Combobox, Combobox as default, ComboboxOption, ComboboxOptionGroup, ComboboxOptionsOrGroups, ComboboxProps, flattenOptions };

package/dist/components/Combobox/index.mjs

@@ -1,2 +1,2 @@
-import { n as CaretButton, r as flattenOptions, t as Combobox } from "../../Combobox-1M6EwVmq.mjs";
+import { n as CaretButton, r as flattenOptions, t as Combobox } from "../../Combobox-C_kCY3P3.mjs";
 export { CaretButton, Combobox, Combobox as default, flattenOptions };

package/dist/components/ConfigFormGroup/index.mjs

@@ -1,3 +1,3 @@
-import { n as useFormGroup, t as FormGroupContext } from "../../useFormGroup-CH3kiXoa.mjs";
-import { t as ConfigFormGroup } from "../../ConfigFormGroup-Cz7GeTYd.mjs";
+import { n as useFormGroup, t as FormGroupContext } from "../../useFormGroup-C7Cax8zO.mjs";
+import { t as ConfigFormGroup } from "../../ConfigFormGroup-DLOZOuLf.mjs";
 export { ConfigFormGroup, ConfigFormGroup as default, FormGroupContext, useFormGroup };

package/dist/components/DataTable/TableControls/index.d.mts

@@ -1,20 +1,20 @@
-import { n as ControlBarProps, t as ControlBar } from "../../../ControlBar-C8kagIck.mjs";
-import { n as DataTableCompactBar } from "../../../CompactBar-DhHh7Roq.mjs";
-import { i as TableViewConfigurationProps, n as TableViewConfigurationDropdown, r as TableViewConfigurationDropdownProps, t as TableViewConfiguration } from "../../../TableViewConfigurationDropdown-CCtwcB3I.mjs";
-import { i as useTableControls, n as TableControlsContextProps, r as TableControlsProvider, t as TableControlsContext } from "../../../TableControlsContext-C3DYeUmB.mjs";
-import { t as dateRuleIntent } from "../../../date-rule-intent-CC1LdkE7.mjs";
-import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, h as isEmptyState, i as EMPTY_FILTER_STATE, l as FilterRule, m as TopLevelFilterRule, n as CompoundExpression, o as FilterFieldSource, p as FilterStateV2, r as DateRangeFilterValue, s as FilterFieldType, t as AndGroup, u as FilterRuleValue } from "../../../types-N8PYonjD.mjs";
-import { t as resolveDateRangeRuleValue } from "../../../date-range-rule-value-jZAHuxZJ.mjs";
-import { n as RawFieldInfo, r as buildFieldRegistry, t as FieldRegistry } from "../../../FieldRegistry-BdtxI1N2.mjs";
-import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "../../../value-control-resolver-Au9JNS5z.mjs";
-import { t as FilterBar } from "../../../FilterBar-jYjPeD7F.mjs";
-import { t as FilterBarProps } from "../../../index-BRKXhLGa.mjs";
-import { a as useFilterBarSize, i as FilterSizeTokens, t as FILTER_SIZE_TOKENS } from "../../../filter-size-context-BGczB5R9.mjs";
-import { n as PillShellProps, t as PillShell } from "../../../PillShell-ChTB_koa.mjs";
-import { a as getDefaultOperatorForType, c as getOperatorsForType, d as isValuelessOperator, f as reconcileValueForOperator, l as isCompleteDateRange, r as emptyValueForRule, s as getOperatorsForField, u as isRangeOperator } from "../../../operators-x_ZENhrT.mjs";
-import { a as decodeFilterStateFromUrl, i as decodeFilterStateFromString, n as UrlStateCodecResult, o as encodeFilterStateToUrlParam, r as applyFilterStateToSearchParams, t as FILTER_STATE_URL_PARAM } from "../../../url-state-C2gl07_y.mjs";
-import { n as UseFilterStateV2Result, r as useFilterStateV2, t as UseFilterStateV2Options } from "../../../useFilterStateV2-BQYcAdKR.mjs";
-import { n as isFilterStateV2, r as pruneToRegistry, t as hasCompleteValue } from "../../../validation-CMtfUd-R.mjs";
-import { t as ValueControlProps } from "../../../types-gnF3MPfk2.mjs";
-import { t as TableControls } from "../../../TableControls-BtGFiZeD.mjs";
+import { n as ControlBarProps, t as ControlBar } from "../../../ControlBar-Cegjxa6-.mjs";
+import { n as DataTableCompactBar } from "../../../CompactBar-DjFaUAsN.mjs";
+import { i as TableViewConfigurationProps, n as TableViewConfigurationDropdown, r as TableViewConfigurationDropdownProps, t as TableViewConfiguration } from "../../../TableViewConfigurationDropdown-Dwy_9FBz.mjs";
+import { i as useTableControls, n as TableControlsContextProps, r as TableControlsProvider, t as TableControlsContext } from "../../../TableControlsContext-DZIZSyfX.mjs";
+import { t as dateRuleIntent } from "../../../date-rule-intent-CDBtV0ET.mjs";
+import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, h as isEmptyState, i as EMPTY_FILTER_STATE, l as FilterRule, m as TopLevelFilterRule, n as CompoundExpression, o as FilterFieldSource, p as FilterStateV2, r as DateRangeFilterValue, s as FilterFieldType, t as AndGroup, u as FilterRuleValue } from "../../../types-C4WUSW3e.mjs";
+import { t as resolveDateRangeRuleValue } from "../../../date-range-rule-value-BRp5Bi7R.mjs";
+import { n as RawFieldInfo, r as buildFieldRegistry, t as FieldRegistry } from "../../../FieldRegistry-0LmSQ-jc.mjs";
+import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "../../../value-control-resolver-B0HDRxRN.mjs";
+import { t as FilterBar } from "../../../FilterBar-BMM4Swbt.mjs";
+import { t as FilterBarProps } from "../../../index-CyAok7As.mjs";
+import { a as useFilterBarSize, i as FilterSizeTokens, t as FILTER_SIZE_TOKENS } from "../../../filter-size-context-CqvQ190x.mjs";
+import { n as PillShellProps, t as PillShell } from "../../../PillShell-BA7KK1zS.mjs";
+import { a as getDefaultOperatorForType, c as getOperatorsForType, d as isValuelessOperator, f as reconcileValueForOperator, l as isCompleteDateRange, r as emptyValueForRule, s as getOperatorsForField, u as isRangeOperator } from "../../../operators-CoXL5Hv6.mjs";
+import { a as decodeFilterStateFromUrl, i as decodeFilterStateFromString, n as UrlStateCodecResult, o as encodeFilterStateToUrlParam, r as applyFilterStateToSearchParams, t as FILTER_STATE_URL_PARAM } from "../../../url-state-8j_ef8Uf.mjs";
+import { n as UseFilterStateV2Result, r as useFilterStateV2, t as UseFilterStateV2Options } from "../../../useFilterStateV2-CW6eght1.mjs";
+import { n as isFilterStateV2, r as pruneToRegistry, t as hasCompleteValue } from "../../../validation-BgwNghi2.mjs";
+import { t as ValueControlProps } from "../../../types-CoVZwrMW.mjs";
+import { t as TableControls } from "../../../TableControls-WP78qtET.mjs";
 export { AndGroup, CompoundExpression, ControlBar, ControlBarProps, DataTableCompactBar, DateRangeFilterValue, EMPTY_FILTER_STATE, FILTER_SIZE_TOKENS, FILTER_STATE_URL_PARAM, FieldRegistry, FilterBar, FilterBarProps, FilterField, FilterFieldSource, FilterFieldType, FilterOperator, FilterRule, FilterRuleValue, FilterRuleValueChange, FilterSize, FilterSizeTokens, FilterStateV2, PillShell, PillShellProps, RawFieldInfo, ResolveValueControlOptions, TableControlsContext, TableControlsContextProps, TableControlsProvider, TableViewConfiguration, TableViewConfigurationDropdown, TableViewConfigurationDropdownProps, TableViewConfigurationProps, TopLevelFilterRule, UrlStateCodecResult, UseFilterStateV2Options, UseFilterStateV2Result, ValueControlProps, ValueControlResolver, applyFilterStateToSearchParams, buildFieldRegistry, dateRuleIntent, decodeFilterStateFromString, decodeFilterStateFromUrl, TableControls as default, emptyValueForRule, encodeFilterStateToUrlParam, getDefaultOperatorForType, getOperatorsForField, getOperatorsForType, hasCompleteValue, isCompleteDateRange, isEmptyState, isFilterStateV2, isRangeOperator, isValuelessOperator, pruneToRegistry, reconcileValueForOperator, resolveDateRangeRuleValue, resolveValueControl, useFilterBarSize, useFilterStateV2, useTableControls };

package/dist/components/DataTable/TableControls/index.mjs

@@ -1,2 +1,2 @@
-import { A as TableControlsProvider, C as getOperatorsForType, D as reconcileValueForOperator, E as isValuelessOperator, F as ControlBar, I as DataTableCompactBar, M as TableViewConfiguration, N as TableViewConfigurationDropdown, O as dateRuleIntent, P as TableControls, S as getOperatorsForField, T as isRangeOperator, _ as FILTER_SIZE_TOKENS, a as encodeFilterStateToUrlParam, b as emptyValueForRule, c as FilterBar_default, d as isFilterStateV2, f as pruneToRegistry, g as resolveValueControl, h as PillShell, i as decodeFilterStateFromUrl, j as useTableControls, k as TableControlsContext, l as useFilterStateV2, m as isEmptyState, n as applyFilterStateToSearchParams, o as FieldRegistry, p as EMPTY_FILTER_STATE, r as decodeFilterStateFromString, s as buildFieldRegistry, t as FILTER_STATE_URL_PARAM, u as hasCompleteValue, v as useFilterBarSize, w as isCompleteDateRange, x as getDefaultOperatorForType, y as resolveDateRangeRuleValue } from "../../../TableControls-CYTpBlQN.mjs";
+import { A as TableControlsProvider, C as getOperatorsForType, D as reconcileValueForOperator, E as isValuelessOperator, F as ControlBar, I as DataTableCompactBar, M as TableViewConfiguration, N as TableViewConfigurationDropdown, O as dateRuleIntent, P as TableControls, S as getOperatorsForField, T as isRangeOperator, _ as FILTER_SIZE_TOKENS, a as encodeFilterStateToUrlParam, b as emptyValueForRule, c as FilterBar_default, d as isFilterStateV2, f as pruneToRegistry, g as resolveValueControl, h as PillShell, i as decodeFilterStateFromUrl, j as useTableControls, k as TableControlsContext, l as useFilterStateV2, m as isEmptyState, n as applyFilterStateToSearchParams, o as FieldRegistry, p as EMPTY_FILTER_STATE, r as decodeFilterStateFromString, s as buildFieldRegistry, t as FILTER_STATE_URL_PARAM, u as hasCompleteValue, v as useFilterBarSize, w as isCompleteDateRange, x as getDefaultOperatorForType, y as resolveDateRangeRuleValue } from "../../../TableControls-RS_ozBsI.mjs";
 export { ControlBar, DataTableCompactBar, EMPTY_FILTER_STATE, FILTER_SIZE_TOKENS, FILTER_STATE_URL_PARAM, FieldRegistry, FilterBar_default as FilterBar, PillShell, TableControlsContext, TableControlsProvider, TableViewConfiguration, TableViewConfigurationDropdown, applyFilterStateToSearchParams, buildFieldRegistry, dateRuleIntent, decodeFilterStateFromString, decodeFilterStateFromUrl, TableControls as default, emptyValueForRule, encodeFilterStateToUrlParam, getDefaultOperatorForType, getOperatorsForField, getOperatorsForType, hasCompleteValue, isCompleteDateRange, isEmptyState, isFilterStateV2, isRangeOperator, isValuelessOperator, pruneToRegistry, reconcileValueForOperator, resolveDateRangeRuleValue, resolveValueControl, useFilterBarSize, useFilterStateV2, useTableControls };

package/dist/components/DataTable/index.mjs

@@ -8,16 +8,18 @@ import { isFocused } from "../../lib/pseudoClass.mjs";
 import { Z_INDICES } from "../../lib/zindex.mjs";
 import { focusOutline } from "../../mixins/focus.mjs";
 import "../../variables/effect.mjs";
-import { t as HStack } from "../../Stack-ChsImaEY.mjs";
-import { n as Button, t as IconButton } from "../../IconButton-CqTPMhjV.mjs";
-import { n as Sticker } from "../../Sticker-C3Eb13OQ.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-CuKSNxc9.mjs";
-import { t as Checkbox } from "../../Checkbox-CyWXhuby.mjs";
-import { t as Pagination_default } from "../../Pagination-B1u203DE.mjs";
-import { a as StickyTH, d as TableTR, f as TableTH, i as StickyTD, o as TableActionTD, p as TableRow, s as TableCell, t as TableLayout, u as TableTD } from "../../Table-B1gRr2XT.mjs";
-import { t as HoverCopyableField } from "../../HoverCopyableField-CN3gl0ny.mjs";
-import { t as Pii_default } from "../../Pii-Dz4woKd8.mjs";
-import { N as TableViewConfigurationDropdown, P as TableControls } from "../../TableControls-CYTpBlQN.mjs";
+import { semanticScrollbar } from "../../mixins/scrollbar.mjs";
+import { t as HStack } from "../../Stack-Bkn0TUDe.mjs";
+import { n as Button, t as IconButton } from "../../IconButton-CCLMYWVN.mjs";
+import { n as Sticker } from "../../Sticker-BLbgJxcH.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-rm9Nnxn7.mjs";
+import { t as Checkbox } from "../../Checkbox-DQynkc_I.mjs";
+import { t as Pagination_default } from "../../Pagination-Co9CfyFQ.mjs";
+import { a as StickyTH, d as TableTR, f as TableTH, i as StickyTD, o as TableActionTD, p as TableRow, s as TableCell, t as TableLayout, u as TableTD } from "../../Table-WqNfjasd.mjs";
+import { t as HoverCopyableField } from "../../HoverCopyableField-12bBuG-d.mjs";
+import { t as Link } from "../../Link-I9Bklen-.mjs";
+import { t as Pii_default } from "../../Pii-JGV9gP95.mjs";
+import { N as TableViewConfigurationDropdown, P as TableControls } from "../../TableControls-RS_ozBsI.mjs";
 import "./types.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import { createElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -42,7 +44,7 @@ const Bar = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: ${({ theme }) => semanticColor(theme, "SurfacePrimary", theme.color.background.primary)};
+  background-color: ${({ theme }) => semanticColor(theme, "SurfaceElevated", theme.color.background.primary)};
   width: 100%;
   padding: ${Spacing[2]};
   border-radius: ${BorderRadius.Md};
@@ -162,10 +164,9 @@ const renderAsDatetime = (value, config) => {
 };
 const renderAsURL = (value) => {
 	if (value == null || typeof value !== "string" || value.length === 0) return "";
-	return /* @__PURE__ */ jsx("a", {
-		href: value,
+	return /* @__PURE__ */ jsx(Link, {
+		url: value,
 		target: "_blank",
-		rel: "noopener noreferrer",
 		children: value
 	});
 };
@@ -407,6 +408,7 @@ const ExpandButton = styled.button`
   justify-content: center;
   padding: 0;
   margin: 0;
+  color: ${({ theme }) => semanticColor(theme, "FgPrimary", theme.color.text.primary)};
 `;
 const ExpandColumnPlaceholder = styled.span`
   display: flex;
@@ -626,6 +628,7 @@ const StyledTableLayout = styled(TableLayout)`
 `;
 const TableContainer = styled.div`
   position: relative;
+  ${semanticScrollbar}
 
   ${({ $stickyHeader }) => $stickyHeader && css`
       flex-grow: 1;
@@ -635,9 +638,17 @@ const TableContainer = styled.div`
     `}
 `;
 const RowLink = styled(RouterLink)`
+  /* Match surrounding cell text. The row is still a link; only URL cells use accent. */
   color: inherit;
   text-decoration: none;
   ${focusOutline}
+
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    color: inherit;
+  }
 `;
 const DataTableControls = styled(TableControls)``;
 const DataTableContainer = styled.div`
@@ -681,7 +692,7 @@ const StickyDetailsTD = styled(StickyTD)`
   border-right: none;
 `;
 const StickyTDWithGapCoverage = styled(StickyTD)`
-  ${({ $gapCoverage, theme }) => $gapCoverage && css`
+  ${({ $gapCoverage }) => $gapCoverage && css`
       &::before {
         content: '';
         position: absolute;
@@ -689,7 +700,7 @@ const StickyTDWithGapCoverage = styled(StickyTD)`
         left: ${-$gapCoverage}px;
         width: ${$gapCoverage}px;
         height: calc(100% + 1px); // +1px to cover the bottom border
-        background-color: ${semanticColor(theme, "SurfacePrimary", theme.color.background.primary)};
+        background: inherit;
       }
     `}
 `;