@persona/design-system 0.10.4 → 0.10.6

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Input","StyledDropdownItem","DropdownMenu","Card","DropdownMenu","Popover","EditorGlobalCss"],"sources":["../../../src/components/RichTextEditor/FloatingToolbar.tsx","../../../src/components/RichTextEditor/markdownUtils.ts","../../../src/components/RichTextEditor/styles.ts","../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/react';\nimport { BubbleMenu } from '@tiptap/react';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport {\n  BoldIcon,\n  CheckIcon,\n  GridIcon,\n  ItalicIcon,\n  LinkIcon,\n  ListIcon,\n  UnlinkIcon,\n  XIcon,\n} from '@persona/icons';\n\nimport { IconButton } from '#src/components/Button';\nimport DropdownMenu from '#src/components/DropdownMenu';\nimport Input from '#src/components/Input';\nimport Stack from '#src/components/Stack';\nimport { TransitionDuration } from '#src/variables/transitions';\n\n// Core* colors throughout this file are intentional: the bubble toolbar is an\n// always-dark inverse surface floating over the editor, so it must not track\n// the semantic surface theme.\nconst BubbleMenuBar = styled(Stack)`\n  padding: ${Spacing[1]} ${Spacing[2]};\n  background-color: ${Color.CoreSlate1100};\n  border-radius: ${BorderRadius.Lg};\n`;\n\nconst IconContainer = styled(motion.div)`\n  display: flex;\n  gap: ${Spacing[1]};\n`;\n\nconst InverseIconButton = styled(IconButton)<{ $selected?: boolean }>`\n  background-color: ${({ $selected }) => ($selected ? Color.CoreSlate900 : 'transparent')};\n  color: ${Color.PrimaryWhite};\n  transition: background-color ${TransitionDuration.ExtraFast} ease-out;\n\n  &:hover:not(:disabled) {\n    background-color: ${Color.CoreSlate800};\n  }\n\n  &:disabled {\n    background-color: transparent;\n    opacity: 0.35;\n  }\n`;\n\nconst InverseInput = styled(Input)`\n  background-color: ${Color.CoreSlate900};\n  color: ${Color.PrimaryWhite};\n\n  :focus-within {\n    border-color: ${Color.CoreBlue700};\n  }\n  ::placeholder {\n    color: ${Color.TextDisabled};\n  }\n\n  input {\n    background-color: ${Color.CoreSlate900};\n    color: ${Color.PrimaryWhite};\n  }\n`;\n\nconst StyledDropdownItem = styled(DropdownMenu.Item)`\n  width: 100%;\n  height: 30px;\n  font-size: small;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`;\n\n// Tippy hangs its instance off the element it was created against.\ntype TippyReference = Element & { _tippy?: { hide: () => void } };\n\n// Tippy takes its offset as numbers while the spacing tokens are CSS lengths.\nconst TOOLBAR_GAP = parseInt(Spacing[1]);\n\n// Anchored to the field, the toolbar lines up with the input's left edge; over a\n// selection it sits back a notch so it does not crowd the first selected glyph.\nconst FIELD_OFFSET: [skidding: number, distance: number] = [0, TOOLBAR_GAP];\nconst SELECTION_OFFSET: [skidding: number, distance: number] = [-parseInt(Spacing[2]), TOOLBAR_GAP];\n\n// Schemes we trust as link targets. Anything else (no scheme, or an unsafe one\n// like javascript:/data:/vbscript:) is treated as a bare host and forced onto\n// https, which both preserves host:port input and neutralizes script schemes.\nconst SAFE_LINK_SCHEME = /^(https?|mailto|tel):/i;\nconst URI_SCHEME = /^[a-zA-Z][a-zA-Z0-9+.-]*:/;\n\nexport const ensureProtocol = (url: string): string => {\n  const trimmedUrl = url.trim();\n  if (!trimmedUrl) {\n    return '';\n  }\n  // Handlebars placeholders (e.g. {{inquiry.id}}) are legitimate link targets in\n  // templated messages — the template render produces the final URL, so pass\n  // the expression through unvalidated. Only when nothing before the first\n  // placeholder looks like an unsafe scheme: javascript:alert(1)//{{x}} would\n  // otherwise smuggle a script href past the allowlist. URL parsers strip C0\n  // controls, tabs and spaces before reading the scheme, so normalize the\n  // prefix the same way first — java\\tscript:...{{x}} must not slip through.\n  if (trimmedUrl.includes('{{')) {\n    const beforePlaceholder = trimmedUrl\n      .slice(0, trimmedUrl.indexOf('{{'))\n      // eslint-disable-next-line no-control-regex -- mirrors how URL parsers strip C0/space before reading the scheme\n      .replace(/[\\u0000-\\u0020]/g, '');\n    if (!URI_SCHEME.test(beforePlaceholder) || SAFE_LINK_SCHEME.test(beforePlaceholder)) {\n      return trimmedUrl;\n    }\n    return '';\n  }\n  const candidate = SAFE_LINK_SCHEME.test(trimmedUrl) ? trimmedUrl : `https://${trimmedUrl}`;\n  // Re-parse so malformed input — including an unsafe scheme that can't survive\n  // the https prefix — is dropped instead of applied as a broken href.\n  return URL.canParse(candidate) ? candidate : '';\n};\n\ninterface FloatingToolbarProps {\n  /** TipTap editor instance to operate on. */\n  editor: Editor | null;\n  /**\n   * Keep the toolbar up the whole time the editor is focused instead of only\n   * while text is selected, so the formatting actions are discoverable without\n   * knowing to select first.\n   */\n  showOnFocus?: boolean;\n}\n\n/**\n * Floating bubble toolbar that appears on text selection or inside a table, or —\n * with `showOnFocus` — for as long as the editor is focused.\n * Keyboard shortcut: Cmd/Ctrl+Shift+U opens the link-edit row.\n */\nfunction FloatingToolbar({ editor, showOnFocus = false }: FloatingToolbarProps) {\n  const [linkURL, setLinkURL] = useState('');\n  const [editingLink, setEditingLink] = useState(false);\n  const linkInputRef = useRef<HTMLInputElement>(null);\n  const toolbarRef = useRef<HTMLDivElement>(null);\n  const savedSelection = useRef<{ from: number; to: number } | null>(null);\n  const editingLinkRef = useRef(editingLink);\n  const blurTimeout = useRef<ReturnType<typeof setTimeout>>();\n\n  useEffect(() => () => clearTimeout(blurTimeout.current), []);\n\n  useEffect(() => {\n    editingLinkRef.current = editingLink;\n  }, [editingLink]);\n\n  const restoreSelection = useCallback(() => {\n    if (editor && savedSelection.current) {\n      const { from, to } = savedSelection.current;\n      editor.chain().focus().setTextSelection({ from, to }).run();\n    }\n  }, [editor]);\n\n  const openLinkEditingMode = useCallback(() => {\n    if (!editor) {\n      return;\n    }\n    if (!editor.can().chain().toggleLink({ href: 'https://www.google.com' }).run()) {\n      return;\n    }\n\n    const { from, to } = editor.state.selection;\n    savedSelection.current = { from, to };\n\n    const linkAttr = editor.getAttributes('link');\n    if (linkAttr.href) {\n      setLinkURL(linkAttr.href);\n    }\n\n    editor.chain().focus().setTextSelection({ from, to }).run();\n    setEditingLink(true);\n\n    setTimeout(() => {\n      linkInputRef.current?.focus();\n    }, 250);\n  }, [editor]);\n\n  // Cmd/Ctrl+Shift+U → open link mode; Escape inside link mode → cancel.\n  useEffect(() => {\n    if (!editor) {\n      return undefined;\n    }\n    const dom = editor.view.dom;\n    const handler = (event: KeyboardEvent) => {\n      if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key.toLowerCase() === 'u') {\n        event.preventDefault();\n        openLinkEditingMode();\n        return;\n      }\n      if (event.key === 'Escape' && editingLinkRef.current) {\n        event.preventDefault();\n        setEditingLink(false);\n        setLinkURL('');\n        savedSelection.current = null;\n      }\n    };\n    dom.addEventListener('keydown', handler);\n    return () => {\n      dom.removeEventListener('keydown', handler);\n    };\n  }, [editor, openLinkEditingMode]);\n\n  // Keep selection highlighted while focus is in the link input.\n  useEffect(() => {\n    if (!editingLink || !editor || !savedSelection.current) {\n      return undefined;\n    }\n    restoreSelection();\n    const timeoutId = setTimeout(() => {\n      restoreSelection();\n      editor.view.dom?.focus();\n    }, 0);\n    return () => clearTimeout(timeoutId);\n  }, [editingLink, restoreSelection, editor]);\n\n  if (!editor) {\n    return null;\n  }\n\n  // Pressing a toolbar button focuses that button, and the command's own\n  // transaction re-runs this check before the chained `.focus()` hands focus\n  // back to the editor. Ignoring focus held inside the toolbar therefore tears\n  // the bar down for a frame mid-click, taking the pressed button with it.\n  const isFocusWithinToolbar = () => !!toolbarRef.current?.contains(document.activeElement);\n\n  // The plugin closes the toolbar off the editor's blur, which cannot fire again\n  // once focus has moved in here, so leaving from the toolbar has to close it.\n  // Focus only lands on its next target after this event, hence the tick.\n  const handleToolbarBlur = () => {\n    blurTimeout.current = setTimeout(() => {\n      if (editor.isDestroyed || isFocusWithinToolbar() || editor.view.hasFocus()) {\n        return;\n      }\n      (editor.options.element as TippyReference)._tippy?.hide();\n    });\n  };\n\n  const editorState = {\n    isBold: editor.isActive('bold'),\n    canBold: editor.can().chain().toggleBold().run(),\n    isItalic: editor.isActive('italic'),\n    canItalic: editor.can().chain().toggleItalic().run(),\n    isLink: editor.isActive('link'),\n    isBulletList: editor.isActive('bulletList'),\n    canLink: editor.can().chain().toggleLink({ href: 'https://www.google.com' }).run(),\n    isTable: editor.isActive('table'),\n    canInsertTable: editor\n      .can()\n      .chain()\n      .insertTable({ rows: 3, cols: 3, withHeaderRow: true })\n      .run(),\n  };\n\n  return (\n    <BubbleMenu\n      editor={editor}\n      tippyOptions={{\n        placement: 'top-start',\n        offset: showOnFocus ? FIELD_OFFSET : SELECTION_OFFSET,\n        // Sitting above the field rather than the selection: a toolbar that is up\n        // for the whole time the field is focused looks jumpy if it chases the\n        // caret and hops between selections.\n        ...(showOnFocus\n          ? { getReferenceClientRect: () => editor.options.element.getBoundingClientRect() }\n          : {}),\n      }}\n      shouldShow={({ editor: e, view, from, to }) => {\n        if (!e.isEditable) {\n          return false;\n        }\n        if (e.isActive('mention')) {\n          return false;\n        }\n        // The toolbar carries the table-actions dropdown — a collapsed caret\n        // inside a table must still show it or row/column controls are\n        // unreachable.\n        if (e.isActive('table')) {\n          return true;\n        }\n        if (from !== to) {\n          return true;\n        }\n        return showOnFocus && (view.hasFocus() || isFocusWithinToolbar());\n      }}\n    >\n      <AnimatePresence>\n        <BubbleMenuBar\n          ref={toolbarRef}\n          role='toolbar'\n          aria-label='Text formatting'\n          direction='horizontal'\n          spacing={Spacing[1]}\n          onBlur={handleToolbarBlur}\n        >\n          {!editingLink ? (\n            <IconContainer\n              key='main-toolbar'\n              layout\n              initial={{ x: -10, opacity: 0 }}\n              animate={{ x: 0, opacity: 1 }}\n              exit={{ x: -10, opacity: 0 }}\n              transition={{ duration: 0.2, ease: 'easeOut' }}\n            >\n              <InverseIconButton\n                onClick={() => editor.chain().focus().toggleBulletList().run()}\n                $selected={editorState.isBulletList}\n                size='sm'\n                type='button'\n                aria-label='Toggle bullet list'\n                data-rte-menu-bar-item\n              >\n                <ListIcon />\n              </InverseIconButton>\n              <InverseIconButton\n                onClick={() => editor.chain().focus().toggleBold().run()}\n                disabled={!editorState.canBold}\n                $selected={editorState.isBold}\n                size='sm'\n                type='button'\n                aria-label='Toggle bold'\n                data-rte-menu-bar-item\n              >\n                <BoldIcon />\n              </InverseIconButton>\n              <InverseIconButton\n                onClick={() => editor.chain().focus().toggleItalic().run()}\n                $selected={editorState.isItalic}\n                disabled={!editorState.canItalic}\n                type='button'\n                size='sm'\n                aria-label='Toggle italic'\n                data-rte-menu-bar-item\n              >\n                <ItalicIcon />\n              </InverseIconButton>\n              <InverseIconButton\n                onClick={(e) => {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  openLinkEditingMode();\n                }}\n                $selected={editorState.isLink}\n                disabled={!editorState.canLink}\n                size='sm'\n                type='button'\n                aria-label='Toggle link'\n                data-rte-menu-bar-item\n              >\n                <LinkIcon />\n              </InverseIconButton>\n              {editorState.isTable ? (\n                <DropdownMenu\n                  contentProps={{\n                    // @ts-expect-error data attribute on dropdown menu\n                    'data-rte-menu-bar-item': 'table-actions-dropdown-menu',\n                    onCloseAutoFocus: (event) => {\n                      event.preventDefault();\n                      editor.commands.focus();\n                    },\n                  }}\n                  trigger={\n                    <InverseIconButton\n                      size='sm'\n                      type='button'\n                      aria-label='Table actions'\n                      data-rte-menu-bar-item\n                      $selected\n                    >\n                      <GridIcon />\n                    </InverseIconButton>\n                  }\n                >\n                  <StyledDropdownItem\n                    id='floating-toolbar__tableAddRowAfter'\n                    variant='basic'\n                    data-rte-menu-bar-item='table-add-row-after'\n                    onClick={() => editor.chain().focus().addRowAfter().run()}\n                  >\n                    Add row below\n                  </StyledDropdownItem>\n                  <StyledDropdownItem\n                    id='floating-toolbar__tableAddRowBefore'\n                    variant='basic'\n                    data-rte-menu-bar-item='table-add-row-before'\n                    onClick={() => editor.chain().focus().addRowBefore().run()}\n                  >\n                    Add row above\n                  </StyledDropdownItem>\n                  <StyledDropdownItem\n                    id='floating-toolbar__tableAddColumnAfter'\n                    variant='basic'\n                    data-rte-menu-bar-item='table-add-column-after'\n                    onClick={() => editor.chain().focus().addColumnAfter().run()}\n                  >\n                    Add column right\n                  </StyledDropdownItem>\n                  <StyledDropdownItem\n                    id='floating-toolbar__tableAddColumnBefore'\n                    variant='basic'\n                    data-rte-menu-bar-item='table-add-column-before'\n                    onClick={() => editor.chain().focus().addColumnBefore().run()}\n                  >\n                    Add column left\n                  </StyledDropdownItem>\n                  <StyledDropdownItem\n                    id='floating-toolbar__tableDeleteRow'\n                    variant='basic'\n                    data-rte-menu-bar-item='table-delete-row'\n                    onClick={() => editor.chain().focus().deleteRow().run()}\n                  >\n                    Delete row\n                  </StyledDropdownItem>\n                  <StyledDropdownItem\n                    id='floating-toolbar__tableDeleteColumn'\n                    variant='basic'\n                    data-rte-menu-bar-item='table-delete-column'\n                    onClick={() => editor.chain().focus().deleteColumn().run()}\n                  >\n                    Delete column\n                  </StyledDropdownItem>\n                  <StyledDropdownItem\n                    id='floating-toolbar__tableToggleHeaderRow'\n                    variant='basic'\n                    data-rte-menu-bar-item='table-toggle-header-row'\n                    onClick={() => editor.chain().focus().toggleHeaderRow().run()}\n                  >\n                    Toggle header row\n                  </StyledDropdownItem>\n                  <StyledDropdownItem\n                    id='floating-toolbar__tableDelete'\n                    variant='basic'\n                    data-rte-menu-bar-item='table-delete'\n                    onClick={() => editor.chain().focus().deleteTable().run()}\n                  >\n                    Delete table\n                  </StyledDropdownItem>\n                </DropdownMenu>\n              ) : (\n                <InverseIconButton\n                  onClick={() =>\n                    editor\n                      .chain()\n                      .focus()\n                      .insertTable({ rows: 3, cols: 3, withHeaderRow: true })\n                      .run()\n                  }\n                  disabled={!editorState.canInsertTable}\n                  size='sm'\n                  type='button'\n                  aria-label='Insert table'\n                  data-rte-menu-bar-item\n                >\n                  <GridIcon />\n                </InverseIconButton>\n              )}\n            </IconContainer>\n          ) : (\n            <IconContainer\n              key='link-toolbar'\n              initial={{ x: -10, opacity: 0 }}\n              animate={{ x: 0, opacity: 1 }}\n              exit={{ x: -10, opacity: 0 }}\n              transition={{ duration: 0.2, ease: 'easeOut' }}\n              aria-label='Link toolbar'\n              onAnimationComplete={() => {\n                if (editor && savedSelection.current) {\n                  setTimeout(() => {\n                    restoreSelection();\n                    linkInputRef.current?.focus();\n                  }, 10);\n                }\n              }}\n            >\n              <InverseInput\n                ref={linkInputRef}\n                size='sm'\n                value={linkURL}\n                onChange={(e) => setLinkURL(e.target.value)}\n                placeholder='Click to enter URL...'\n                aria-label='Link input'\n                data-rte-menu-bar-item\n                onClick={() => {\n                  linkInputRef.current?.focus();\n                }}\n                onFocus={() => {\n                  if (savedSelection.current && editor) {\n                    const { from, to } = savedSelection.current;\n                    editor.chain().setTextSelection({ from, to }).run();\n                  }\n                }}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' && linkURL.trim() && editor && savedSelection.current) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    const { from, to } = savedSelection.current;\n                    editor\n                      .chain()\n                      .focus()\n                      .setTextSelection({ from, to })\n                      .setLink({ href: ensureProtocol(linkURL) })\n                      .run();\n                    savedSelection.current = null;\n                    setEditingLink(false);\n                    setLinkURL('');\n                    return;\n                  }\n                  if (e.key === 'Escape') {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setEditingLink(false);\n                    setLinkURL('');\n                    savedSelection.current = null;\n                    const { from, to } = editor.state.selection;\n                    editor.chain().focus().setTextSelection({ from, to }).run();\n                  }\n                }}\n              />\n              <InverseIconButton\n                onClick={(e) => {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  if (linkURL) {\n                    editor.chain().focus().unsetLink().run();\n                  }\n                  restoreSelection();\n                  setLinkURL('');\n                  savedSelection.current = null;\n                  setEditingLink(false);\n                }}\n                size='sm'\n                type='button'\n                aria-label='Cancel link'\n                data-rte-menu-bar-item\n              >\n                {linkURL && editorState.isLink ? <UnlinkIcon /> : <XIcon />}\n              </InverseIconButton>\n              <InverseIconButton\n                onClick={(e) => {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  if (linkURL.trim() && editor && savedSelection.current) {\n                    const { from, to } = savedSelection.current;\n                    editor\n                      .chain()\n                      .focus()\n                      .setTextSelection({ from, to })\n                      .setLink({ href: ensureProtocol(linkURL) })\n                      .run();\n                  } else if (editor && savedSelection.current) {\n                    const { from, to } = savedSelection.current;\n                    editor.chain().focus().setTextSelection({ from, to }).unsetLink().run();\n                  }\n                  savedSelection.current = null;\n                  setEditingLink(false);\n                  setLinkURL('');\n                }}\n                size='sm'\n                type='button'\n                aria-label='Apply link'\n                data-rte-menu-bar-item\n              >\n                <CheckIcon />\n              </InverseIconButton>\n            </IconContainer>\n          )}\n        </BubbleMenuBar>\n      </AnimatePresence>\n    </BubbleMenu>\n  );\n}\n\nexport default FloatingToolbar;\n","import type { Node as PMNode } from '@tiptap/pm/model';\n\n/**\n * Collapses double newlines between pipe-delimited table rows into single\n * newlines. TipTap creates paragraph nodes for every Enter, and tiptap-markdown\n * serializes paragraphs as \\n\\n. GFM tables require single newlines between\n * rows to be parsed as a contiguous table block.\n *\n * Only affects lines that start/end with pipe characters — normal paragraph\n * breaks are preserved.\n */\nexport const normalizeTableNewlines = (text: string): string =>\n  text.replace(/(\\|[^\\n]*)\\n\\n(\\|)/g, '$1\\n$2');\n\n/**\n * Whether the doc holds no content at all, i.e. it matches the schema's default\n * empty doc. `Editor#isEmpty` also reports true for docs made of structurally\n * empty nodes (a table of blank cells), which still carry real structure worth\n * serializing to markdown.\n */\nexport const isEditorDocEmpty = (doc: PMNode): boolean => {\n  const defaultDoc = doc.type.createAndFill();\n  return defaultDoc != null && doc.eq(defaultDoc);\n};\n","import { createGlobalStyle, type DefaultTheme } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\n\nimport { withAlpha } from '#src/lib/color';\nimport { semanticColor, semanticTokens } from '#src/lib/semanticColor';\n\n// Mention chips and selected table cells share the PDS accent wash. Opacity25 is 100% under\n// semantic light, so light mode keeps the solid CorePurple100 it painted before.\nconst accentWash = ({ theme }: { theme: DefaultTheme }) => {\n  const tokens = semanticTokens(theme);\n  return tokens ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25) : Color.CorePurple100;\n};\n\nexport default createGlobalStyle`\n  /*\n   * A long unbreakable token (URL, hash) otherwise sets the block's min-content\n   * width; inside a flex row that lets the editor grow past its container so\n   * nothing wraps. anywhere lets the token break, collapsing min-content so the\n   * block stays within its container. break-word (which ProseMirror's own\n   * injected base style sets via word-wrap) does NOT affect min-content, so it\n   * cannot fix this. The doubled selector raises specificity above that base\n   * rule, which has equal specificity and is injected after this one.\n   */\n  .ProseMirror.ProseMirror {\n    overflow-wrap: anywhere;\n  }\n  .ProseMirror ul, .ProseMirror ol {\n    padding-left: 30px;\n  }\n  .mention {\n    background-color: ${accentWash};\n    color: ${({ theme }) => semanticColor(theme, 'FgAccent', Color.CorePurple700)};\n    border-radius: ${BorderRadius.Md};\n    display: inline-flex;\n    padding: 2px;\n    align-items: center;\n    gap: ${Spacing[1]};\n  }\n\n  /* Table styles applied in both edit and read-only views. */\n  .ProseMirror table {\n    border-collapse: collapse;\n    table-layout: fixed;\n    width: 100%;\n    margin: ${Spacing[2]} 0;\n    overflow: hidden;\n  }\n  .ProseMirror th,\n  .ProseMirror td {\n    border: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n    padding: ${Spacing[1]} ${Spacing[2]};\n    vertical-align: top;\n    box-sizing: border-box;\n    min-width: 1em;\n    position: relative;\n  }\n  .ProseMirror th {\n    background-color: ${({ theme }) =>\n      semanticColor(theme, 'SurfaceSecondary', Color.BackgroundSecondary)};\n    font-weight: 500;\n    text-align: left;\n  }\n  /* Cell-selection marker. */\n  .ProseMirror .selectedCell:after {\n    background-color: ${accentWash};\n    content: '';\n    inset: 0;\n    pointer-events: none;\n    position: absolute;\n    z-index: 2;\n    opacity: 0.4;\n  }\n`;\n","import type { AnyExtension } from '@tiptap/core';\nimport Link from '@tiptap/extension-link';\nimport Table from '@tiptap/extension-table';\nimport TableCell from '@tiptap/extension-table-cell';\nimport TableHeader from '@tiptap/extension-table-header';\nimport TableRow from '@tiptap/extension-table-row';\nimport type { EditorView } from '@tiptap/pm/view';\nimport { type Editor, EditorContent, type EditorEvents, useEditor } from '@tiptap/react';\nimport StarterKit from '@tiptap/starter-kit';\nimport dompurify from 'dompurify';\nimport { noop } from 'lodash-es';\nimport { type FC, Fragment, type KeyboardEventHandler, useEffect, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\nimport { Markdown } from 'tiptap-markdown';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport {\n  BoldIcon,\n  CapitalizeIcon,\n  CaretDownIcon,\n  GridIcon,\n  ItalicIcon,\n  LinkIcon,\n  ListIcon,\n  ListNumbersIcon,\n  RotateCcwIcon,\n  RotateCwIcon,\n} from '@persona/icons';\n\nimport Button from '#src/components/Button';\nimport Card from '#src/components/Card';\nimport DropdownMenu from '#src/components/DropdownMenu';\nimport { TextField } from '#src/components/FormField';\nimport Popover from '#src/components/Popover';\nimport { HStack } from '#src/components/Stack';\nimport { intersperse } from '#src/lib/intersperse';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\nimport { useOutsideClick } from '#src/lib/useOutsideClick';\nimport useToggle from '#src/lib/useToggle';\nimport { Z_INDICES } from '#src/lib/zindex';\nimport { focusWithinOutline } from '#src/mixins/focus';\nimport { Elevation } from '#src/variables/effect';\n\nimport FloatingToolbar, { ensureProtocol } from './FloatingToolbar';\nimport { isEditorDocEmpty, normalizeTableNewlines } from './markdownUtils';\nimport EditorGlobalCss from './styles';\nimport type { ExtensionWithMenuBar } from './types';\n\nconst Bar = styled.div`\n  display: flex;\n  height: fit-content;\n  padding: ${Spacing[1]} ${Spacing[1]};\n  gap: 2px;\n  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', Color.BorderHairline)};\n`;\n\nconst TextEditor = styled.div`\n  background-clip: padding-box;\n  border-radius: ${Spacing[1]};\n  border: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n  ${semanticOnly(\n    (tokens) => css`\n      background-color: ${tokens.InputSurfaceDefault};\n      color: ${tokens.FgPrimary};\n    `,\n  )}\n\n\n  ${focusWithinOutline}\n`;\n\nexport const MenuBarItem = styled.button<{ isActive: boolean }>`\n  background: ${({ theme }) => semanticColor(theme, 'InputSurfaceDefault', Color.PrimaryWhite)};\n  ${semanticOnly(\n    (tokens) => css`\n      color: ${tokens.FgPrimary};\n\n      &:disabled {\n        color: ${tokens.FgDisabled};\n      }\n    `,\n  )}\n  display: flex;\n  align-items: center;\n  padding: ${Spacing[1]};\n  cursor: pointer;\n  border-radius: ${BorderRadius.Md};\n\n  ${({ isActive, theme }) =>\n    isActive &&\n    css`\n      background-color: ${semanticColor(theme, 'ActionNeutral', Color.BackgroundButtonDefault)};\n    `};\n\n  svg {\n    margin: 0;\n  }\n\n  &:hover {\n    box-shadow: ${Elevation.Low};\n  }\n`;\n\nconst StyledCard = styled(Card)`\n  min-width: 300px;\n  padding: ${Spacing[3]};\n`;\n\nconst VerticalLine = styled.span`\n  border-right: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\n// TODO (Amina) : Size configurable dropdown items\nconst StyledDropdownItem = styled(DropdownMenu.Item)`\n  width: 100%;\n  height: 30px;\n  font-size: small;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`;\n\nexport type MenuBarSection = 'undo-redo' | 'text-format' | 'text-style' | 'lists' | 'table';\ninterface MenuBarProps {\n  editor: Editor | null;\n  supportedSections?: Array<MenuBarSection>;\n}\n\nconst MenuBar: FC<MenuBarProps> = ({\n  editor,\n  supportedSections = ['undo-redo', 'text-format', 'text-style', 'lists'],\n}) => {\n  const [isEditLinkModal, { enable: showEditLinkModal, disable: hideEditLinkModal }] = useToggle();\n  const [linkUrl, setLinkUrl] = useState('');\n\n  const editLinkModalCardRef = useRef<HTMLDivElement>(null);\n  useOutsideClick({ ref: editLinkModalCardRef, onOutsideClick: hideEditLinkModal });\n\n  if (!editor || supportedSections.length === 0) {\n    return null;\n  }\n\n  const { view, state } = editor;\n  const { from, to } = view.state.selection;\n  const selectionText = state.doc.textBetween(from, to, '');\n\n  const handleSetLink = (url: string) => {\n    if (url === '') {\n      editor.chain().focus().extendMarkRange('link').unsetLink().run();\n      return;\n    }\n\n    editor\n      .chain()\n      .focus()\n      .extendMarkRange('link')\n      .setLink({ href: ensureProtocol(url) })\n      .run();\n    hideEditLinkModal();\n  };\n\n  const handleLinkModalKeyDown: KeyboardEventHandler = (e) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      handleSetLink(linkUrl);\n    }\n  };\n\n  // Collect menu bar contributions from extensions via options\n  const extraMenuBars = editor.extensionManager.extensions\n    .filter(\n      (ext): ext is ExtensionWithMenuBar =>\n        ext.type === 'extension' && 'extraMenuBar' in ext.options,\n    )\n    .map((ext) => ext.options.extraMenuBar);\n\n  const textFormatItems = () => [\n    {\n      id: 'menu-bar__paragraph',\n      label: 'Normal text',\n      variant: 'basic' as const,\n      type: 'button',\n      onClick: () => editor.chain().focus().setParagraph().run(),\n    },\n    {\n      id: 'menu-bar__h1',\n      label: 'Heading 1',\n      variant: 'basic' as const,\n      type: 'button',\n      onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),\n    },\n    {\n      id: 'menu-bar__h2',\n      label: 'Heading 2',\n      variant: 'basic' as const,\n      type: 'button',\n      onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),\n    },\n    {\n      id: 'menu-bar__h3',\n      label: 'Heading 3',\n      variant: 'basic' as const,\n      type: 'button',\n      onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),\n    },\n  ];\n\n  const sectionsMap: Record<MenuBarSection, React.ReactNode> = {\n    // undo + redo controls\n    ['undo-redo']: (\n      <Fragment key='undo-redo'>\n        <MenuBarItem\n          tabIndex={-1}\n          id='menu-bar__undo'\n          type='button'\n          aria-label='Undo'\n          data-rte-menu-bar-item='undo'\n          isActive={false}\n          disabled={!editor.can().chain().focus().undo().run()}\n          onClick={() => editor.chain().focus().undo().run()}\n        >\n          <RotateCcwIcon />\n        </MenuBarItem>\n\n        <MenuBarItem\n          tabIndex={-1}\n          id='menu-bar__redo'\n          type='button'\n          aria-label='Redo'\n          data-rte-menu-bar-item='redo'\n          isActive={false}\n          disabled={!editor.can().chain().focus().redo().run()}\n          onClick={() => editor.chain().focus().redo().run()}\n        >\n          <RotateCwIcon />\n        </MenuBarItem>\n      </Fragment>\n    ),\n    // preset text sizes (normal, headings 1-3)\n    ['text-format']: (\n      <DropdownMenu\n        key='text-format'\n        contentProps={{\n          // @ts-expect-error This adds it correctly as a data attribute to the dropdown menu\n          // But it isn't defined in the DropdownMenuProps type\n          'data-rte-menu-bar-item': 'text-format-dropdown-menu',\n          // Return focus to the editor (not the trigger) so the user can\n          // type immediately after picking a format.\n          onCloseAutoFocus: (event) => {\n            event.preventDefault();\n            editor.commands.focus();\n          },\n        }}\n        trigger={\n          <MenuBarItem\n            tabIndex={-1}\n            id='menu-bar__textFormats'\n            type='button'\n            aria-label='Text sizes'\n            data-rte-menu-bar-item='text-format'\n            isActive={false}\n          >\n            <CapitalizeIcon />\n            <CaretDownIcon />\n          </MenuBarItem>\n        }\n      >\n        {textFormatItems().map((item) => (\n          <StyledDropdownItem\n            key={item.id}\n            id={item.id}\n            variant={item.variant}\n            onClick={item.onClick}\n            data-rte-menu-bar-item={item.id}\n          >\n            {item.label}\n          </StyledDropdownItem>\n        ))}\n      </DropdownMenu>\n    ),\n    // bold, italic, link\n    ['text-style']: (\n      <Fragment key='text-style'>\n        <MenuBarItem\n          tabIndex={-1}\n          id='menu-bar__bold'\n          type='button'\n          aria-label='Bold'\n          data-rte-menu-bar-item='bold'\n          isActive={editor.isActive('bold')}\n          disabled={!editor.can().chain().focus().toggleBold().run()}\n          onClick={() => editor.chain().focus().toggleBold().run()}\n        >\n          <BoldIcon />\n        </MenuBarItem>\n\n        <MenuBarItem\n          tabIndex={-1}\n          id='menu-bar__italic'\n          type='button'\n          aria-label='Italic'\n          data-rte-menu-bar-item='italic'\n          isActive={editor.isActive('italic')}\n          disabled={!editor.can().chain().focus().toggleItalic().run()}\n          onClick={() => editor.chain().focus().toggleItalic().run()}\n        >\n          <ItalicIcon />\n        </MenuBarItem>\n\n        <Popover\n          open={isEditLinkModal}\n          trigger={\n            <MenuBarItem\n              tabIndex={-1}\n              id='menu-bar__link'\n              type='button'\n              aria-label='Link'\n              data-rte-menu-bar-item='link'\n              // disable link button if there is no selection and cursor is not on an existing link\n              disabled={!editor.isActive('link') && selectionText === ''}\n              isActive={editor.isActive('link')}\n              onClick={() => {\n                showEditLinkModal();\n                setLinkUrl(editor.getAttributes('link').href || '');\n              }}\n            >\n              <LinkIcon />\n            </MenuBarItem>\n          }\n        >\n          <Popover.Content side='bottom' align='center' style={{ zIndex: Z_INDICES.toast }}>\n            <StyledCard elevated ref={editLinkModalCardRef}>\n              <TextField\n                size='sm'\n                value={linkUrl}\n                data-rte-menu-bar-item='link-url'\n                onChange={(e) => setLinkUrl(e.target.value)}\n                onKeyDown={handleLinkModalKeyDown}\n              />\n\n              <HStack equal>\n                <Button\n                  id='menu-bar__editLinkModal_cancel'\n                  size='sm'\n                  variant='basic'\n                  data-rte-menu-bar-item='link-cancel'\n                  onClick={hideEditLinkModal}\n                >\n                  Cancel\n                </Button>\n                <Button\n                  id='menu-bar__editLinkModal_save'\n                  type='submit'\n                  size='sm'\n                  variant='primary'\n                  data-rte-menu-bar-item='link-save'\n                  onClick={() => {\n                    handleSetLink(linkUrl);\n                    hideEditLinkModal();\n                  }}\n                >\n                  Save\n                </Button>\n              </HStack>\n            </StyledCard>\n          </Popover.Content>\n        </Popover>\n      </Fragment>\n    ),\n    // bullet list, ordered list\n    ['lists']: (\n      <Fragment key='lists'>\n        <MenuBarItem\n          tabIndex={-1}\n          id='menu-bar__bulletList'\n          type='button'\n          aria-label='Bullet list'\n          data-rte-menu-bar-item='bullet-list'\n          isActive={editor.isActive('bulletList')}\n          onClick={() => editor.chain().focus().toggleBulletList().run()}\n        >\n          <ListIcon />\n        </MenuBarItem>\n\n        <MenuBarItem\n          tabIndex={-1}\n          id='menu-bar__orderedList'\n          type='button'\n          aria-label='Ordered list'\n          data-rte-menu-bar-item='ordered-list'\n          isActive={editor.isActive('orderedList')}\n          onClick={() => editor.chain().focus().toggleOrderedList().run()}\n        >\n          <ListNumbersIcon />\n        </MenuBarItem>\n      </Fragment>\n    ),\n    // Insert table when outside one; edit operations when inside a cell.\n    ['table']: editor.isActive('table') ? (\n      <DropdownMenu\n        key='table-actions'\n        contentProps={{\n          // @ts-expect-error data attribute on dropdown\n          'data-rte-menu-bar-item': 'table-actions-dropdown-menu',\n          onCloseAutoFocus: (event) => {\n            event.preventDefault();\n            editor.commands.focus();\n          },\n        }}\n        trigger={\n          <MenuBarItem\n            tabIndex={-1}\n            id='menu-bar__tableActions'\n            type='button'\n            aria-label='Table actions'\n            data-rte-menu-bar-item='table-actions'\n            isActive\n          >\n            <GridIcon />\n            <CaretDownIcon />\n          </MenuBarItem>\n        }\n      >\n        <StyledDropdownItem\n          id='menu-bar__tableAddRowAfter'\n          variant='basic'\n          data-rte-menu-bar-item='table-add-row-after'\n          onClick={() => editor.chain().focus().addRowAfter().run()}\n        >\n          Add row below\n        </StyledDropdownItem>\n        <StyledDropdownItem\n          id='menu-bar__tableAddRowBefore'\n          variant='basic'\n          data-rte-menu-bar-item='table-add-row-before'\n          onClick={() => editor.chain().focus().addRowBefore().run()}\n        >\n          Add row above\n        </StyledDropdownItem>\n        <StyledDropdownItem\n          id='menu-bar__tableAddColumnAfter'\n          variant='basic'\n          data-rte-menu-bar-item='table-add-column-after'\n          onClick={() => editor.chain().focus().addColumnAfter().run()}\n        >\n          Add column right\n        </StyledDropdownItem>\n        <StyledDropdownItem\n          id='menu-bar__tableAddColumnBefore'\n          variant='basic'\n          data-rte-menu-bar-item='table-add-column-before'\n          onClick={() => editor.chain().focus().addColumnBefore().run()}\n        >\n          Add column left\n        </StyledDropdownItem>\n        <StyledDropdownItem\n          id='menu-bar__tableDeleteRow'\n          variant='basic'\n          data-rte-menu-bar-item='table-delete-row'\n          onClick={() => editor.chain().focus().deleteRow().run()}\n        >\n          Delete row\n        </StyledDropdownItem>\n        <StyledDropdownItem\n          id='menu-bar__tableDeleteColumn'\n          variant='basic'\n          data-rte-menu-bar-item='table-delete-column'\n          onClick={() => editor.chain().focus().deleteColumn().run()}\n        >\n          Delete column\n        </StyledDropdownItem>\n        <StyledDropdownItem\n          id='menu-bar__tableToggleHeaderRow'\n          variant='basic'\n          data-rte-menu-bar-item='table-toggle-header-row'\n          onClick={() => editor.chain().focus().toggleHeaderRow().run()}\n        >\n          Toggle header row\n        </StyledDropdownItem>\n        <StyledDropdownItem\n          id='menu-bar__tableDelete'\n          variant='basic'\n          data-rte-menu-bar-item='table-delete'\n          onClick={() => editor.chain().focus().deleteTable().run()}\n        >\n          Delete table\n        </StyledDropdownItem>\n      </DropdownMenu>\n    ) : (\n      <MenuBarItem\n        key='table-insert'\n        tabIndex={-1}\n        id='menu-bar__insertTable'\n        type='button'\n        aria-label='Insert table'\n        data-rte-menu-bar-item='insert-table'\n        isActive={false}\n        disabled={\n          !editor.can().chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()\n        }\n        onClick={() =>\n          editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()\n        }\n      >\n        <GridIcon />\n      </MenuBarItem>\n    ),\n  };\n\n  return (\n    <Bar title='Menu bar'>\n      {intersperse(\n        [\n          ...supportedSections.map((section) => sectionsMap[section]),\n          ...(extraMenuBars.length > 0\n            ? [\n                <Fragment key='extra'>\n                  {extraMenuBars.map((contribution, i) => (\n                    <Fragment key={`extra-menu-${i}`}>\n                      {contribution.renderPopover(editor)}\n                    </Fragment>\n                  ))}\n                </Fragment>,\n              ]\n            : []),\n        ],\n        (i) => (\n          <VerticalLine key={`separator-${i}`} />\n        ),\n      )}\n    </Bar>\n  );\n};\n\nexport interface RichTextEditorProps {\n  className?: string;\n  defaultValue?: string;\n  menuBarSections?: Array<MenuBarSection>;\n  additionalEditorExtensions?: (AnyExtension | ExtensionWithMenuBar)[];\n  returnMarkdown?: boolean;\n\n  /**\n   * Minimum height of the editor content.\n   */\n  editorContentMinHeight?: string;\n  /**\n   * Maximum height of the editor content.\n   * If the editor content exceeds this height, the editor will scroll.\n   */\n  editorContentMaxHeight?: string;\n  readOnly?: boolean;\n  /** Show a PDS-styled bubble toolbar on selection (and inside tables). */\n  floatingToolbar?: boolean;\n  onChange?: (value: string) => void;\n  onKeyDown?: (event?: KeyboardEvent) => void;\n  onBlur?: () => void;\n}\n\nconst Text = styled.div`\n  cursor: default;\n`;\n\nconst RichTextEditor: FC<RichTextEditorProps> = ({\n  className,\n  defaultValue,\n  menuBarSections,\n  additionalEditorExtensions = [],\n  returnMarkdown = false,\n  readOnly = false,\n  floatingToolbar = false,\n  editorContentMaxHeight,\n  editorContentMinHeight,\n  onChange = noop,\n  onKeyDown = noop,\n  onBlur = noop,\n}) => {\n  // Keep a ref of the latest onKeyDown callback so TipTap's editorProps\n  // always invokes the most recent version (not a stale closure from mount\n  // time). Assigned during render so it is never a commit behind.\n  const onKeyDownRef = useRef(onKeyDown);\n  onKeyDownRef.current = onKeyDown;\n\n  const editor = useEditor({\n    extensions: [\n      Markdown.configure({\n        html: true,\n        tightLists: true,\n        tightListClass: 'tight',\n        bulletListMarker: '-',\n        linkify: false,\n        breaks: false,\n        transformPastedText: false,\n        transformCopiedText: false,\n      }),\n      StarterKit,\n      // We are setting the inclusive attribute to false so that text following the initial text serving as the url placeholder\n      // is not considered part of the placeholder.\n      Link.extend({ inclusive: false }).configure({\n        // autolink is buggy alongside handlebars syntax, so we choose to disable it. Links can still be created using the menu bar item.\n        autolink: false,\n        openOnClick: false,\n      }),\n      Table.configure({ resizable: false }),\n      TableRow,\n      TableHeader,\n      TableCell,\n      ...additionalEditorExtensions,\n    ],\n    content: dompurify.sanitize(defaultValue ?? ''),\n    editorProps: {\n      attributes: {\n        title: 'Rich text editor',\n      },\n      handleKeyDown(_view: EditorView, event: KeyboardEvent) {\n        onKeyDownRef.current?.(event);\n        // Return true if the event was handled to prevent TipTap's default behavior\n        return event.defaultPrevented;\n      },\n    },\n    onUpdate: ({ editor }) => {\n      let value = returnMarkdown ? editor.storage.markdown.getMarkdown() : editor.getHTML();\n\n      if (returnMarkdown && value) {\n        value = normalizeTableNewlines(value);\n      }\n\n      // We need to return an empty string instead of 'value' because 'value' may be an empty set of html tags when\n      // the doc is empty. By returning an empty string we have a consistent value to compare against.\n      onChange(isEditorDocEmpty(editor.state.doc) ? '' : dompurify.sanitize(value));\n    },\n    onBlur: (e: EditorEvents['blur']) => {\n      /**\n       * We want to make sure we don't fire onBlur when the user clicks on a menu bar item.\n       */\n      // @ts-expect-error dataset is a valid attribute for a menu bar item but\n      // the FocusEvent type doesn't include it for some reason.\n      if (!e.event.relatedTarget?.dataset?.rteMenuBarItem) {\n        onBlur();\n      }\n    },\n  });\n\n  useEffect(() => {\n    if (editor) {\n      const value = returnMarkdown ? editor.storage.markdown.getMarkdown() : editor.getHTML();\n      if (defaultValue !== value) {\n        const { from, to } = editor.state.selection;\n        editor\n          .chain()\n          // The defaultValue sync is not user input — keeping it out of undo\n          // history stops Undo from reverting the freshly synced document.\n          .command(({ tr }) => {\n            tr.setMeta('addToHistory', false);\n            return true;\n          })\n          .setContent(dompurify.sanitize(defaultValue), false, {\n            preserveWhitespace: true,\n          })\n          .setTextSelection({ from, to })\n          .run();\n      }\n    }\n  }, [defaultValue, editor, returnMarkdown]);\n\n  useEffect(() => {\n    if (editor) {\n      // second param prevents setEditable from emitting onUpdate\n      // source: https://github.com/ueberdosis/tiptap/issues/4535#issuecomment-1767019649\n      editor.setEditable(!readOnly, false);\n    }\n  }, [editor, readOnly]);\n\n  if (!editor) {\n    return null;\n  }\n\n  const resolvedSections: Array<MenuBarSection> = menuBarSections ?? [\n    'undo-redo',\n    'text-format',\n    'text-style',\n    'lists',\n    'table',\n  ];\n\n  return (\n    // We need the global styles here to overwrite our systems general styles which hinder the rendering of some of the rich text in the editor.\n    <>\n      <EditorGlobalCss />\n      {readOnly ? (\n        <Text className={className}>\n          <EditorContent editor={editor} />\n        </Text>\n      ) : (\n        <TextEditor className={className}>\n          <MenuBar supportedSections={resolvedSections} editor={editor} />\n          {floatingToolbar && <FloatingToolbar editor={editor} />}\n          <EditorContent\n            style={{\n              padding: Spacing[3],\n              minHeight: editorContentMinHeight ?? 'none',\n              maxHeight: editorContentMaxHeight ?? 'none',\n              overflowY: 'auto',\n            }}\n            editor={editor}\n          />\n        </TextEditor>\n      )}\n    </>\n  );\n};\nexport default RichTextEditor;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAM,gBAAgB,OAAO,MAAM;aACtB,QAAQ,GAAG,GAAG,QAAQ,GAAG;sBAChB,MAAM,cAAc;mBACvB,aAAa,GAAG;;AAGnC,MAAM,gBAAgB,OAAO,OAAO,IAAI;;SAE/B,QAAQ,GAAG;;AAGpB,MAAM,oBAAoB,OAAO,WAAW;uBACrB,EAAE,gBAAiB,YAAY,MAAM,eAAe,cAAe;WAC/E,MAAM,aAAa;yCACgC;;;wBAGtC,MAAM,aAAa;;;;;;;;AAS3C,MAAM,eAAe,OAAOA,cAAM;sBACZ,MAAM,aAAa;WAC9B,MAAM,aAAa;;;oBAGV,MAAM,YAAY;;;aAGzB,MAAM,aAAa;;;;wBAIR,MAAM,aAAa;aAC9B,MAAM,aAAa;;;AAIhC,MAAMC,uBAAqB,OAAOC,qBAAa,KAAK;;;;;;;;AAapD,MAAM,cAAc,SAAS,QAAQ,GAAG;AAIxC,MAAM,eAAqD,CAAC,GAAG,YAAY;AAC3E,MAAM,mBAAyD,CAAC,CAAC,SAAS,QAAQ,GAAG,EAAE,YAAY;AAKnG,MAAM,mBAAmB;AACzB,MAAM,aAAa;AAEnB,MAAa,kBAAkB,QAAwB;CACrD,MAAM,aAAa,IAAI,MAAM;AAC7B,KAAI,CAAC,WACH,QAAO;AAST,KAAI,WAAW,SAAS,KAAK,EAAE;EAC7B,MAAM,oBAAoB,WACvB,MAAM,GAAG,WAAW,QAAQ,KAAK,CAAC,CAElC,QAAQ,oBAAoB,GAAG;AAClC,MAAI,CAAC,WAAW,KAAK,kBAAkB,IAAI,iBAAiB,KAAK,kBAAkB,CACjF,QAAO;AAET,SAAO;;CAET,MAAM,YAAY,iBAAiB,KAAK,WAAW,GAAG,aAAa,WAAW;AAG9E,QAAO,IAAI,SAAS,UAAU,GAAG,YAAY;;;;;;;AAmB/C,SAAS,gBAAgB,EAAE,QAAQ,cAAc,SAA+B;CAC9E,MAAM,CAAC,SAAS,cAAc,SAAS,GAAG;CAC1C,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CACrD,MAAM,eAAe,OAAyB,KAAK;CACnD,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,iBAAiB,OAA4C,KAAK;CACxE,MAAM,iBAAiB,OAAO,YAAY;CAC1C,MAAM,cAAc,QAAuC;AAE3D,uBAAsB,aAAa,YAAY,QAAQ,EAAE,EAAE,CAAC;AAE5D,iBAAgB;AACd,iBAAe,UAAU;IACxB,CAAC,YAAY,CAAC;CAEjB,MAAM,mBAAmB,kBAAkB;AACzC,MAAI,UAAU,eAAe,SAAS;GACpC,MAAM,EAAE,MAAM,OAAO,eAAe;AACpC,UAAO,OAAO,CAAC,OAAO,CAAC,iBAAiB;IAAE;IAAM;IAAI,CAAC,CAAC,KAAK;;IAE5D,CAAC,OAAO,CAAC;CAEZ,MAAM,sBAAsB,kBAAkB;AAC5C,MAAI,CAAC,OACH;AAEF,MAAI,CAAC,OAAO,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,MAAM,0BAA0B,CAAC,CAAC,KAAK,CAC5E;EAGF,MAAM,EAAE,MAAM,OAAO,OAAO,MAAM;AAClC,iBAAe,UAAU;GAAE;GAAM;GAAI;EAErC,MAAM,WAAW,OAAO,cAAc,OAAO;AAC7C,MAAI,SAAS,KACX,YAAW,SAAS,KAAK;AAG3B,SAAO,OAAO,CAAC,OAAO,CAAC,iBAAiB;GAAE;GAAM;GAAI,CAAC,CAAC,KAAK;AAC3D,iBAAe,KAAK;AAEpB,mBAAiB;AACf,gBAAa,SAAS,OAAO;KAC5B,IAAI;IACN,CAAC,OAAO,CAAC;AAGZ,iBAAgB;AACd,MAAI,CAAC,OACH;EAEF,MAAM,MAAM,OAAO,KAAK;EACxB,MAAM,WAAW,UAAyB;AACxC,QAAK,MAAM,WAAW,MAAM,YAAY,MAAM,YAAY,MAAM,IAAI,aAAa,KAAK,KAAK;AACzF,UAAM,gBAAgB;AACtB,yBAAqB;AACrB;;AAEF,OAAI,MAAM,QAAQ,YAAY,eAAe,SAAS;AACpD,UAAM,gBAAgB;AACtB,mBAAe,MAAM;AACrB,eAAW,GAAG;AACd,mBAAe,UAAU;;;AAG7B,MAAI,iBAAiB,WAAW,QAAQ;AACxC,eAAa;AACX,OAAI,oBAAoB,WAAW,QAAQ;;IAE5C,CAAC,QAAQ,oBAAoB,CAAC;AAGjC,iBAAgB;AACd,MAAI,CAAC,eAAe,CAAC,UAAU,CAAC,eAAe,QAC7C;AAEF,oBAAkB;EAClB,MAAM,YAAY,iBAAiB;AACjC,qBAAkB;AAClB,UAAO,KAAK,KAAK,OAAO;KACvB,EAAE;AACL,eAAa,aAAa,UAAU;IACnC;EAAC;EAAa;EAAkB;EAAO,CAAC;AAE3C,KAAI,CAAC,OACH,QAAO;CAOT,MAAM,6BAA6B,CAAC,CAAC,WAAW,SAAS,SAAS,SAAS,cAAc;CAKzF,MAAM,0BAA0B;AAC9B,cAAY,UAAU,iBAAiB;AACrC,OAAI,OAAO,eAAe,sBAAsB,IAAI,OAAO,KAAK,UAAU,CACxE;AAED,UAAO,QAAQ,QAA2B,QAAQ,MAAM;IACzD;;CAGJ,MAAM,cAAc;EAClB,QAAQ,OAAO,SAAS,OAAO;EAC/B,SAAS,OAAO,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK;EAChD,UAAU,OAAO,SAAS,SAAS;EACnC,WAAW,OAAO,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK;EACpD,QAAQ,OAAO,SAAS,OAAO;EAC/B,cAAc,OAAO,SAAS,aAAa;EAC3C,SAAS,OAAO,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,MAAM,0BAA0B,CAAC,CAAC,KAAK;EAClF,SAAS,OAAO,SAAS,QAAQ;EACjC,gBAAgB,OACb,KAAK,CACL,OAAO,CACP,YAAY;GAAE,MAAM;GAAG,MAAM;GAAG,eAAe;GAAM,CAAC,CACtD,KAAK;EACT;AAED,QACE,oBAAC,YAAD;EACU;EACR,cAAc;GACZ,WAAW;GACX,QAAQ,cAAc,eAAe;GAIrC,GAAI,cACA,EAAE,8BAA8B,OAAO,QAAQ,QAAQ,uBAAuB,EAAE,GAChF,EAAE;GACP;EACD,aAAa,EAAE,QAAQ,GAAG,MAAM,MAAM,SAAS;AAC7C,OAAI,CAAC,EAAE,WACL,QAAO;AAET,OAAI,EAAE,SAAS,UAAU,CACvB,QAAO;AAKT,OAAI,EAAE,SAAS,QAAQ,CACrB,QAAO;AAET,OAAI,SAAS,GACX,QAAO;AAET,UAAO,gBAAgB,KAAK,UAAU,IAAI,sBAAsB;;YAGlE,oBAAC,iBAAD,EAAA,UACE,oBAAC,eAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,WAAU;GACV,SAAS,QAAQ;GACjB,QAAQ;aAEP,CAAC,cACA,qBAAC,eAAD;IAEE,QAAA;IACA,SAAS;KAAE,GAAG;KAAK,SAAS;KAAG;IAC/B,SAAS;KAAE,GAAG;KAAG,SAAS;KAAG;IAC7B,MAAM;KAAE,GAAG;KAAK,SAAS;KAAG;IAC5B,YAAY;KAAE,UAAU;KAAK,MAAM;KAAW;cANhD;KAQE,oBAAC,mBAAD;MACE,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,kBAAkB,CAAC,KAAK;MAC9D,WAAW,YAAY;MACvB,MAAK;MACL,MAAK;MACL,cAAW;MACX,0BAAA;gBAEA,oBAAC,UAAD,EAAY,CAAA;MACM,CAAA;KACpB,oBAAC,mBAAD;MACE,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK;MACxD,UAAU,CAAC,YAAY;MACvB,WAAW,YAAY;MACvB,MAAK;MACL,MAAK;MACL,cAAW;MACX,0BAAA;gBAEA,oBAAC,UAAD,EAAY,CAAA;MACM,CAAA;KACpB,oBAAC,mBAAD;MACE,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK;MAC1D,WAAW,YAAY;MACvB,UAAU,CAAC,YAAY;MACvB,MAAK;MACL,MAAK;MACL,cAAW;MACX,0BAAA;gBAEA,oBAAC,YAAD,EAAc,CAAA;MACI,CAAA;KACpB,oBAAC,mBAAD;MACE,UAAU,MAAM;AACd,SAAE,gBAAgB;AAClB,SAAE,iBAAiB;AACnB,4BAAqB;;MAEvB,WAAW,YAAY;MACvB,UAAU,CAAC,YAAY;MACvB,MAAK;MACL,MAAK;MACL,cAAW;MACX,0BAAA;gBAEA,oBAAC,UAAD,EAAY,CAAA;MACM,CAAA;KACnB,YAAY,UACX,qBAACA,sBAAD;MACE,cAAc;OAEZ,0BAA0B;OAC1B,mBAAmB,UAAU;AAC3B,cAAM,gBAAgB;AACtB,eAAO,SAAS,OAAO;;OAE1B;MACD,SACE,oBAAC,mBAAD;OACE,MAAK;OACL,MAAK;OACL,cAAW;OACX,0BAAA;OACA,WAAA;iBAEA,oBAAC,UAAD,EAAY,CAAA;OACM,CAAA;gBAlBxB;OAqBE,oBAACD,sBAAD;QACE,IAAG;QACH,SAAQ;QACR,0BAAuB;QACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK;kBAC1D;QAEoB,CAAA;OACrB,oBAACA,sBAAD;QACE,IAAG;QACH,SAAQ;QACR,0BAAuB;QACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK;kBAC3D;QAEoB,CAAA;OACrB,oBAACA,sBAAD;QACE,IAAG;QACH,SAAQ;QACR,0BAAuB;QACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK;kBAC7D;QAEoB,CAAA;OACrB,oBAACA,sBAAD;QACE,IAAG;QACH,SAAQ;QACR,0BAAuB;QACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK;kBAC9D;QAEoB,CAAA;OACrB,oBAACA,sBAAD;QACE,IAAG;QACH,SAAQ;QACR,0BAAuB;QACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK;kBACxD;QAEoB,CAAA;OACrB,oBAACA,sBAAD;QACE,IAAG;QACH,SAAQ;QACR,0BAAuB;QACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK;kBAC3D;QAEoB,CAAA;OACrB,oBAACA,sBAAD;QACE,IAAG;QACH,SAAQ;QACR,0BAAuB;QACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK;kBAC9D;QAEoB,CAAA;OACrB,oBAACA,sBAAD;QACE,IAAG;QACH,SAAQ;QACR,0BAAuB;QACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK;kBAC1D;QAEoB,CAAA;OACR;UAEf,oBAAC,mBAAD;MACE,eACE,OACG,OAAO,CACP,OAAO,CACP,YAAY;OAAE,MAAM;OAAG,MAAM;OAAG,eAAe;OAAM,CAAC,CACtD,KAAK;MAEV,UAAU,CAAC,YAAY;MACvB,MAAK;MACL,MAAK;MACL,cAAW;MACX,0BAAA;gBAEA,oBAAC,UAAD,EAAY,CAAA;MACM,CAAA;KAER;MA/JV,eA+JU,GAEhB,qBAAC,eAAD;IAEE,SAAS;KAAE,GAAG;KAAK,SAAS;KAAG;IAC/B,SAAS;KAAE,GAAG;KAAG,SAAS;KAAG;IAC7B,MAAM;KAAE,GAAG;KAAK,SAAS;KAAG;IAC5B,YAAY;KAAE,UAAU;KAAK,MAAM;KAAW;IAC9C,cAAW;IACX,2BAA2B;AACzB,SAAI,UAAU,eAAe,QAC3B,kBAAiB;AACf,wBAAkB;AAClB,mBAAa,SAAS,OAAO;QAC5B,GAAG;;cAZZ;KAgBE,oBAAC,cAAD;MACE,KAAK;MACL,MAAK;MACL,OAAO;MACP,WAAW,MAAM,WAAW,EAAE,OAAO,MAAM;MAC3C,aAAY;MACZ,cAAW;MACX,0BAAA;MACA,eAAe;AACb,oBAAa,SAAS,OAAO;;MAE/B,eAAe;AACb,WAAI,eAAe,WAAW,QAAQ;QACpC,MAAM,EAAE,MAAM,OAAO,eAAe;AACpC,eAAO,OAAO,CAAC,iBAAiB;SAAE;SAAM;SAAI,CAAC,CAAC,KAAK;;;MAGvD,YAAY,MAAM;AAChB,WAAI,EAAE,QAAQ,WAAW,QAAQ,MAAM,IAAI,UAAU,eAAe,SAAS;AAC3E,UAAE,gBAAgB;AAClB,UAAE,iBAAiB;QACnB,MAAM,EAAE,MAAM,OAAO,eAAe;AACpC,eACG,OAAO,CACP,OAAO,CACP,iBAAiB;SAAE;SAAM;SAAI,CAAC,CAC9B,QAAQ,EAAE,MAAM,eAAe,QAAQ,EAAE,CAAC,CAC1C,KAAK;AACR,uBAAe,UAAU;AACzB,uBAAe,MAAM;AACrB,mBAAW,GAAG;AACd;;AAEF,WAAI,EAAE,QAAQ,UAAU;AACtB,UAAE,gBAAgB;AAClB,UAAE,iBAAiB;AACnB,uBAAe,MAAM;AACrB,mBAAW,GAAG;AACd,uBAAe,UAAU;QACzB,MAAM,EAAE,MAAM,OAAO,OAAO,MAAM;AAClC,eAAO,OAAO,CAAC,OAAO,CAAC,iBAAiB;SAAE;SAAM;SAAI,CAAC,CAAC,KAAK;;;MAG/D,CAAA;KACF,oBAAC,mBAAD;MACE,UAAU,MAAM;AACd,SAAE,gBAAgB;AAClB,SAAE,iBAAiB;AACnB,WAAI,QACF,QAAO,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK;AAE1C,yBAAkB;AAClB,kBAAW,GAAG;AACd,sBAAe,UAAU;AACzB,sBAAe,MAAM;;MAEvB,MAAK;MACL,MAAK;MACL,cAAW;MACX,0BAAA;gBAEC,WAAW,YAAY,SAAS,oBAAC,YAAD,EAAc,CAAA,GAAG,oBAAC,OAAD,EAAS,CAAA;MACzC,CAAA;KACpB,oBAAC,mBAAD;MACE,UAAU,MAAM;AACd,SAAE,gBAAgB;AAClB,SAAE,iBAAiB;AACnB,WAAI,QAAQ,MAAM,IAAI,UAAU,eAAe,SAAS;QACtD,MAAM,EAAE,MAAM,OAAO,eAAe;AACpC,eACG,OAAO,CACP,OAAO,CACP,iBAAiB;SAAE;SAAM;SAAI,CAAC,CAC9B,QAAQ,EAAE,MAAM,eAAe,QAAQ,EAAE,CAAC,CAC1C,KAAK;kBACC,UAAU,eAAe,SAAS;QAC3C,MAAM,EAAE,MAAM,OAAO,eAAe;AACpC,eAAO,OAAO,CAAC,OAAO,CAAC,iBAAiB;SAAE;SAAM;SAAI,CAAC,CAAC,WAAW,CAAC,KAAK;;AAEzE,sBAAe,UAAU;AACzB,sBAAe,MAAM;AACrB,kBAAW,GAAG;;MAEhB,MAAK;MACL,MAAK;MACL,cAAW;MACX,0BAAA;gBAEA,oBAAC,WAAD,EAAa,CAAA;MACK,CAAA;KACN;MAzGV,eAyGU;GAEJ,CAAA,EACA,CAAA;EACP,CAAA;;;;;;;;;;;;;ACrjBjB,MAAa,0BAA0B,SACrC,KAAK,QAAQ,uBAAuB,SAAS;;;;;;;AAQ/C,MAAa,oBAAoB,QAAyB;CACxD,MAAM,aAAa,IAAI,KAAK,eAAe;AAC3C,QAAO,cAAc,QAAQ,IAAI,GAAG,WAAW;;;;ACbjD,MAAM,cAAc,EAAE,YAAqC;CACzD,MAAM,SAAS,eAAe,MAAM;AACpC,QAAO,SAAS,UAAU,OAAO,eAAe,OAAO,UAAU,GAAG,MAAM;;AAG5E,IAAA,iBAAe,iBAAiB;;;;;;;;;;;;;;;;;wBAiBR,WAAW;cACrB,EAAE,YAAY,cAAc,OAAO,YAAY,MAAM,cAAc,CAAC;qBAC7D,aAAa,GAAG;;;;WAI1B,QAAQ,GAAG;;;;;;;;cAQR,QAAQ,GAAG;;;;;yBAKA,EAAE,YAAY,cAAc,OAAO,gBAAgB,MAAM,cAAc,CAAC;eAClF,QAAQ,GAAG,GAAG,QAAQ,GAAG;;;;;;;yBAOf,EAAE,YACrB,cAAc,OAAO,oBAAoB,MAAM,oBAAoB,CAAC;;;;;;wBAMlD,WAAW;;;;;;;;;;;ACjBnC,MAAM,MAAM,OAAO,GAAG;;;aAGT,QAAQ,GAAG,GAAG,QAAQ,GAAG;;8BAER,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,eAAe,CAAC;;AAGxG,MAAM,aAAa,OAAO,GAAG;;mBAEV,QAAQ,GAAG;uBACP,EAAE,YAAY,cAAc,OAAO,gBAAgB,MAAM,cAAc,CAAC;IAC3F,cACC,WAAW,GAAG;0BACO,OAAO,oBAAoB;eACtC,OAAO,UAAU;MAE7B,CAAC;;;IAGA,mBAAmB;;AAGvB,MAAa,cAAc,OAAO,MAA6B;iBAC9C,EAAE,YAAY,cAAc,OAAO,uBAAuB,MAAM,aAAa,CAAC;IAC3F,cACC,WAAW,GAAG;eACJ,OAAO,UAAU;;;iBAGf,OAAO,WAAW;;MAGhC,CAAC;;;aAGS,QAAQ,GAAG;;mBAEL,aAAa,GAAG;;KAE9B,EAAE,UAAU,YACb,YACA,GAAG;0BACmB,cAAc,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;MACzF;;;;;;;oIAO0B;;;AAIhC,MAAM,aAAa,OAAOE,aAAK;;aAElB,QAAQ,GAAG;;AAGxB,MAAM,eAAe,OAAO,IAAI;6BACH,EAAE,YAAY,cAAc,OAAO,gBAAgB,MAAM,cAAc,CAAC;;AAIrG,MAAM,qBAAqB,OAAOC,qBAAa,KAAK;;;;;;;;AAepD,MAAM,WAA6B,EACjC,QACA,oBAAoB;CAAC;CAAa;CAAe;CAAc;CAAQ,OACnE;CACJ,MAAM,CAAC,iBAAiB,EAAE,QAAQ,mBAAmB,SAAS,uBAAuB,WAAW;CAChG,MAAM,CAAC,SAAS,cAAc,SAAS,GAAG;CAE1C,MAAM,uBAAuB,OAAuB,KAAK;AACzD,iBAAgB;EAAE,KAAK;EAAsB,gBAAgB;EAAmB,CAAC;AAEjF,KAAI,CAAC,UAAU,kBAAkB,WAAW,EAC1C,QAAO;CAGT,MAAM,EAAE,MAAM,UAAU;CACxB,MAAM,EAAE,MAAM,OAAO,KAAK,MAAM;CAChC,MAAM,gBAAgB,MAAM,IAAI,YAAY,MAAM,IAAI,GAAG;CAEzD,MAAM,iBAAiB,QAAgB;AACrC,MAAI,QAAQ,IAAI;AACd,UAAO,OAAO,CAAC,OAAO,CAAC,gBAAgB,OAAO,CAAC,WAAW,CAAC,KAAK;AAChE;;AAGF,SACG,OAAO,CACP,OAAO,CACP,gBAAgB,OAAO,CACvB,QAAQ,EAAE,MAAM,eAAe,IAAI,EAAE,CAAC,CACtC,KAAK;AACR,qBAAmB;;CAGrB,MAAM,0BAAgD,MAAM;AAC1D,MAAI,EAAE,QAAQ,SAAS;AACrB,KAAE,gBAAgB;AAClB,iBAAc,QAAQ;;;CAK1B,MAAM,gBAAgB,OAAO,iBAAiB,WAC3C,QACE,QACC,IAAI,SAAS,eAAe,kBAAkB,IAAI,QACrD,CACA,KAAK,QAAQ,IAAI,QAAQ,aAAa;CAEzC,MAAM,wBAAwB;EAC5B;GACE,IAAI;GACJ,OAAO;GACP,SAAS;GACT,MAAM;GACN,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK;GAC3D;EACD;GACE,IAAI;GACJ,OAAO;GACP,SAAS;GACT,MAAM;GACN,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,OAAO,GAAG,CAAC,CAAC,KAAK;GACxE;EACD;GACE,IAAI;GACJ,OAAO;GACP,SAAS;GACT,MAAM;GACN,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,OAAO,GAAG,CAAC,CAAC,KAAK;GACxE;EACD;GACE,IAAI;GACJ,OAAO;GACP,SAAS;GACT,MAAM;GACN,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,OAAO,GAAG,CAAC,CAAC,KAAK;GACxE;EACF;CAED,MAAM,cAAuD;GAE1D,cACC,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,aAAD;GACE,UAAU;GACV,IAAG;GACH,MAAK;GACL,cAAW;GACX,0BAAuB;GACvB,UAAU;GACV,UAAU,CAAC,OAAO,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK;GACpD,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK;aAElD,oBAAC,eAAD,EAAiB,CAAA;GACL,CAAA,EAEd,oBAAC,aAAD;GACE,UAAU;GACV,IAAG;GACH,MAAK;GACL,cAAW;GACX,0BAAuB;GACvB,UAAU;GACV,UAAU,CAAC,OAAO,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK;GACpD,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK;aAElD,oBAAC,cAAD,EAAgB,CAAA;GACJ,CAAA,CACL,EAAA,EA1BG,YA0BH;GAGZ,gBACC,oBAACA,sBAAD;GAEE,cAAc;IAGZ,0BAA0B;IAG1B,mBAAmB,UAAU;AAC3B,WAAM,gBAAgB;AACtB,YAAO,SAAS,OAAO;;IAE1B;GACD,SACE,qBAAC,aAAD;IACE,UAAU;IACV,IAAG;IACH,MAAK;IACL,cAAW;IACX,0BAAuB;IACvB,UAAU;cANZ,CAQE,oBAAC,gBAAD,EAAkB,CAAA,EAClB,oBAAC,eAAD,EAAiB,CAAA,CACL;;aAGf,iBAAiB,CAAC,KAAK,SACtB,oBAAC,oBAAD;IAEE,IAAI,KAAK;IACT,SAAS,KAAK;IACd,SAAS,KAAK;IACd,0BAAwB,KAAK;cAE5B,KAAK;IACa,EAPd,KAAK,GAOS,CACrB;GACW,EArCT,cAqCS;GAGhB,eACC,qBAAC,UAAD,EAAA,UAAA;GACE,oBAAC,aAAD;IACE,UAAU;IACV,IAAG;IACH,MAAK;IACL,cAAW;IACX,0BAAuB;IACvB,UAAU,OAAO,SAAS,OAAO;IACjC,UAAU,CAAC,OAAO,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK;IAC1D,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK;cAExD,oBAAC,UAAD,EAAY,CAAA;IACA,CAAA;GAEd,oBAAC,aAAD;IACE,UAAU;IACV,IAAG;IACH,MAAK;IACL,cAAW;IACX,0BAAuB;IACvB,UAAU,OAAO,SAAS,SAAS;IACnC,UAAU,CAAC,OAAO,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK;IAC5D,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK;cAE1D,oBAAC,YAAD,EAAc,CAAA;IACF,CAAA;GAEd,oBAACC,iBAAD;IACE,MAAM;IACN,SACE,oBAAC,aAAD;KACE,UAAU;KACV,IAAG;KACH,MAAK;KACL,cAAW;KACX,0BAAuB;KAEvB,UAAU,CAAC,OAAO,SAAS,OAAO,IAAI,kBAAkB;KACxD,UAAU,OAAO,SAAS,OAAO;KACjC,eAAe;AACb,yBAAmB;AACnB,iBAAW,OAAO,cAAc,OAAO,CAAC,QAAQ,GAAG;;eAGrD,oBAAC,UAAD,EAAY,CAAA;KACA,CAAA;cAGhB,oBAACA,gBAAQ,SAAT;KAAiB,MAAK;KAAS,OAAM;KAAS,OAAO,EAAE,QAAQ,UAAU,OAAO;eAC9E,qBAAC,YAAD;MAAY,UAAA;MAAS,KAAK;gBAA1B,CACE,oBAAC,WAAD;OACE,MAAK;OACL,OAAO;OACP,0BAAuB;OACvB,WAAW,MAAM,WAAW,EAAE,OAAO,MAAM;OAC3C,WAAW;OACX,CAAA,EAEF,qBAAC,QAAD;OAAQ,OAAA;iBAAR,CACE,oBAAC,QAAD;QACE,IAAG;QACH,MAAK;QACL,SAAQ;QACR,0BAAuB;QACvB,SAAS;kBACV;QAEQ,CAAA,EACT,oBAAC,QAAD;QACE,IAAG;QACH,MAAK;QACL,MAAK;QACL,SAAQ;QACR,0BAAuB;QACvB,eAAe;AACb,uBAAc,QAAQ;AACtB,4BAAmB;;kBAEtB;QAEQ,CAAA,CACF;SACE;;KACG,CAAA;IACV,CAAA;GACD,EAAA,EArFG,aAqFH;GAGZ,UACC,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,aAAD;GACE,UAAU;GACV,IAAG;GACH,MAAK;GACL,cAAW;GACX,0BAAuB;GACvB,UAAU,OAAO,SAAS,aAAa;GACvC,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,kBAAkB,CAAC,KAAK;aAE9D,oBAAC,UAAD,EAAY,CAAA;GACA,CAAA,EAEd,oBAAC,aAAD;GACE,UAAU;GACV,IAAG;GACH,MAAK;GACL,cAAW;GACX,0BAAuB;GACvB,UAAU,OAAO,SAAS,cAAc;GACxC,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,mBAAmB,CAAC,KAAK;aAE/D,oBAAC,iBAAD,EAAmB,CAAA;GACP,CAAA,CACL,EAAA,EAxBG,QAwBH;GAGZ,UAAU,OAAO,SAAS,QAAQ,GACjC,qBAACD,sBAAD;GAEE,cAAc;IAEZ,0BAA0B;IAC1B,mBAAmB,UAAU;AAC3B,WAAM,gBAAgB;AACtB,YAAO,SAAS,OAAO;;IAE1B;GACD,SACE,qBAAC,aAAD;IACE,UAAU;IACV,IAAG;IACH,MAAK;IACL,cAAW;IACX,0BAAuB;IACvB,UAAA;cANF,CAQE,oBAAC,UAAD,EAAY,CAAA,EACZ,oBAAC,eAAD,EAAiB,CAAA,CACL;;aArBlB;IAwBE,oBAAC,oBAAD;KACE,IAAG;KACH,SAAQ;KACR,0BAAuB;KACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK;eAC1D;KAEoB,CAAA;IACrB,oBAAC,oBAAD;KACE,IAAG;KACH,SAAQ;KACR,0BAAuB;KACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK;eAC3D;KAEoB,CAAA;IACrB,oBAAC,oBAAD;KACE,IAAG;KACH,SAAQ;KACR,0BAAuB;KACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK;eAC7D;KAEoB,CAAA;IACrB,oBAAC,oBAAD;KACE,IAAG;KACH,SAAQ;KACR,0BAAuB;KACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK;eAC9D;KAEoB,CAAA;IACrB,oBAAC,oBAAD;KACE,IAAG;KACH,SAAQ;KACR,0BAAuB;KACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK;eACxD;KAEoB,CAAA;IACrB,oBAAC,oBAAD;KACE,IAAG;KACH,SAAQ;KACR,0BAAuB;KACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK;eAC3D;KAEoB,CAAA;IACrB,oBAAC,oBAAD;KACE,IAAG;KACH,SAAQ;KACR,0BAAuB;KACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK;eAC9D;KAEoB,CAAA;IACrB,oBAAC,oBAAD;KACE,IAAG;KACH,SAAQ;KACR,0BAAuB;KACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK;eAC1D;KAEoB,CAAA;IACR;KAvFT,gBAuFS,GAEf,oBAAC,aAAD;GAEE,UAAU;GACV,IAAG;GACH,MAAK;GACL,cAAW;GACX,0BAAuB;GACvB,UAAU;GACV,UACE,CAAC,OAAO,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY;IAAE,MAAM;IAAG,MAAM;IAAG,eAAe;IAAM,CAAC,CAAC,KAAK;GAE5F,eACE,OAAO,OAAO,CAAC,OAAO,CAAC,YAAY;IAAE,MAAM;IAAG,MAAM;IAAG,eAAe;IAAM,CAAC,CAAC,KAAK;aAGrF,oBAAC,UAAD,EAAY,CAAA;GACA,EAfR,eAeQ;EAEjB;AAED,QACE,oBAAC,KAAD;EAAK,OAAM;YACR,YACC,CACE,GAAG,kBAAkB,KAAK,YAAY,YAAY,SAAS,EAC3D,GAAI,cAAc,SAAS,IACvB,CACE,oBAAC,UAAD,EAAA,UACG,cAAc,KAAK,cAAc,MAChC,oBAAC,UAAD,EAAA,UACG,aAAa,cAAc,OAAO,EAC1B,EAFI,cAAc,IAElB,CACX,EACO,EANG,QAMH,CACZ,GACD,EAAE,CACP,GACA,MACC,oBAAC,cAAD,EAAuC,EAApB,aAAa,IAAO,CAE1C;EACG,CAAA;;AA4BV,MAAM,OAAO,OAAO,GAAG;;;AAIvB,MAAM,kBAA2C,EAC/C,WACA,cACA,iBACA,6BAA6B,EAAE,EAC/B,iBAAiB,OACjB,WAAW,OACX,kBAAkB,OAClB,wBACA,wBACA,WAAW,MACX,YAAY,MACZ,SAAS,WACL;CAIJ,MAAM,eAAe,OAAO,UAAU;AACtC,cAAa,UAAU;CAEvB,MAAM,SAAS,UAAU;EACvB,YAAY;GACV,SAAS,UAAU;IACjB,MAAM;IACN,YAAY;IACZ,gBAAgB;IAChB,kBAAkB;IAClB,SAAS;IACT,QAAQ;IACR,qBAAqB;IACrB,qBAAqB;IACtB,CAAC;GACF;GAGA,KAAK,OAAO,EAAE,WAAW,OAAO,CAAC,CAAC,UAAU;IAE1C,UAAU;IACV,aAAa;IACd,CAAC;GACF,MAAM,UAAU,EAAE,WAAW,OAAO,CAAC;GACrC;GACA;GACA;GACA,GAAG;GACJ;EACD,SAAS,UAAU,SAAS,gBAAgB,GAAG;EAC/C,aAAa;GACX,YAAY,EACV,OAAO,oBACR;GACD,cAAc,OAAmB,OAAsB;AACrD,iBAAa,UAAU,MAAM;AAE7B,WAAO,MAAM;;GAEhB;EACD,WAAW,EAAE,aAAa;GACxB,IAAI,QAAQ,iBAAiB,OAAO,QAAQ,SAAS,aAAa,GAAG,OAAO,SAAS;AAErF,OAAI,kBAAkB,MACpB,SAAQ,uBAAuB,MAAM;AAKvC,YAAS,iBAAiB,OAAO,MAAM,IAAI,GAAG,KAAK,UAAU,SAAS,MAAM,CAAC;;EAE/E,SAAS,MAA4B;;;;AAMnC,OAAI,CAAC,EAAE,MAAM,eAAe,SAAS,eACnC,SAAQ;;EAGb,CAAC;AAEF,iBAAgB;AACd,MAAI;OAEE,kBADU,iBAAiB,OAAO,QAAQ,SAAS,aAAa,GAAG,OAAO,SAAS,GAC3D;IAC1B,MAAM,EAAE,MAAM,OAAO,OAAO,MAAM;AAClC,WACG,OAAO,CAGP,SAAS,EAAE,SAAS;AACnB,QAAG,QAAQ,gBAAgB,MAAM;AACjC,YAAO;MACP,CACD,WAAW,UAAU,SAAS,aAAa,EAAE,OAAO,EACnD,oBAAoB,MACrB,CAAC,CACD,iBAAiB;KAAE;KAAM;KAAI,CAAC,CAC9B,KAAK;;;IAGX;EAAC;EAAc;EAAQ;EAAe,CAAC;AAE1C,iBAAgB;AACd,MAAI,OAGF,QAAO,YAAY,CAAC,UAAU,MAAM;IAErC,CAAC,QAAQ,SAAS,CAAC;AAEtB,KAAI,CAAC,OACH,QAAO;AAWT,QAEE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAACE,gBAAD,EAAmB,CAAA,EAClB,WACC,oBAAC,MAAD;EAAiB;YACf,oBAAC,eAAD,EAAuB,QAAU,CAAA;EAC5B,CAAA,GAEP,qBAAC,YAAD;EAAuB;YAAvB;GACE,oBAAC,SAAD;IAAS,mBAlB+B,mBAAmB;KACjE;KACA;KACA;KACA;KACA;KACD;IAY6D;IAAU,CAAA;GAC/D,mBAAmB,oBAAC,iBAAD,EAAyB,QAAU,CAAA;GACvD,oBAAC,eAAD;IACE,OAAO;KACL,SAAS,QAAQ;KACjB,WAAW,0BAA0B;KACrC,WAAW,0BAA0B;KACrC,WAAW;KACZ;IACO;IACR,CAAA;GACS;IAEd,EAAA,CAAA"}

package/dist/components/RightPanel/index.mjs

@@ -1,17 +1,17 @@
-import { a as styled } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { a as styled } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor } from "../../lib/semanticColor.mjs";
-import { i as Paragraph } from "../../Text-CSwFifQF.mjs";
+import { i as Paragraph } from "../../Text-D0vEReED.mjs";
 import { semanticScrollbar } from "../../mixins/scrollbar.mjs";
-import { n as Stack, t as HStack } from "../../Stack-BkC7FCdF.mjs";
-import { t as IconButton } from "../../IconButton-HWx5Hlmi.mjs";
-import { t as LoadingShimmer } from "../../LoadingShimmer-Bqjdut7i.mjs";
-import { Color, Spacing } from "@persona/design-tokens";
+import { n as Stack, t as HStack } from "../../Stack-Bzom2BTR.mjs";
+import { t as IconButton } from "../../IconButton-DftINsp7.mjs";
+import { t as LoadingShimmer } from "../../LoadingShimmer-oPIv2ESr.mjs";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { Color, Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "@persona/icons";
 import { mergeProps, useMove } from "react-aria";
 import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
-//#region components/RightPanel/RightPanelLoadingContent.tsx
+//#region src/components/RightPanel/RightPanelLoadingContent.tsx
 const RightPanelLoadingContent = () => /* @__PURE__ */ jsxs(Stack, {
 	spacing: Spacing[5],
 	"aria-label": "Loading panel content",
@@ -46,7 +46,7 @@ const RightPanelLoadingContent = () => /* @__PURE__ */ jsxs(Stack, {
 	]
 });
 //#endregion
-//#region components/RightPanel/RightPanelResizeHandle.tsx
+//#region src/components/RightPanel/RightPanelResizeHandle.tsx
 const DRAGGING_CLASSNAME = "dragging";
 const KEYBOARD_RESIZE_STEP = 10;
 const KEYBOARD_RESIZE_STEP_LARGE = 40;
@@ -149,7 +149,7 @@ const RightPanelResizeHandle = ({ onMove, onMoveTo, onMoveStart, onMoveEnd, onDo
 	});
 };
 //#endregion
-//#region components/RightPanel/RightPanel.tsx
+//#region src/components/RightPanel/RightPanel.tsx
 const OPEN_DURATION = .4;
 const CLOSE_DURATION = .3;
 const DEFAULT_MIN_WIDTH = 450;

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/RightPanel/RightPanelLoadingContent.tsx","../../../components/RightPanel/RightPanelResizeHandle.tsx","../../../components/RightPanel/RightPanel.tsx"],"sourcesContent":["import { LoadingShimmer } from '@persona/design-system/components/LoadingShimmer';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport { Spacing } from '@persona/design-tokens';\n\nconst RightPanelLoadingContent = () => (\n  <Stack spacing={Spacing[5]} aria-label='Loading panel content'>\n    <Stack spacing={Spacing[2]}>\n      <LoadingShimmer width='30%' height='16px' />\n      <LoadingShimmer width='100%' height='40px' />\n    </Stack>\n    <Stack spacing={Spacing[2]}>\n      <LoadingShimmer width='35%' height='16px' />\n      <LoadingShimmer width='100%' height='200px' />\n    </Stack>\n    <HStack justify='flex-end'>\n      <LoadingShimmer width='80px' height='32px' />\n    </HStack>\n  </Stack>\n);\n\nexport default RightPanelLoadingContent;\n","import { type FC, type KeyboardEvent, type PointerEvent, useEffect, useRef, useState } from 'react';\nimport { mergeProps, useMove } from 'react-aria';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { semanticColor } from 'design-system/lib/semanticColor';\n\nconst DRAGGING_CLASSNAME = 'dragging';\nconst KEYBOARD_RESIZE_STEP = 10;\nconst KEYBOARD_RESIZE_STEP_LARGE = 40;\n\nexport interface RightPanelResizeHandleProps {\n  onMove: (deltaX: number) => void;\n  onMoveTo?: (clientX: number) => void;\n  onMoveStart?: () => void;\n  onMoveEnd?: () => void;\n  onDoubleClick?: () => void;\n}\n\nconst Handle = styled.div`\n  touch-action: none;\n  cursor: col-resize;\n  position: absolute;\n  z-index: 1;\n  width: ${Spacing[2]};\n  top: 0;\n  bottom: 0;\n  left: 0;\n  height: 100%;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    width: 2px;\n    background-color: transparent;\n    transition: background-color 0.15s ease-in;\n    transition-delay: 0.025s;\n  }\n\n  &:hover::after,\n  &${`.${DRAGGING_CLASSNAME}`}::after {\n    background-color: ${({ theme }) => semanticColor(theme, 'BorderFocus', theme.color.border.active)};\n  }\n`;\n\nconst RightPanelResizeHandle: FC<RightPanelResizeHandleProps> = ({\n  onMove,\n  onMoveTo,\n  onMoveStart,\n  onMoveEnd,\n  onDoubleClick,\n}) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const isDraggingRef = useRef(false);\n  const capturedPointerIdRef = useRef<number | null>(null);\n  const onMoveEndRef = useRef(onMoveEnd);\n  onMoveEndRef.current = onMoveEnd;\n\n  const { moveProps } = useMove({\n    onMoveStart(e) {\n      if (e.pointerType !== 'keyboard') {\n        isDraggingRef.current = true;\n        setIsDragging(true);\n      }\n      onMoveStart?.();\n    },\n    onMove(e) {\n      if (e.pointerType !== 'keyboard') {\n        return;\n      }\n      const step = e.shiftKey ? KEYBOARD_RESIZE_STEP_LARGE : KEYBOARD_RESIZE_STEP;\n      onMove(e.deltaX * step);\n    },\n    onMoveEnd(e) {\n      if (e.pointerType !== 'keyboard') {\n        isDraggingRef.current = false;\n        setIsDragging(false);\n        capturedPointerIdRef.current = null;\n      }\n      onMoveEnd?.();\n    },\n  });\n\n  useEffect(() => {\n    return () => {\n      if (isDraggingRef.current) {\n        onMoveEndRef.current?.();\n      }\n    };\n  }, []);\n\n  return (\n    <Handle\n      {...mergeProps(moveProps, {\n        onDoubleClick,\n        onKeyDown: (e: KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            onDoubleClick?.();\n            e.preventDefault();\n          }\n        },\n        onLostPointerCapture: (e: PointerEvent<HTMLDivElement>) => {\n          if (capturedPointerIdRef.current !== e.pointerId) {\n            return;\n          }\n          capturedPointerIdRef.current = null;\n          window.dispatchEvent(\n            new PointerEvent('pointerup', {\n              bubbles: true,\n              pointerId: e.pointerId,\n              pointerType: e.pointerType || 'mouse',\n            }),\n          );\n        },\n        onPointerDown: (e: PointerEvent<HTMLDivElement>) => {\n          if (e.button !== 0 || capturedPointerIdRef.current != null) {\n            return;\n          }\n          capturedPointerIdRef.current = e.pointerId;\n          try {\n            e.currentTarget.setPointerCapture(e.pointerId);\n          } catch {\n            // Pointer capture unsupported.\n          }\n        },\n        onPointerMove: (e: PointerEvent<HTMLDivElement>) => {\n          if (capturedPointerIdRef.current !== e.pointerId) {\n            return;\n          }\n          onMoveTo?.(e.clientX);\n        },\n      })}\n      aria-label='Resize right panel'\n      aria-orientation='vertical'\n      role='separator'\n      tabIndex={0}\n      className={isDragging ? DRAGGING_CLASSNAME : undefined}\n    />\n  );\n};\n\nexport default RightPanelResizeHandle;\n","import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';\nimport {\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport { Paragraph } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { semanticScrollbar } from 'design-system/mixins/scrollbar';\n\nimport RightPanelLoadingContent from './RightPanelLoadingContent';\nimport RightPanelResizeHandle from './RightPanelResizeHandle';\n\nconst OPEN_DURATION = 0.4;\nconst CLOSE_DURATION = 0.3;\nconst DEFAULT_MIN_WIDTH = 450;\nconst MAX_WIDTH_RATIO = 0.5;\n// Reserves scroll-area space so form submit buttons don't collide with the\n// floating Copilot button (anchored at bottom: Spacing[5], 48px hit target).\nconst BODY_BOTTOM_PADDING = `calc(${Spacing[5]} + 48px + ${Spacing[5]})`;\n\nconst PanelOuter = styled(motion.div)`\n  flex-shrink: 0;\n  height: 100%;\n  overflow: hidden;\n`;\n\nconst PanelInner = styled.div<{ $width: number; $useMinWidth: boolean }>`\n  position: relative;\n  ${({ $width, $useMinWidth }) => ($useMinWidth ? `min-width: ${$width}px;` : '')}\n  height: 100%;\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  background: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.BackgroundPrimary)};\n  border-left: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst PanelHeader = styled.div`\n  padding: ${Spacing[4]};\n  border-bottom: 1px solid ${({ theme }) =>\n    semanticColor(theme, 'BorderSubtle', theme.color.border.primary)};\n  flex-shrink: 0;\n`;\n\nconst PanelBody = styled.div`\n  flex: 1;\n  overflow-y: auto;\n  ${semanticScrollbar}\n  padding: ${Spacing[4]};\n  padding-bottom: ${BODY_BOTTOM_PADDING};\n`;\n\nexport interface RightPanelProps {\n  /** Controlled open state */\n  open?: boolean;\n  /** Panel id */\n  id?: string;\n  /** Called when open state changes */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Panel title rendered in header */\n  title: string;\n  /** Optional description below title */\n  description?: string;\n  /** Panel content */\n  children: ReactNode;\n  /** Panel width in pixels */\n  width?: number;\n  /** Minimum width when resizable. Defaults to 450px. */\n  minWidth?: number;\n  /** When true, the panel is drag-resizable via its left edge. */\n  resizable?: boolean;\n  /** When true, render a shimmer placeholder in the body instead of children. */\n  loading?: boolean;\n}\n\nconst RightPanel = ({\n  id,\n  open = false,\n  onOpenChange,\n  title,\n  description,\n  children,\n  width = DEFAULT_MIN_WIDTH,\n  minWidth = DEFAULT_MIN_WIDTH,\n  resizable = false,\n  loading = false,\n}: RightPanelProps) => {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const previousActiveElementRef = useRef<HTMLElement | null>(null);\n  const prefersReducedMotion = useReducedMotion();\n\n  const defaultWidth = resizable ? Math.max(minWidth, width) : width;\n  const [currentWidth, setCurrentWidth] = useState(defaultWidth);\n  const [shouldAnimateWidth, setShouldAnimateWidth] = useState(true);\n\n  const effectiveWidth = resizable ? currentWidth : width;\n\n  const handleClose = useCallback(() => {\n    onOpenChange?.(false);\n  }, [onOpenChange]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        handleClose();\n      }\n    },\n    [handleClose],\n  );\n\n  useEffect(() => {\n    if (open) {\n      previousActiveElementRef.current = document.activeElement as HTMLElement | null;\n      panelRef.current?.focus();\n    } else if (\n      previousActiveElementRef.current &&\n      document.contains(previousActiveElementRef.current)\n    ) {\n      previousActiveElementRef.current.focus();\n      previousActiveElementRef.current = null;\n    }\n  }, [open]);\n\n  const clampWidth = useCallback(\n    (nextWidth: number) =>\n      Math.min(MAX_WIDTH_RATIO * window.innerWidth, Math.max(minWidth, nextWidth)),\n    [minWidth],\n  );\n\n  const handleMove = useCallback(\n    (deltaX: number) => {\n      setCurrentWidth((current) => clampWidth(current - deltaX));\n    },\n    [clampWidth],\n  );\n\n  const handleMoveTo = useCallback(\n    (clientX: number) => {\n      const rightEdge = panelRef.current?.getBoundingClientRect().right ?? window.innerWidth;\n      setCurrentWidth(clampWidth(rightEdge - clientX));\n    },\n    [clampWidth],\n  );\n\n  const handleMoveStart = useCallback(() => {\n    setShouldAnimateWidth(false);\n  }, []);\n\n  const handleMoveEnd = useCallback(() => {\n    setShouldAnimateWidth(true);\n  }, []);\n\n  const handleDoubleClick = useCallback(() => {\n    setShouldAnimateWidth(true);\n    setCurrentWidth(defaultWidth);\n  }, [defaultWidth]);\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <PanelOuter\n          initial={{\n            width: prefersReducedMotion ? effectiveWidth : 0,\n            minWidth: prefersReducedMotion ? effectiveWidth : 0,\n          }}\n          animate={{\n            width: effectiveWidth,\n            minWidth: effectiveWidth,\n            transition: {\n              duration: prefersReducedMotion ? 0 : OPEN_DURATION,\n              ease: 'circOut',\n              width: shouldAnimateWidth && !prefersReducedMotion ? undefined : { duration: 0 },\n              minWidth: shouldAnimateWidth && !prefersReducedMotion ? undefined : { duration: 0 },\n            },\n          }}\n          exit={{\n            width: 0,\n            minWidth: 0,\n            transition: {\n              duration: prefersReducedMotion ? 0 : CLOSE_DURATION,\n              ease: 'circOut',\n            },\n          }}\n        >\n          <PanelInner\n            ref={panelRef}\n            id={id}\n            $width={effectiveWidth}\n            $useMinWidth={shouldAnimateWidth}\n            role='complementary'\n            aria-label={title}\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n          >\n            {resizable && (\n              <RightPanelResizeHandle\n                onMove={handleMove}\n                onMoveTo={handleMoveTo}\n                onMoveStart={handleMoveStart}\n                onMoveEnd={handleMoveEnd}\n                onDoubleClick={handleDoubleClick}\n              />\n            )}\n            <PanelHeader>\n              <Stack spacing={Spacing[2]}>\n                <HStack justify='space-between' align='center' spacing={Spacing[2]}>\n                  <Paragraph as='h3' size='lg' weight='bold' color='primary'>\n                    {title}\n                  </Paragraph>\n                  <IconButton size='md' aria-label='Close' onClick={handleClose}>\n                    <XIcon />\n                  </IconButton>\n                </HStack>\n                {description && (\n                  <Paragraph size='md' color='secondary'>\n                    {description}\n                  </Paragraph>\n                )}\n              </Stack>\n            </PanelHeader>\n            <PanelBody>{loading ? <RightPanelLoadingContent /> : children}</PanelBody>\n          </PanelInner>\n        </PanelOuter>\n      )}\n    </AnimatePresence>\n  );\n};\n\nexport { RightPanel };\nexport default RightPanel;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/RightPanel/RightPanelLoadingContent.tsx","../../../src/components/RightPanel/RightPanelResizeHandle.tsx","../../../src/components/RightPanel/RightPanel.tsx"],"sourcesContent":["import { LoadingShimmer } from '@persona/design-system/components/LoadingShimmer';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport { Spacing } from '@persona/design-tokens';\n\nconst RightPanelLoadingContent = () => (\n  <Stack spacing={Spacing[5]} aria-label='Loading panel content'>\n    <Stack spacing={Spacing[2]}>\n      <LoadingShimmer width='30%' height='16px' />\n      <LoadingShimmer width='100%' height='40px' />\n    </Stack>\n    <Stack spacing={Spacing[2]}>\n      <LoadingShimmer width='35%' height='16px' />\n      <LoadingShimmer width='100%' height='200px' />\n    </Stack>\n    <HStack justify='flex-end'>\n      <LoadingShimmer width='80px' height='32px' />\n    </HStack>\n  </Stack>\n);\n\nexport default RightPanelLoadingContent;\n","import { type FC, type KeyboardEvent, type PointerEvent, useEffect, useRef, useState } from 'react';\nimport { mergeProps, useMove } from 'react-aria';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { semanticColor } from '#src/lib/semanticColor';\n\nconst DRAGGING_CLASSNAME = 'dragging';\nconst KEYBOARD_RESIZE_STEP = 10;\nconst KEYBOARD_RESIZE_STEP_LARGE = 40;\n\nexport interface RightPanelResizeHandleProps {\n  onMove: (deltaX: number) => void;\n  onMoveTo?: (clientX: number) => void;\n  onMoveStart?: () => void;\n  onMoveEnd?: () => void;\n  onDoubleClick?: () => void;\n}\n\nconst Handle = styled.div`\n  touch-action: none;\n  cursor: col-resize;\n  position: absolute;\n  z-index: 1;\n  width: ${Spacing[2]};\n  top: 0;\n  bottom: 0;\n  left: 0;\n  height: 100%;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    width: 2px;\n    background-color: transparent;\n    transition: background-color 0.15s ease-in;\n    transition-delay: 0.025s;\n  }\n\n  &:hover::after,\n  &${`.${DRAGGING_CLASSNAME}`}::after {\n    background-color: ${({ theme }) => semanticColor(theme, 'BorderFocus', theme.color.border.active)};\n  }\n`;\n\nconst RightPanelResizeHandle: FC<RightPanelResizeHandleProps> = ({\n  onMove,\n  onMoveTo,\n  onMoveStart,\n  onMoveEnd,\n  onDoubleClick,\n}) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const isDraggingRef = useRef(false);\n  const capturedPointerIdRef = useRef<number | null>(null);\n  const onMoveEndRef = useRef(onMoveEnd);\n  onMoveEndRef.current = onMoveEnd;\n\n  const { moveProps } = useMove({\n    onMoveStart(e) {\n      if (e.pointerType !== 'keyboard') {\n        isDraggingRef.current = true;\n        setIsDragging(true);\n      }\n      onMoveStart?.();\n    },\n    onMove(e) {\n      if (e.pointerType !== 'keyboard') {\n        return;\n      }\n      const step = e.shiftKey ? KEYBOARD_RESIZE_STEP_LARGE : KEYBOARD_RESIZE_STEP;\n      onMove(e.deltaX * step);\n    },\n    onMoveEnd(e) {\n      if (e.pointerType !== 'keyboard') {\n        isDraggingRef.current = false;\n        setIsDragging(false);\n        capturedPointerIdRef.current = null;\n      }\n      onMoveEnd?.();\n    },\n  });\n\n  useEffect(() => {\n    return () => {\n      if (isDraggingRef.current) {\n        onMoveEndRef.current?.();\n      }\n    };\n  }, []);\n\n  return (\n    <Handle\n      {...mergeProps(moveProps, {\n        onDoubleClick,\n        onKeyDown: (e: KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            onDoubleClick?.();\n            e.preventDefault();\n          }\n        },\n        onLostPointerCapture: (e: PointerEvent<HTMLDivElement>) => {\n          if (capturedPointerIdRef.current !== e.pointerId) {\n            return;\n          }\n          capturedPointerIdRef.current = null;\n          window.dispatchEvent(\n            new PointerEvent('pointerup', {\n              bubbles: true,\n              pointerId: e.pointerId,\n              pointerType: e.pointerType || 'mouse',\n            }),\n          );\n        },\n        onPointerDown: (e: PointerEvent<HTMLDivElement>) => {\n          if (e.button !== 0 || capturedPointerIdRef.current != null) {\n            return;\n          }\n          capturedPointerIdRef.current = e.pointerId;\n          try {\n            e.currentTarget.setPointerCapture(e.pointerId);\n          } catch {\n            // Pointer capture unsupported.\n          }\n        },\n        onPointerMove: (e: PointerEvent<HTMLDivElement>) => {\n          if (capturedPointerIdRef.current !== e.pointerId) {\n            return;\n          }\n          onMoveTo?.(e.clientX);\n        },\n      })}\n      aria-label='Resize right panel'\n      aria-orientation='vertical'\n      role='separator'\n      tabIndex={0}\n      className={isDragging ? DRAGGING_CLASSNAME : undefined}\n    />\n  );\n};\n\nexport default RightPanelResizeHandle;\n","import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';\nimport {\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport { Paragraph } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\n\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { semanticScrollbar } from '#src/mixins/scrollbar';\n\nimport RightPanelLoadingContent from './RightPanelLoadingContent';\nimport RightPanelResizeHandle from './RightPanelResizeHandle';\n\nconst OPEN_DURATION = 0.4;\nconst CLOSE_DURATION = 0.3;\nconst DEFAULT_MIN_WIDTH = 450;\nconst MAX_WIDTH_RATIO = 0.5;\n// Reserves scroll-area space so form submit buttons don't collide with the\n// floating Copilot button (anchored at bottom: Spacing[5], 48px hit target).\nconst BODY_BOTTOM_PADDING = `calc(${Spacing[5]} + 48px + ${Spacing[5]})`;\n\nconst PanelOuter = styled(motion.div)`\n  flex-shrink: 0;\n  height: 100%;\n  overflow: hidden;\n`;\n\nconst PanelInner = styled.div<{ $width: number; $useMinWidth: boolean }>`\n  position: relative;\n  ${({ $width, $useMinWidth }) => ($useMinWidth ? `min-width: ${$width}px;` : '')}\n  height: 100%;\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  background: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.BackgroundPrimary)};\n  border-left: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst PanelHeader = styled.div`\n  padding: ${Spacing[4]};\n  border-bottom: 1px solid ${({ theme }) =>\n    semanticColor(theme, 'BorderSubtle', theme.color.border.primary)};\n  flex-shrink: 0;\n`;\n\nconst PanelBody = styled.div`\n  flex: 1;\n  overflow-y: auto;\n  ${semanticScrollbar}\n  padding: ${Spacing[4]};\n  padding-bottom: ${BODY_BOTTOM_PADDING};\n`;\n\nexport interface RightPanelProps {\n  /** Controlled open state */\n  open?: boolean;\n  /** Panel id */\n  id?: string;\n  /** Called when open state changes */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Panel title rendered in header */\n  title: string;\n  /** Optional description below title */\n  description?: string;\n  /** Panel content */\n  children: ReactNode;\n  /** Panel width in pixels */\n  width?: number;\n  /** Minimum width when resizable. Defaults to 450px. */\n  minWidth?: number;\n  /** When true, the panel is drag-resizable via its left edge. */\n  resizable?: boolean;\n  /** When true, render a shimmer placeholder in the body instead of children. */\n  loading?: boolean;\n}\n\nconst RightPanel = ({\n  id,\n  open = false,\n  onOpenChange,\n  title,\n  description,\n  children,\n  width = DEFAULT_MIN_WIDTH,\n  minWidth = DEFAULT_MIN_WIDTH,\n  resizable = false,\n  loading = false,\n}: RightPanelProps) => {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const previousActiveElementRef = useRef<HTMLElement | null>(null);\n  const prefersReducedMotion = useReducedMotion();\n\n  const defaultWidth = resizable ? Math.max(minWidth, width) : width;\n  const [currentWidth, setCurrentWidth] = useState(defaultWidth);\n  const [shouldAnimateWidth, setShouldAnimateWidth] = useState(true);\n\n  const effectiveWidth = resizable ? currentWidth : width;\n\n  const handleClose = useCallback(() => {\n    onOpenChange?.(false);\n  }, [onOpenChange]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        handleClose();\n      }\n    },\n    [handleClose],\n  );\n\n  useEffect(() => {\n    if (open) {\n      previousActiveElementRef.current = document.activeElement as HTMLElement | null;\n      panelRef.current?.focus();\n    } else if (\n      previousActiveElementRef.current &&\n      document.contains(previousActiveElementRef.current)\n    ) {\n      previousActiveElementRef.current.focus();\n      previousActiveElementRef.current = null;\n    }\n  }, [open]);\n\n  const clampWidth = useCallback(\n    (nextWidth: number) =>\n      Math.min(MAX_WIDTH_RATIO * window.innerWidth, Math.max(minWidth, nextWidth)),\n    [minWidth],\n  );\n\n  const handleMove = useCallback(\n    (deltaX: number) => {\n      setCurrentWidth((current) => clampWidth(current - deltaX));\n    },\n    [clampWidth],\n  );\n\n  const handleMoveTo = useCallback(\n    (clientX: number) => {\n      const rightEdge = panelRef.current?.getBoundingClientRect().right ?? window.innerWidth;\n      setCurrentWidth(clampWidth(rightEdge - clientX));\n    },\n    [clampWidth],\n  );\n\n  const handleMoveStart = useCallback(() => {\n    setShouldAnimateWidth(false);\n  }, []);\n\n  const handleMoveEnd = useCallback(() => {\n    setShouldAnimateWidth(true);\n  }, []);\n\n  const handleDoubleClick = useCallback(() => {\n    setShouldAnimateWidth(true);\n    setCurrentWidth(defaultWidth);\n  }, [defaultWidth]);\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <PanelOuter\n          initial={{\n            width: prefersReducedMotion ? effectiveWidth : 0,\n            minWidth: prefersReducedMotion ? effectiveWidth : 0,\n          }}\n          animate={{\n            width: effectiveWidth,\n            minWidth: effectiveWidth,\n            transition: {\n              duration: prefersReducedMotion ? 0 : OPEN_DURATION,\n              ease: 'circOut',\n              width: shouldAnimateWidth && !prefersReducedMotion ? undefined : { duration: 0 },\n              minWidth: shouldAnimateWidth && !prefersReducedMotion ? undefined : { duration: 0 },\n            },\n          }}\n          exit={{\n            width: 0,\n            minWidth: 0,\n            transition: {\n              duration: prefersReducedMotion ? 0 : CLOSE_DURATION,\n              ease: 'circOut',\n            },\n          }}\n        >\n          <PanelInner\n            ref={panelRef}\n            id={id}\n            $width={effectiveWidth}\n            $useMinWidth={shouldAnimateWidth}\n            role='complementary'\n            aria-label={title}\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n          >\n            {resizable && (\n              <RightPanelResizeHandle\n                onMove={handleMove}\n                onMoveTo={handleMoveTo}\n                onMoveStart={handleMoveStart}\n                onMoveEnd={handleMoveEnd}\n                onDoubleClick={handleDoubleClick}\n              />\n            )}\n            <PanelHeader>\n              <Stack spacing={Spacing[2]}>\n                <HStack justify='space-between' align='center' spacing={Spacing[2]}>\n                  <Paragraph as='h3' size='lg' weight='bold' color='primary'>\n                    {title}\n                  </Paragraph>\n                  <IconButton size='md' aria-label='Close' onClick={handleClose}>\n                    <XIcon />\n                  </IconButton>\n                </HStack>\n                {description && (\n                  <Paragraph size='md' color='secondary'>\n                    {description}\n                  </Paragraph>\n                )}\n              </Stack>\n            </PanelHeader>\n            <PanelBody>{loading ? <RightPanelLoadingContent /> : children}</PanelBody>\n          </PanelInner>\n        </PanelOuter>\n      )}\n    </AnimatePresence>\n  );\n};\n\nexport { RightPanel };\nexport default RightPanel;\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import { i as SegmentedControlProps, n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-xjU-2IsJ.mjs";
+import { i as SegmentedControlProps, n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-UV03Ujqn.mjs";
 export { SegmentedControl, SegmentedControl as default, SegmentedControlItem, SegmentedControlProps };

package/dist/components/SegmentedControl/index.mjs

@@ -1,2 +1,2 @@
-import { n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-DQjIO6iX.mjs";
+import { n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-D_DA-MU1.mjs";
 export { SegmentedControl, SegmentedControl as default, SegmentedControlItem };

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

@@ -1,2 +1,2 @@
-import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "../../Select-CSbamhJO.mjs";
+import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "../../Select-BLqHxJUz.mjs";
 export { Option, Select, Select as default, SelectHeader, SelectProps };

package/dist/components/Select/index.mjs

@@ -1,2 +1,2 @@
-import { n as Select, r as SelectHeader, t as Option } from "../../Select-BJ9ACmRD.mjs";
+import { n as Select, r as SelectHeader, t as Option } from "../../Select-DkUMz4LG.mjs";
 export { Option, Select, Select as default, SelectHeader };

package/dist/components/SelectionCard/index.mjs

@@ -1,17 +1,17 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor, semanticOnly, semanticTokens } from "../../lib/semanticColor.mjs";
-import { i as Paragraph } from "../../Text-CSwFifQF.mjs";
-import { a as Tooltip } from "../../Tooltip-B-0VRuKT.mjs";
+import { i as Paragraph } from "../../Text-D0vEReED.mjs";
+import { a as Tooltip } from "../../Tooltip-YViXzMdm.mjs";
 import { opacityOf, withAlpha } from "../../lib/color.mjs";
 import useControlled from "../../lib/useControlled.mjs";
 import { focusStyle } from "../../mixins/focus.mjs";
-import { n as Stack, t as HStack } from "../../Stack-BkC7FCdF.mjs";
-import { n as useFormField, t as FormControlContext } from "../../useFormField-CbNYbDdp.mjs";
-import { t as Checkbox } from "../../Checkbox-BaJ-dGdX.mjs";
-import { Color, Spacing, Typography } from "@persona/design-tokens";
+import { n as Stack, t as HStack } from "../../Stack-Bzom2BTR.mjs";
+import { n as useFormField, t as FormControlContext } from "../../useFormField-pOVkb5BK.mjs";
+import { t as Checkbox } from "../../Checkbox-Dr4LMKHV.mjs";
 import { Children, cloneElement, isValidElement, useContext } from "react";
+import { Color, Spacing, Typography } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region components/SelectionCard/SelectionCard.tsx
+//#region src/components/SelectionCard/SelectionCard.tsx
 const CardRoot = styled.label`
   position: relative;
   display: flex;
@@ -177,7 +177,7 @@ const SelectionCard = ({ value, label, description, icon, disabled: disabledProp
 	return card;
 };
 //#endregion
-//#region components/SelectionCard/SelectionCardGroup.tsx
+//#region src/components/SelectionCard/SelectionCardGroup.tsx
 const selectionCards = (children) => Children.toArray(children).filter((child) => isValidElement(child) && child.type === SelectionCard);
 const firstSelectableValue = (children) => selectionCards(children).find((card) => !card.props.disabled)?.props.value;
 const groupLayout = (children, stack) => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/SelectionCard/SelectionCard.tsx","../../../components/SelectionCard/SelectionCardGroup.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Checkbox from '@persona/design-system/components/Checkbox';\nimport { HStack, Stack } from '@persona/design-system/components/Stack';\nimport { Paragraph } from '@persona/design-system/components/Text';\nimport { Tooltip } from '@persona/design-system/components/Tooltip';\nimport { focusStyle } from '@persona/design-system/mixins/focus';\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport { opacityOf, withAlpha } from 'design-system/lib/color';\nimport { semanticColor, semanticOnly, semanticTokens } from 'design-system/lib/semanticColor';\n\nexport interface SelectionCardProps {\n  /** Value submitted with the group when this card is selected. */\n  value: string;\n  /** Required visible name. Left-aligned with `description`. */\n  label: string;\n  /** Optional supporting copy under the label. Omitted when not passed. */\n  description?: string;\n  /**\n   * Optional icon to the left of the label. Leave it off when it does not add\n   * meaning, including in multiple mode.\n   */\n  icon?: ReactElement;\n  disabled?: boolean;\n  /** Tooltip shown on hover only while `disabled` is set. */\n  disabledReason?: string;\n  /** Injected by `SelectionCardGroup`. */\n  name?: string;\n  /** Injected by `SelectionCardGroup`. */\n  checked?: boolean;\n  /** Injected by `SelectionCardGroup`. */\n  onChange?: (checked: boolean) => void;\n  /** Injected by `SelectionCardGroup`. */\n  multiple?: boolean;\n  /** Layout hook for this card. */\n  className?: string;\n}\n\nconst CardRoot = styled.label<{ $selected: boolean; $disabled: boolean }>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};\n  pointer-events: ${({ $disabled }) => ($disabled ? 'none' : 'auto')};\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n  outline: none;\n\n  /* Keyboard focus only. A click focuses the input too, and should not draw this ring. */\n  &:has(:focus-visible) {\n    ${focusStyle}\n  }\n\n  border: 1px solid\n    ${({ theme, $selected, $disabled }) => {\n      if ($disabled) {\n        return semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled);\n      }\n      if ($selected) {\n        return semanticColor(theme, 'BorderAccent', theme.color.primary.brand);\n      }\n      return semanticColor(theme, 'BorderDefault', theme.color.border.input);\n    }};\n\n  background-color: ${({ theme, $selected, $disabled }) => {\n    if ($disabled) {\n      return semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled);\n    }\n    if ($selected) {\n      const tokens = semanticTokens(theme);\n      return tokens\n        ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25)\n        : theme.color.background.highlight;\n    }\n    return semanticColor(theme, 'SurfacePrimary', theme.color.background.primary);\n  }};\n\n  ${({ $disabled, $selected }) =>\n    !$disabled &&\n    !$selected &&\n    css`\n      &:hover {\n        background-color: ${({ theme }) =>\n          semanticColor(theme, 'SurfaceHover', Color.BackgroundInteractiveHover)};\n      }\n    `}\n\n  ${({ $disabled }) =>\n    $disabled &&\n    css`\n      ${semanticOnly((tokens) => `opacity: ${opacityOf(tokens.Opacity65)};`)}\n    `}\n`;\n\nconst Body = styled.div`\n  padding: ${Spacing[4]};\n`;\n\nconst Copy = styled(Stack)`\n  flex: 1 1 auto;\n  min-width: 0;\n`;\n\n/** Height of one line of label text. */\nconst LABEL_LINE_HEIGHT = Typography.TextMediumBold.lineHeight;\n\n/** Size of the checkbox and the icon. */\nconst CONTROL_SIZE = Spacing[4];\n\n/**\n * Holds the label. With a checkbox or icon, the label's first line is pulled up to share their\n * 16px height and center line. Only the top moves, so the gap to the description stays the same\n * with or without a checkbox or icon.\n */\nconst LabelRow = styled.span<{ $withControl: boolean }>`\n  display: block;\n  ${({ $withControl }) =>\n    $withControl &&\n    css`\n      margin-top: calc((${CONTROL_SIZE} - ${LABEL_LINE_HEIGHT}) / 2);\n    `}\n`;\n\n/** Centers a 16px icon on the checkbox and label center line. */\nconst IconSlot = styled.span`\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  align-self: flex-start;\n  height: ${CONTROL_SIZE};\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n\n  svg {\n    width: ${CONTROL_SIZE};\n    height: ${CONTROL_SIZE};\n  }\n`;\nconst Marker = styled.span`\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  height: ${CONTROL_SIZE};\n\n  /* The card draws the only focus ring and the only disabled fade. */\n  && input:focus-visible ~ [aria-hidden] {\n    outline: none;\n  }\n\n  && input ~ [aria-hidden] {\n    opacity: 1;\n  }\n`;\n\nconst NativeRadio = styled.input`\n  cursor: inherit;\n  position: absolute;\n  inset: 0;\n  margin: 0;\n  opacity: 0;\n  border: 0;\n  outline: none;\n  pointer-events: none;\n`;\n\nconst TooltipTrigger = styled.span`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  align-self: stretch;\n`;\n\nexport const SelectionCard = ({\n  value,\n  label,\n  description,\n  icon,\n  disabled: disabledProp,\n  disabledReason,\n  name,\n  checked = false,\n  onChange,\n  multiple = false,\n  className,\n}: SelectionCardProps) => {\n  const field = useFormField({ disabled: disabledProp || undefined });\n  const disabled = !!field.disabled;\n  const card = (\n    <CardRoot className={className} $selected={checked} $disabled={disabled}>\n      <Body>\n        <HStack align='flex-start' spacing={icon ? Spacing[3] : Spacing[2]}>\n          {multiple && (\n            <Marker>\n              <Checkbox\n                name={name}\n                value={value}\n                checked={checked}\n                disabled={disabled}\n                onChange={(event) => onChange?.(event.target.checked)}\n              />\n            </Marker>\n          )}\n          {icon && <IconSlot>{icon}</IconSlot>}\n          <Copy spacing={Spacing[1]}>\n            <LabelRow $withControl={multiple || !!icon}>\n              <Paragraph\n                as='span'\n                size='md'\n                weight='bold'\n                color={disabled ? 'disabled' : 'primary'}\n              >\n                {label}\n              </Paragraph>\n            </LabelRow>\n            {description && (\n              <Paragraph\n                as='span'\n                size='md'\n                color={disabled ? 'disabled' : checked ? 'primary' : 'secondary'}\n              >\n                {description}\n              </Paragraph>\n            )}\n          </Copy>\n        </HStack>\n      </Body>\n      {!multiple && (\n        <NativeRadio\n          type='radio'\n          name={name}\n          value={value}\n          checked={checked}\n          disabled={disabled}\n          onChange={() => onChange?.(true)}\n        />\n      )}\n    </CardRoot>\n  );\n\n  if (disabled && disabledReason) {\n    return <Tooltip trigger={<TooltipTrigger>{card}</TooltipTrigger>}>{disabledReason}</Tooltip>;\n  }\n\n  return card;\n};\n\nexport default SelectionCard;\n","import {\n  Children,\n  cloneElement,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useContext,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Stack from '@persona/design-system/components/Stack';\nimport { Spacing } from '@persona/design-tokens';\nimport { FormControlContext } from 'design-system/components/FormControl/useFormField';\nimport useControlled from 'design-system/lib/useControlled';\n\nimport SelectionCard, { type SelectionCardProps } from './SelectionCard';\n\ninterface SelectionCardGroupBaseProps {\n  /** Shared input name. Radios in a single group arrow-key together. */\n  name?: string;\n  /** Layout hook for the group. Not forwarded onto each card. */\n  className?: string;\n  /** Place two cards in a column. Two cards sit side by side when this is omitted. Three or more always stack. */\n  stack?: boolean;\n  /** Accessible name for the group. */\n  'aria-label'?: string;\n  /** Id of the element that names the group, such as a field label. */\n  'aria-labelledby'?: string;\n  children: ReactNode;\n}\n\nexport interface SelectionCardGroupSingleProps extends SelectionCardGroupBaseProps {\n  /** One card may be selected. Cards render no radio mark. */\n  multiple?: false;\n  'aria-required'?: boolean;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n}\n\nexport interface SelectionCardGroupMultipleProps extends SelectionCardGroupBaseProps {\n  /** Several cards may be selected. Each card shows a checkbox. */\n  multiple: true;\n  value?: string[];\n  defaultValue?: string[];\n  onChange?: (value: string[]) => void;\n}\n\nexport type SelectionCardGroupProps =\n  | SelectionCardGroupSingleProps\n  | SelectionCardGroupMultipleProps;\n\nconst selectionCards = (children: ReactNode) =>\n  Children.toArray(children).filter(\n    (child): child is ReactElement<SelectionCardProps> =>\n      isValidElement(child) && child.type === SelectionCard,\n  );\n\nconst firstSelectableValue = (children: ReactNode) =>\n  selectionCards(children).find((card) => !card.props.disabled)?.props.value;\n\nconst groupLayout = (children: ReactNode, stack?: boolean) => {\n  const inline = selectionCards(children).length === 2 && !stack;\n  return {\n    $inline: inline,\n    direction: inline ? ('horizontal' as const) : ('vertical' as const),\n    equal: inline,\n    align: inline ? ('stretch' as const) : undefined,\n  };\n};\n\nconst Group = styled(Stack)<{ $inline: boolean }>`\n  ${({ $inline }) =>\n    $inline &&\n    css`\n      > * {\n        width: auto;\n        min-width: 0;\n        align-self: stretch;\n      }\n    `}\n`;\nconst renderCards = (\n  children: ReactNode,\n  getProps: (card: SelectionCardProps) => Partial<SelectionCardProps>,\n) =>\n  Children.map(children, (child) => {\n    if (!isValidElement(child) || child.type !== SelectionCard) {\n      return child;\n    }\n    const card = child as ReactElement<SelectionCardProps>;\n    return cloneElement(card, getProps(card.props));\n  });\n\nconst SingleGroup = ({\n  name,\n  className,\n  stack,\n  children,\n  value: valueProp,\n  defaultValue,\n  onChange,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  'aria-required': ariaRequired,\n}: SelectionCardGroupSingleProps) => {\n  const field = useContext(FormControlContext);\n  const [value, setValue] = useControlled({\n    controlledValue: valueProp,\n    default: defaultValue ?? (field.disabled ? undefined : firstSelectableValue(children)),\n  });\n\n  return (\n    <Group\n      {...groupLayout(children, stack)}\n      className={className}\n      spacing={Spacing[2]}\n      role='radiogroup'\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-required={ariaRequired}\n    >\n      {renderCards(children, (card) => ({\n        name,\n        multiple: false,\n        checked: card.value === value,\n        onChange: () => {\n          if (field.disabled || card.disabled) {\n            return;\n          }\n          setValue(card.value);\n          onChange?.(card.value);\n        },\n      }))}\n    </Group>\n  );\n};\n\nconst MultipleGroup = ({\n  name,\n  className,\n  stack,\n  children,\n  value: valueProp,\n  defaultValue,\n  onChange,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n}: SelectionCardGroupMultipleProps) => {\n  const field = useContext(FormControlContext);\n  const [value, setValue] = useControlled({\n    controlledValue: valueProp,\n    default: defaultValue ?? [],\n  });\n  const selected = value ?? [];\n\n  return (\n    <Group\n      {...groupLayout(children, stack)}\n      className={className}\n      spacing={Spacing[2]}\n      role='group'\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n    >\n      {renderCards(children, (card) => ({\n        name,\n        multiple: true,\n        checked: selected.includes(card.value),\n        onChange: (checked: boolean) => {\n          if (field.disabled || card.disabled) {\n            return;\n          }\n          const next = checked\n            ? selected.includes(card.value)\n              ? selected\n              : [...selected, card.value]\n            : selected.filter((item) => item !== card.value);\n          setValue(next);\n          onChange?.(next);\n        },\n      }))}\n    </Group>\n  );\n};\n\nexport const SelectionCardGroup = (props: SelectionCardGroupProps) => {\n  const field = useContext(FormControlContext);\n  /* Each card's checkbox would otherwise take the enclosing field's shared input id. */\n  return (\n    <FormControlContext.Provider value={{ ...field, inputId: undefined }}>\n      {props.multiple ? <MultipleGroup {...props} /> : <SingleGroup {...props} />}\n    </FormControlContext.Provider>\n  );\n};\n\nexport default SelectionCardGroup;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/SelectionCard/SelectionCard.tsx","../../../src/components/SelectionCard/SelectionCardGroup.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Checkbox from '@persona/design-system/components/Checkbox';\nimport { HStack, Stack } from '@persona/design-system/components/Stack';\nimport { Paragraph } from '@persona/design-system/components/Text';\nimport { Tooltip } from '@persona/design-system/components/Tooltip';\nimport { focusStyle } from '@persona/design-system/mixins/focus';\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\n\nimport useFormField from '#src/components/FormControl/useFormField';\nimport { opacityOf, withAlpha } from '#src/lib/color';\nimport { semanticColor, semanticOnly, semanticTokens } from '#src/lib/semanticColor';\n\nexport interface SelectionCardProps {\n  /** Value submitted with the group when this card is selected. */\n  value: string;\n  /** Required visible name. Left-aligned with `description`. */\n  label: string;\n  /** Optional supporting copy under the label. Omitted when not passed. */\n  description?: string;\n  /**\n   * Optional icon to the left of the label. Leave it off when it does not add\n   * meaning, including in multiple mode.\n   */\n  icon?: ReactElement;\n  disabled?: boolean;\n  /** Tooltip shown on hover only while `disabled` is set. */\n  disabledReason?: string;\n  /** Injected by `SelectionCardGroup`. */\n  name?: string;\n  /** Injected by `SelectionCardGroup`. */\n  checked?: boolean;\n  /** Injected by `SelectionCardGroup`. */\n  onChange?: (checked: boolean) => void;\n  /** Injected by `SelectionCardGroup`. */\n  multiple?: boolean;\n  /** Layout hook for this card. */\n  className?: string;\n}\n\nconst CardRoot = styled.label<{ $selected: boolean; $disabled: boolean }>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};\n  pointer-events: ${({ $disabled }) => ($disabled ? 'none' : 'auto')};\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n  outline: none;\n\n  /* Keyboard focus only. A click focuses the input too, and should not draw this ring. */\n  &:has(:focus-visible) {\n    ${focusStyle}\n  }\n\n  border: 1px solid\n    ${({ theme, $selected, $disabled }) => {\n      if ($disabled) {\n        return semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled);\n      }\n      if ($selected) {\n        return semanticColor(theme, 'BorderAccent', theme.color.primary.brand);\n      }\n      return semanticColor(theme, 'BorderDefault', theme.color.border.input);\n    }};\n\n  background-color: ${({ theme, $selected, $disabled }) => {\n    if ($disabled) {\n      return semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled);\n    }\n    if ($selected) {\n      const tokens = semanticTokens(theme);\n      return tokens\n        ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25)\n        : theme.color.background.highlight;\n    }\n    return semanticColor(theme, 'SurfacePrimary', theme.color.background.primary);\n  }};\n\n  ${({ $disabled, $selected }) =>\n    !$disabled &&\n    !$selected &&\n    css`\n      &:hover {\n        background-color: ${({ theme }) =>\n          semanticColor(theme, 'SurfaceHover', Color.BackgroundInteractiveHover)};\n      }\n    `}\n\n  ${({ $disabled }) =>\n    $disabled &&\n    css`\n      ${semanticOnly((tokens) => `opacity: ${opacityOf(tokens.Opacity65)};`)}\n    `}\n`;\n\nconst Body = styled.div`\n  padding: ${Spacing[4]};\n`;\n\nconst Copy = styled(Stack)`\n  flex: 1 1 auto;\n  min-width: 0;\n`;\n\n/** Height of one line of label text. */\nconst LABEL_LINE_HEIGHT = Typography.TextMediumBold.lineHeight;\n\n/** Size of the checkbox and the icon. */\nconst CONTROL_SIZE = Spacing[4];\n\n/**\n * Holds the label. With a checkbox or icon, the label's first line is pulled up to share their\n * 16px height and center line. Only the top moves, so the gap to the description stays the same\n * with or without a checkbox or icon.\n */\nconst LabelRow = styled.span<{ $withControl: boolean }>`\n  display: block;\n  ${({ $withControl }) =>\n    $withControl &&\n    css`\n      margin-top: calc((${CONTROL_SIZE} - ${LABEL_LINE_HEIGHT}) / 2);\n    `}\n`;\n\n/** Centers a 16px icon on the checkbox and label center line. */\nconst IconSlot = styled.span`\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  align-self: flex-start;\n  height: ${CONTROL_SIZE};\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n\n  svg {\n    width: ${CONTROL_SIZE};\n    height: ${CONTROL_SIZE};\n  }\n`;\nconst Marker = styled.span`\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  height: ${CONTROL_SIZE};\n\n  /* The card draws the only focus ring and the only disabled fade. */\n  && input:focus-visible ~ [aria-hidden] {\n    outline: none;\n  }\n\n  && input ~ [aria-hidden] {\n    opacity: 1;\n  }\n`;\n\nconst NativeRadio = styled.input`\n  cursor: inherit;\n  position: absolute;\n  inset: 0;\n  margin: 0;\n  opacity: 0;\n  border: 0;\n  outline: none;\n  pointer-events: none;\n`;\n\nconst TooltipTrigger = styled.span`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  align-self: stretch;\n`;\n\nexport const SelectionCard = ({\n  value,\n  label,\n  description,\n  icon,\n  disabled: disabledProp,\n  disabledReason,\n  name,\n  checked = false,\n  onChange,\n  multiple = false,\n  className,\n}: SelectionCardProps) => {\n  const field = useFormField({ disabled: disabledProp || undefined });\n  const disabled = !!field.disabled;\n  const card = (\n    <CardRoot className={className} $selected={checked} $disabled={disabled}>\n      <Body>\n        <HStack align='flex-start' spacing={icon ? Spacing[3] : Spacing[2]}>\n          {multiple && (\n            <Marker>\n              <Checkbox\n                name={name}\n                value={value}\n                checked={checked}\n                disabled={disabled}\n                onChange={(event) => onChange?.(event.target.checked)}\n              />\n            </Marker>\n          )}\n          {icon && <IconSlot>{icon}</IconSlot>}\n          <Copy spacing={Spacing[1]}>\n            <LabelRow $withControl={multiple || !!icon}>\n              <Paragraph\n                as='span'\n                size='md'\n                weight='bold'\n                color={disabled ? 'disabled' : 'primary'}\n              >\n                {label}\n              </Paragraph>\n            </LabelRow>\n            {description && (\n              <Paragraph\n                as='span'\n                size='md'\n                color={disabled ? 'disabled' : checked ? 'primary' : 'secondary'}\n              >\n                {description}\n              </Paragraph>\n            )}\n          </Copy>\n        </HStack>\n      </Body>\n      {!multiple && (\n        <NativeRadio\n          type='radio'\n          name={name}\n          value={value}\n          checked={checked}\n          disabled={disabled}\n          onChange={() => onChange?.(true)}\n        />\n      )}\n    </CardRoot>\n  );\n\n  if (disabled && disabledReason) {\n    return <Tooltip trigger={<TooltipTrigger>{card}</TooltipTrigger>}>{disabledReason}</Tooltip>;\n  }\n\n  return card;\n};\n\nexport default SelectionCard;\n","import {\n  Children,\n  cloneElement,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useContext,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Stack from '@persona/design-system/components/Stack';\nimport { Spacing } from '@persona/design-tokens';\n\nimport { FormControlContext } from '#src/components/FormControl/useFormField';\nimport useControlled from '#src/lib/useControlled';\n\nimport SelectionCard, { type SelectionCardProps } from './SelectionCard';\n\ninterface SelectionCardGroupBaseProps {\n  /** Shared input name. Radios in a single group arrow-key together. */\n  name?: string;\n  /** Layout hook for the group. Not forwarded onto each card. */\n  className?: string;\n  /** Place two cards in a column. Two cards sit side by side when this is omitted. Three or more always stack. */\n  stack?: boolean;\n  /** Accessible name for the group. */\n  'aria-label'?: string;\n  /** Id of the element that names the group, such as a field label. */\n  'aria-labelledby'?: string;\n  children: ReactNode;\n}\n\nexport interface SelectionCardGroupSingleProps extends SelectionCardGroupBaseProps {\n  /** One card may be selected. Cards render no radio mark. */\n  multiple?: false;\n  'aria-required'?: boolean;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n}\n\nexport interface SelectionCardGroupMultipleProps extends SelectionCardGroupBaseProps {\n  /** Several cards may be selected. Each card shows a checkbox. */\n  multiple: true;\n  value?: string[];\n  defaultValue?: string[];\n  onChange?: (value: string[]) => void;\n}\n\nexport type SelectionCardGroupProps =\n  | SelectionCardGroupSingleProps\n  | SelectionCardGroupMultipleProps;\n\nconst selectionCards = (children: ReactNode) =>\n  Children.toArray(children).filter(\n    (child): child is ReactElement<SelectionCardProps> =>\n      isValidElement(child) && child.type === SelectionCard,\n  );\n\nconst firstSelectableValue = (children: ReactNode) =>\n  selectionCards(children).find((card) => !card.props.disabled)?.props.value;\n\nconst groupLayout = (children: ReactNode, stack?: boolean) => {\n  const inline = selectionCards(children).length === 2 && !stack;\n  return {\n    $inline: inline,\n    direction: inline ? ('horizontal' as const) : ('vertical' as const),\n    equal: inline,\n    align: inline ? ('stretch' as const) : undefined,\n  };\n};\n\nconst Group = styled(Stack)<{ $inline: boolean }>`\n  ${({ $inline }) =>\n    $inline &&\n    css`\n      > * {\n        width: auto;\n        min-width: 0;\n        align-self: stretch;\n      }\n    `}\n`;\nconst renderCards = (\n  children: ReactNode,\n  getProps: (card: SelectionCardProps) => Partial<SelectionCardProps>,\n) =>\n  Children.map(children, (child) => {\n    if (!isValidElement(child) || child.type !== SelectionCard) {\n      return child;\n    }\n    const card = child as ReactElement<SelectionCardProps>;\n    return cloneElement(card, getProps(card.props));\n  });\n\nconst SingleGroup = ({\n  name,\n  className,\n  stack,\n  children,\n  value: valueProp,\n  defaultValue,\n  onChange,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  'aria-required': ariaRequired,\n}: SelectionCardGroupSingleProps) => {\n  const field = useContext(FormControlContext);\n  const [value, setValue] = useControlled({\n    controlledValue: valueProp,\n    default: defaultValue ?? (field.disabled ? undefined : firstSelectableValue(children)),\n  });\n\n  return (\n    <Group\n      {...groupLayout(children, stack)}\n      className={className}\n      spacing={Spacing[2]}\n      role='radiogroup'\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-required={ariaRequired}\n    >\n      {renderCards(children, (card) => ({\n        name,\n        multiple: false,\n        checked: card.value === value,\n        onChange: () => {\n          if (field.disabled || card.disabled) {\n            return;\n          }\n          setValue(card.value);\n          onChange?.(card.value);\n        },\n      }))}\n    </Group>\n  );\n};\n\nconst MultipleGroup = ({\n  name,\n  className,\n  stack,\n  children,\n  value: valueProp,\n  defaultValue,\n  onChange,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n}: SelectionCardGroupMultipleProps) => {\n  const field = useContext(FormControlContext);\n  const [value, setValue] = useControlled({\n    controlledValue: valueProp,\n    default: defaultValue ?? [],\n  });\n  const selected = value ?? [];\n\n  return (\n    <Group\n      {...groupLayout(children, stack)}\n      className={className}\n      spacing={Spacing[2]}\n      role='group'\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n    >\n      {renderCards(children, (card) => ({\n        name,\n        multiple: true,\n        checked: selected.includes(card.value),\n        onChange: (checked: boolean) => {\n          if (field.disabled || card.disabled) {\n            return;\n          }\n          const next = checked\n            ? selected.includes(card.value)\n              ? selected\n              : [...selected, card.value]\n            : selected.filter((item) => item !== card.value);\n          setValue(next);\n          onChange?.(next);\n        },\n      }))}\n    </Group>\n  );\n};\n\nexport const SelectionCardGroup = (props: SelectionCardGroupProps) => {\n  const field = useContext(FormControlContext);\n  /* Each card's checkbox would otherwise take the enclosing field's shared input id. */\n  return (\n    <FormControlContext.Provider value={{ ...field, inputId: undefined }}>\n      {props.multiple ? <MultipleGroup {...props} /> : <SingleGroup {...props} />}\n    </FormControlContext.Provider>\n  );\n};\n\nexport default SelectionCardGroup;\n"],"mappings":"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"}

package/dist/components/Slider/index.mjs

@@ -1,10 +1,10 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor, semanticOnly } from "../../lib/semanticColor.mjs";
 import { paragraphMixins } from "../../mixins/text.mjs";
-import { i as FloatingTooltip } from "../../Tooltip-B-0VRuKT.mjs";
+import { i as FloatingTooltip } from "../../Tooltip-YViXzMdm.mjs";
 import { focusStyle } from "../../mixins/focus.mjs";
-import { Color, Spacing } from "@persona/design-tokens";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { Color, Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { debounce } from "lodash-es";
 import { mergeProps } from "@react-aria/utils";
@@ -15,7 +15,7 @@ import { useSliderState } from "@react-stately/slider";
 import { useFocusRing } from "@react-aria/focus";
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 import { useController } from "react-hook-form";
-//#region components/Slider/SliderThumb.tsx
+//#region src/components/Slider/SliderThumb.tsx
 const Tooltip = styled(FloatingTooltip)`
   ${paragraphMixins.sm};
 `;
@@ -105,7 +105,7 @@ const SliderThumb = ({ state, trackRef, index, outputProps, hideTooltips }) => {
 	});
 };
 //#endregion
-//#region components/Slider/Slider.tsx
+//#region src/components/Slider/Slider.tsx
 const SliderContainer = styled.div`
   display: flex;
   align-items: center;
@@ -223,7 +223,7 @@ const Slider = ({ minLabel, maxLabel, showLabels, track, width, hideTooltips, cl
 	});
 };
 //#endregion
-//#region components/Slider/SliderRHF.tsx
+//#region src/components/Slider/SliderRHF.tsx
 const SliderRHF = ({ control, name: nameProp, defaultValue, ...elemProps }) => {
 	const { field: { onChange, onBlur, name, value } } = useController({
 		name: nameProp,

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Slider/SliderThumb.tsx","../../../components/Slider/Slider.tsx","../../../components/Slider/SliderRHF.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  type ElementProps,\n  flip,\n  type FloatingContext,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useSliderThumb } from '@react-aria/slider';\nimport { mergeProps } from '@react-aria/utils';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport type { SliderState } from '@react-stately/slider';\nimport { debounce } from 'lodash-es';\nimport {\n  type OutputHTMLAttributes,\n  type RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { FloatingTooltip } from 'design-system/components/Tooltip';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst Tooltip = styled(FloatingTooltip)`\n  ${paragraphMixins.sm};\n`;\n\nconst Thumb = styled('div')<{ disabled?: boolean }>`\n  /* Note this will break if the element is not on a white background. Variable is provided to be able to override. */\n  --background-color-behind-thumb: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.PrimaryWhite)};\n  box-sizing: border-box;\n  width: 16px;\n  height: 16px;\n  background: ${({ theme, disabled }) =>\n    disabled\n      ? semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled)\n      : semanticColor(theme, 'InputSurfaceInverseStatic', Color.BackgroundInputDefault)};\n  cursor: ${(props) => (props.disabled ? 'inherit' : 'pointer')};\n  border-radius: 50%;\n  border: 1px solid\n    ${({ theme, disabled }) =>\n      disabled\n        ? semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)\n        : semanticColor(theme, 'BorderDefault', Color.BorderInputDisabled)};\n  /* Enable clicks on thumb */\n  pointer-events: auto;\n\n  &[data-focused] {\n    ${focusStyle}\n    /* Extra pixel of size to overlap into the outline, fixing a small visual bug */\n    box-shadow: 0 0 0 2px var(--background-color-behind-thumb);\n  }\n`;\n\ninterface SliderThumbProps {\n  state: SliderState;\n  trackRef: RefObject<HTMLElement>;\n  index: number;\n  outputProps: OutputHTMLAttributes<HTMLOutputElement>;\n  hideTooltips?: boolean;\n}\n\ninterface UsePressedOptions {\n  delay?: number;\n}\n\nconst usePressed = (context: FloatingContext, options?: UsePressedOptions): ElementProps => {\n  const closeHandler = useMemo(\n    () => debounce(() => context.onOpenChange(false), options?.delay ?? 500),\n    [],\n  );\n  return {\n    reference: {\n      onPointerDown: () => {\n        context.onOpenChange(true);\n      },\n      onPointerUp: () => {\n        closeHandler();\n      },\n    },\n  };\n};\n\nconst SliderThumb = ({ state, trackRef, index, outputProps, hideTooltips }: SliderThumbProps) => {\n  const inputRef = useRef(null);\n  const { thumbProps, inputProps } = useSliderThumb(\n    {\n      index,\n      trackRef,\n      inputRef,\n    },\n    state,\n  );\n\n  const { focusProps, isFocused } = useFocusRing();\n\n  const [open, setOpen] = useState(false);\n\n  const { x, y, refs, strategy, context } = useFloating({\n    placement: 'top',\n    open,\n    onOpenChange: setOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [offset(4), flip(), shift({ padding: 4 })],\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useRole(context, { role: 'tooltip' }),\n    useDismiss(context),\n    usePressed(context),\n  ]);\n\n  useEffect(() => {\n    setOpen(isFocused);\n  }, [isFocused]);\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        top: '50%',\n        transform: 'translateX(-50%) translateY(-50%)',\n        left: `${state.getThumbPercent(index) * 100}%`,\n      }}\n    >\n      {open && !hideTooltips && (\n        <Tooltip\n          {...mergeProps(\n            getFloatingProps({\n              ref: refs.setFloating,\n              style: {\n                position: strategy,\n                top: y ?? '',\n                left: x ?? '',\n              },\n            }),\n            outputProps,\n          )}\n        >\n          {state.getThumbValueLabel(index)}\n        </Tooltip>\n      )}\n      <Thumb\n        {...mergeProps(\n          thumbProps,\n          getReferenceProps({\n            ref: refs.setReference,\n          }),\n          isFocused ? { 'data-focused': true } : undefined,\n        )}\n      >\n        <VisuallyHidden>\n          <input ref={inputRef} {...mergeProps(inputProps, focusProps)} />\n        </VisuallyHidden>\n      </Thumb>\n    </div>\n  );\n};\n\nexport default SliderThumb;\n","import type { NumberFormatOptions } from '@internationalized/number';\nimport { useNumberFormatter } from '@react-aria/i18n';\nimport { useSlider } from '@react-aria/slider';\nimport { useSliderState } from '@react-stately/slider';\nimport type { SliderProps as SliderPropsType } from '@react-types/slider';\nimport { type FocusEventHandler, type ReactNode, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport SliderThumb from 'design-system/components/Slider/SliderThumb';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst SliderContainer = styled.div`\n  display: flex;\n  align-items: center;\n  touch-action: none;\n  position: relative;\n`;\n\nconst SliderLabel = styled.div<{ $disabled?: boolean }>`\n  ${paragraphMixins.md};\n  ${({ $disabled }) =>\n    semanticOnly((tokens) => `color: ${$disabled ? tokens.FgDisabled : tokens.FgPrimary};`)}\n  &:first-of-type {\n    padding-right: ${Spacing[2]};\n  }\n\n  &:last-of-type {\n    padding-left: ${Spacing[2]};\n  }\n`;\n\ntype SliderTrackProps = {\n  track?: boolean;\n  percents: number[];\n  disabled?: boolean;\n};\nconst SliderTrack = styled.div<SliderTrackProps>`\n  position: relative;\n  width: 100%;\n  height: 4px;\n  border-radius: 4px;\n  outline: none;\n  transition: background 0.2s;\n\n  /* Disable clicks on slide bar */\n  pointer-events: none;\n\n  ${({ theme, percents, track, disabled }) => {\n    const activeColor = disabled\n      ? semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)\n      : semanticColor(theme, 'InputBorderAccent', Color.CoreBlue700);\n    const trackColor = semanticColor(theme, 'BorderSubtle', Color.BorderDivider);\n\n    if (track === false) {\n      return css`\n        background: ${trackColor};\n      `;\n    }\n\n    if (percents.length === 2) {\n      return css`\n        background: linear-gradient(\n          to right,\n          ${trackColor} 0%,\n          ${trackColor} ${percents[0] * 100}%,\n          ${activeColor} ${percents[0] * 100}%,\n          ${activeColor} ${percents[1] * 100}%,\n          ${trackColor} ${percents[1] * 100}%,\n          ${trackColor} 100%\n        );\n      `;\n    }\n\n    const leftColor = activeColor;\n    const rightColor = trackColor;\n\n    return css`\n      background: linear-gradient(\n        to right,\n        ${leftColor} 0%,\n        ${leftColor} ${percents[0] * 100}%,\n        ${rightColor} ${percents[0] * 100}%,\n        ${rightColor} 100%\n      );\n    `;\n  }}\n`;\n\nexport interface SliderProps<T = number | number[]> {\n  min?: number;\n  minLabel?: ReactNode;\n  max?: number;\n  maxLabel?: ReactNode;\n  onChange?: (value: T) => void;\n  value?: T;\n  defaultValue?: T;\n  step?: number;\n\n  /**\n   * Show labels on ends of track\n   */\n  showLabels?: boolean;\n\n  /**\n   * Track style\n   */\n  track?: boolean;\n\n  /**\n   * Hide tooltips on slider thumbs\n   */\n  hideTooltips?: boolean;\n  width?: number | 'auto';\n  disabled?: boolean;\n  formatOptions?: NumberFormatOptions;\n\n  id?: string;\n  className?: string;\n  name?: string;\n  onBlur?: FocusEventHandler<HTMLDivElement>;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n}\n\nexport const Slider = ({\n  minLabel,\n  maxLabel,\n  showLabels,\n  track,\n  width,\n  hideTooltips,\n  className,\n  id,\n  onBlur,\n  ...elemProps\n}: SliderProps) => {\n  const { min, max, value, defaultValue, disabled } = elemProps;\n  const trackRef = useRef(null);\n  const numberFormatter = useNumberFormatter(elemProps.formatOptions);\n\n  const ariaElemProps: SliderPropsType = {\n    ...elemProps,\n    isDisabled: disabled,\n    minValue: min,\n    maxValue: max,\n    value: typeof value === 'number' ? [value] : value,\n    defaultValue: typeof defaultValue === 'number' ? [defaultValue] : defaultValue,\n    onChange:\n      typeof elemProps.onChange !== 'undefined'\n        ? (v) => {\n            if (Array.isArray(v) && v.length === 1) {\n              /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n              return elemProps.onChange(v[0]);\n            }\n\n            /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n            return elemProps.onChange(v);\n          }\n        : undefined,\n  };\n\n  const state = useSliderState({ ...ariaElemProps, numberFormatter });\n  const { groupProps, trackProps, outputProps } = useSlider(ariaElemProps, state, trackRef);\n\n  return (\n    <SliderContainer\n      {...groupProps}\n      style={{\n        position: 'relative',\n        alignItems: 'center',\n        width: width ?? 300,\n        touchAction: 'none',\n      }}\n      className={className}\n      id={id}\n      onBlur={onBlur}\n    >\n      {showLabels && <SliderLabel $disabled={disabled}>{minLabel ?? min}</SliderLabel>}\n      <SliderTrack\n        {...trackProps}\n        track={track}\n        ref={trackRef}\n        percents={state.values.map((_v, i) => state.getThumbPercent(i))}\n        disabled={disabled}\n      >\n        {state.values.map((_v, i) => (\n          <SliderThumb\n            key={`${trackProps.id}_thumb${i}`}\n            index={i}\n            state={state}\n            trackRef={trackRef}\n            hideTooltips={hideTooltips}\n            outputProps={outputProps}\n          />\n        ))}\n      </SliderTrack>\n      {showLabels && <SliderLabel $disabled={disabled}>{maxLabel ?? max}</SliderLabel>}\n    </SliderContainer>\n  );\n};\n\nexport default Slider;\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { type Control, type FieldValues, useController } from 'react-hook-form';\n\nimport Slider from './Slider';\n\ninterface SliderRHFProps extends ComponentPropsWithoutRef<typeof Slider> {\n  control: Control<FieldValues, object>;\n  name: string;\n}\n\nconst SliderRHF = ({ control, name: nameProp, defaultValue, ...elemProps }: SliderRHFProps) => {\n  const {\n    field: { onChange, onBlur, name, value },\n  } = useController({\n    name: nameProp,\n    control,\n    rules: { required: true },\n    defaultValue,\n  });\n\n  return <Slider {...elemProps} onBlur={onBlur} onChange={onChange} value={value} name={name} />;\n};\n\nexport default SliderRHF;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/Slider/SliderThumb.tsx","../../../src/components/Slider/Slider.tsx","../../../src/components/Slider/SliderRHF.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  type ElementProps,\n  flip,\n  type FloatingContext,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useSliderThumb } from '@react-aria/slider';\nimport { mergeProps } from '@react-aria/utils';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport type { SliderState } from '@react-stately/slider';\nimport { debounce } from 'lodash-es';\nimport {\n  type OutputHTMLAttributes,\n  type RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\n\nimport { FloatingTooltip } from '#src/components/Tooltip';\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { focusStyle } from '#src/mixins/focus';\nimport { paragraphMixins } from '#src/mixins/text';\n\nconst Tooltip = styled(FloatingTooltip)`\n  ${paragraphMixins.sm};\n`;\n\nconst Thumb = styled('div')<{ disabled?: boolean }>`\n  /* Note this will break if the element is not on a white background. Variable is provided to be able to override. */\n  --background-color-behind-thumb: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.PrimaryWhite)};\n  box-sizing: border-box;\n  width: 16px;\n  height: 16px;\n  background: ${({ theme, disabled }) =>\n    disabled\n      ? semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled)\n      : semanticColor(theme, 'InputSurfaceInverseStatic', Color.BackgroundInputDefault)};\n  cursor: ${(props) => (props.disabled ? 'inherit' : 'pointer')};\n  border-radius: 50%;\n  border: 1px solid\n    ${({ theme, disabled }) =>\n      disabled\n        ? semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)\n        : semanticColor(theme, 'BorderDefault', Color.BorderInputDisabled)};\n  /* Enable clicks on thumb */\n  pointer-events: auto;\n\n  &[data-focused] {\n    ${focusStyle}\n    /* Extra pixel of size to overlap into the outline, fixing a small visual bug */\n    box-shadow: 0 0 0 2px var(--background-color-behind-thumb);\n  }\n`;\n\ninterface SliderThumbProps {\n  state: SliderState;\n  trackRef: RefObject<HTMLElement>;\n  index: number;\n  outputProps: OutputHTMLAttributes<HTMLOutputElement>;\n  hideTooltips?: boolean;\n}\n\ninterface UsePressedOptions {\n  delay?: number;\n}\n\nconst usePressed = (context: FloatingContext, options?: UsePressedOptions): ElementProps => {\n  const closeHandler = useMemo(\n    () => debounce(() => context.onOpenChange(false), options?.delay ?? 500),\n    [],\n  );\n  return {\n    reference: {\n      onPointerDown: () => {\n        context.onOpenChange(true);\n      },\n      onPointerUp: () => {\n        closeHandler();\n      },\n    },\n  };\n};\n\nconst SliderThumb = ({ state, trackRef, index, outputProps, hideTooltips }: SliderThumbProps) => {\n  const inputRef = useRef(null);\n  const { thumbProps, inputProps } = useSliderThumb(\n    {\n      index,\n      trackRef,\n      inputRef,\n    },\n    state,\n  );\n\n  const { focusProps, isFocused } = useFocusRing();\n\n  const [open, setOpen] = useState(false);\n\n  const { x, y, refs, strategy, context } = useFloating({\n    placement: 'top',\n    open,\n    onOpenChange: setOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [offset(4), flip(), shift({ padding: 4 })],\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useRole(context, { role: 'tooltip' }),\n    useDismiss(context),\n    usePressed(context),\n  ]);\n\n  useEffect(() => {\n    setOpen(isFocused);\n  }, [isFocused]);\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        top: '50%',\n        transform: 'translateX(-50%) translateY(-50%)',\n        left: `${state.getThumbPercent(index) * 100}%`,\n      }}\n    >\n      {open && !hideTooltips && (\n        <Tooltip\n          {...mergeProps(\n            getFloatingProps({\n              ref: refs.setFloating,\n              style: {\n                position: strategy,\n                top: y ?? '',\n                left: x ?? '',\n              },\n            }),\n            outputProps,\n          )}\n        >\n          {state.getThumbValueLabel(index)}\n        </Tooltip>\n      )}\n      <Thumb\n        {...mergeProps(\n          thumbProps,\n          getReferenceProps({\n            ref: refs.setReference,\n          }),\n          isFocused ? { 'data-focused': true } : undefined,\n        )}\n      >\n        <VisuallyHidden>\n          <input ref={inputRef} {...mergeProps(inputProps, focusProps)} />\n        </VisuallyHidden>\n      </Thumb>\n    </div>\n  );\n};\n\nexport default SliderThumb;\n","import type { NumberFormatOptions } from '@internationalized/number';\nimport { useNumberFormatter } from '@react-aria/i18n';\nimport { useSlider } from '@react-aria/slider';\nimport { useSliderState } from '@react-stately/slider';\nimport type { SliderProps as SliderPropsType } from '@react-types/slider';\nimport { type FocusEventHandler, type ReactNode, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\n\nimport SliderThumb from '#src/components/Slider/SliderThumb';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\nimport { paragraphMixins } from '#src/mixins/text';\n\nconst SliderContainer = styled.div`\n  display: flex;\n  align-items: center;\n  touch-action: none;\n  position: relative;\n`;\n\nconst SliderLabel = styled.div<{ $disabled?: boolean }>`\n  ${paragraphMixins.md};\n  ${({ $disabled }) =>\n    semanticOnly((tokens) => `color: ${$disabled ? tokens.FgDisabled : tokens.FgPrimary};`)}\n  &:first-of-type {\n    padding-right: ${Spacing[2]};\n  }\n\n  &:last-of-type {\n    padding-left: ${Spacing[2]};\n  }\n`;\n\ntype SliderTrackProps = {\n  track?: boolean;\n  percents: number[];\n  disabled?: boolean;\n};\nconst SliderTrack = styled.div<SliderTrackProps>`\n  position: relative;\n  width: 100%;\n  height: 4px;\n  border-radius: 4px;\n  outline: none;\n  transition: background 0.2s;\n\n  /* Disable clicks on slide bar */\n  pointer-events: none;\n\n  ${({ theme, percents, track, disabled }) => {\n    const activeColor = disabled\n      ? semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)\n      : semanticColor(theme, 'InputBorderAccent', Color.CoreBlue700);\n    const trackColor = semanticColor(theme, 'BorderSubtle', Color.BorderDivider);\n\n    if (track === false) {\n      return css`\n        background: ${trackColor};\n      `;\n    }\n\n    if (percents.length === 2) {\n      return css`\n        background: linear-gradient(\n          to right,\n          ${trackColor} 0%,\n          ${trackColor} ${percents[0] * 100}%,\n          ${activeColor} ${percents[0] * 100}%,\n          ${activeColor} ${percents[1] * 100}%,\n          ${trackColor} ${percents[1] * 100}%,\n          ${trackColor} 100%\n        );\n      `;\n    }\n\n    const leftColor = activeColor;\n    const rightColor = trackColor;\n\n    return css`\n      background: linear-gradient(\n        to right,\n        ${leftColor} 0%,\n        ${leftColor} ${percents[0] * 100}%,\n        ${rightColor} ${percents[0] * 100}%,\n        ${rightColor} 100%\n      );\n    `;\n  }}\n`;\n\nexport interface SliderProps<T = number | number[]> {\n  min?: number;\n  minLabel?: ReactNode;\n  max?: number;\n  maxLabel?: ReactNode;\n  onChange?: (value: T) => void;\n  value?: T;\n  defaultValue?: T;\n  step?: number;\n\n  /**\n   * Show labels on ends of track\n   */\n  showLabels?: boolean;\n\n  /**\n   * Track style\n   */\n  track?: boolean;\n\n  /**\n   * Hide tooltips on slider thumbs\n   */\n  hideTooltips?: boolean;\n  width?: number | 'auto';\n  disabled?: boolean;\n  formatOptions?: NumberFormatOptions;\n\n  id?: string;\n  className?: string;\n  name?: string;\n  onBlur?: FocusEventHandler<HTMLDivElement>;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n}\n\nexport const Slider = ({\n  minLabel,\n  maxLabel,\n  showLabels,\n  track,\n  width,\n  hideTooltips,\n  className,\n  id,\n  onBlur,\n  ...elemProps\n}: SliderProps) => {\n  const { min, max, value, defaultValue, disabled } = elemProps;\n  const trackRef = useRef(null);\n  const numberFormatter = useNumberFormatter(elemProps.formatOptions);\n\n  const ariaElemProps: SliderPropsType = {\n    ...elemProps,\n    isDisabled: disabled,\n    minValue: min,\n    maxValue: max,\n    value: typeof value === 'number' ? [value] : value,\n    defaultValue: typeof defaultValue === 'number' ? [defaultValue] : defaultValue,\n    onChange:\n      typeof elemProps.onChange !== 'undefined'\n        ? (v) => {\n            if (Array.isArray(v) && v.length === 1) {\n              /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n              return elemProps.onChange(v[0]);\n            }\n\n            /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n            return elemProps.onChange(v);\n          }\n        : undefined,\n  };\n\n  const state = useSliderState({ ...ariaElemProps, numberFormatter });\n  const { groupProps, trackProps, outputProps } = useSlider(ariaElemProps, state, trackRef);\n\n  return (\n    <SliderContainer\n      {...groupProps}\n      style={{\n        position: 'relative',\n        alignItems: 'center',\n        width: width ?? 300,\n        touchAction: 'none',\n      }}\n      className={className}\n      id={id}\n      onBlur={onBlur}\n    >\n      {showLabels && <SliderLabel $disabled={disabled}>{minLabel ?? min}</SliderLabel>}\n      <SliderTrack\n        {...trackProps}\n        track={track}\n        ref={trackRef}\n        percents={state.values.map((_v, i) => state.getThumbPercent(i))}\n        disabled={disabled}\n      >\n        {state.values.map((_v, i) => (\n          <SliderThumb\n            key={`${trackProps.id}_thumb${i}`}\n            index={i}\n            state={state}\n            trackRef={trackRef}\n            hideTooltips={hideTooltips}\n            outputProps={outputProps}\n          />\n        ))}\n      </SliderTrack>\n      {showLabels && <SliderLabel $disabled={disabled}>{maxLabel ?? max}</SliderLabel>}\n    </SliderContainer>\n  );\n};\n\nexport default Slider;\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { type Control, type FieldValues, useController } from 'react-hook-form';\n\nimport Slider from './Slider';\n\ninterface SliderRHFProps extends ComponentPropsWithoutRef<typeof Slider> {\n  control: Control<FieldValues, object>;\n  name: string;\n}\n\nconst SliderRHF = ({ control, name: nameProp, defaultValue, ...elemProps }: SliderRHFProps) => {\n  const {\n    field: { onChange, onBlur, name, value },\n  } = useController({\n    name: nameProp,\n    control,\n    rules: { required: true },\n    defaultValue,\n  });\n\n  return <Slider {...elemProps} onBlur={onBlur} onChange={onChange} value={value} name={name} />;\n};\n\nexport default SliderRHF;\n"],"mappings":"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"}

package/dist/components/SmartTextInput/PillType.d.mts

@@ -1,6 +1,6 @@
 import * as _$styled_components0 from "styled-components";
 
-//#region components/SmartTextInput/PillType.d.ts
+//#region src/components/SmartTextInput/PillType.d.ts
 declare const PillType: _$styled_components0.StyledComponent<"div", any, {
   purple?: boolean;
   error?: boolean;

package/dist/components/SmartTextInput/PillType.mjs

@@ -1,6 +1,6 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
-//#region components/SmartTextInput/PillType.tsx
+//#region src/components/SmartTextInput/PillType.tsx
 const PillType = styled.div`
   padding: 0 ${Spacing[1]};
   height: 16px;

package/dist/components/SmartTextInput/PillType.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PillType.mjs","names":[],"sources":["../../../components/SmartTextInput/PillType.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing, Typography } from '@persona/design-tokens';\n\nconst PillType = styled.div<{ purple?: boolean; error?: boolean }>`\n  padding: 0 ${Spacing[1]};\n  height: 16px;\n  ${Typography.TextExtraSmall};\n  font-family: ${({ theme }) => theme.text.fontFamily.mono};\n  background: ${Color.CoreSlate100};\n  color: ${({ theme }) => theme.color.text.primary};\n  border: 1px solid ${Color.CoreSlate300};\n  border-radius: ${BorderRadius.Md};\n  white-space: nowrap;\n\n  ${({ purple }) => {\n    if (purple) {\n      return css`\n        background: ${Color.CorePurple100};\n        border-color: ${Color.CorePurple300};\n      `;\n    }\n  }}\n\n  ${({ error }) => {\n    if (error) {\n      return css`\n        color: ${Color.TextDanger};\n      `;\n    }\n  }}\n`;\n\nexport default PillType;\n"],"mappings":";;;AAIA,MAAM,WAAW,OAAO,GAA0C;eACnD,QAAQ,GAAG;;IAEtB,WAAW,eAAe;kBACZ,EAAE,YAAY,MAAM,KAAK,WAAW,KAAK;gBAC3C,MAAM,aAAa;YACvB,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;sBAC7B,MAAM,aAAa;mBACtB,aAAa,GAAG;;;KAG9B,EAAE,aAAa;AAChB,KAAI,OACF,QAAO,GAAG;sBACM,MAAM,cAAc;wBAClB,MAAM,cAAc;;EAGxC;;KAEC,EAAE,YAAY;AACf,KAAI,MACF,QAAO,GAAG;iBACC,MAAM,WAAW;;EAG9B"}
+{"version":3,"file":"PillType.mjs","names":[],"sources":["../../../src/components/SmartTextInput/PillType.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing, Typography } from '@persona/design-tokens';\n\nconst PillType = styled.div<{ purple?: boolean; error?: boolean }>`\n  padding: 0 ${Spacing[1]};\n  height: 16px;\n  ${Typography.TextExtraSmall};\n  font-family: ${({ theme }) => theme.text.fontFamily.mono};\n  background: ${Color.CoreSlate100};\n  color: ${({ theme }) => theme.color.text.primary};\n  border: 1px solid ${Color.CoreSlate300};\n  border-radius: ${BorderRadius.Md};\n  white-space: nowrap;\n\n  ${({ purple }) => {\n    if (purple) {\n      return css`\n        background: ${Color.CorePurple100};\n        border-color: ${Color.CorePurple300};\n      `;\n    }\n  }}\n\n  ${({ error }) => {\n    if (error) {\n      return css`\n        color: ${Color.TextDanger};\n      `;\n    }\n  }}\n`;\n\nexport default PillType;\n"],"mappings":";;;AAIA,MAAM,WAAW,OAAO,GAA0C;eACnD,QAAQ,GAAG;;IAEtB,WAAW,eAAe;kBACZ,EAAE,YAAY,MAAM,KAAK,WAAW,KAAK;gBAC3C,MAAM,aAAa;YACvB,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;sBAC7B,MAAM,aAAa;mBACtB,aAAa,GAAG;;;KAG9B,EAAE,aAAa;AAChB,KAAI,OACF,QAAO,GAAG;sBACM,MAAM,cAAc;wBAClB,MAAM,cAAc;;EAGxC;;KAEC,EAAE,YAAY;AACf,KAAI,MACF,QAAO,GAAG;iBACC,MAAM,WAAW;;EAG9B"}