@clubmed/trident-ui 2.0.0-beta.64 → 2.0.0-beta.65

package/ui/ChatWindowCsatPrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatWindowCsatPrompt.js","names":[],"sources":["../../lib/ui/ChatWindowCsatPrompt.tsx"],"sourcesContent":["'use client';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\nimport { twMerge } from './helpers/twMerge';\n\nexport interface ChatWindowCsatPromptLabels {\n  intro: string;\n  question: string;\n  questionNote: string;\n  groupAriaLabel: string;\n  starLabels: [string, string, string, string, string];\n}\n\nexport interface ChatWindowCsatPromptProps {\n  onRate: (rating: number) => void;\n  labels: ChatWindowCsatPromptLabels;\n  renderRatingLabel: (rating: number) => ReactNode;\n  className?: string;\n}\n\nexport function ChatWindowCsatPrompt({\n  onRate,\n  labels,\n  renderRatingLabel,\n  className,\n}: ChatWindowCsatPromptProps) {\n  const [hovered, setHovered] = useState(0);\n  const [selected, setSelected] = useState(0);\n\n  function handleSelect(rating: number) {\n    if (selected > 0) return;\n    setSelected(rating);\n    onRate(rating);\n  }\n\n  const activeRating = hovered || selected;\n  const isLocked = selected > 0;\n\n  return (\n    <div className={twMerge('flex flex-col gap-20 px-20', className)}>\n      <div className=\"flex flex-col gap-4\">\n        <p className=\"text-b3 text-black\">{labels.intro}</p>\n        <p className=\"text-b3 text-black\">\n          {labels.question} <span className=\"text-b4 text-black\">{labels.questionNote}</span>\n        </p>\n      </div>\n\n      <div role=\"group\" aria-label={labels.groupAriaLabel} className=\"flex items-center gap-0\">\n        {labels.starLabels.map((label, i) => {\n          const rating = i + 1;\n          const isFilled = rating <= activeRating;\n          return (\n            <button\n              key={rating}\n              type=\"button\"\n              aria-label={`${rating} star${rating > 1 ? 's' : ''} — ${label}`}\n              aria-pressed={selected === rating}\n              aria-disabled={isLocked}\n              onClick={() => handleSelect(rating)}\n              onMouseEnter={() => {\n                if (!isLocked) setHovered(rating);\n              }}\n              onMouseLeave={() => {\n                if (!isLocked) setHovered(0);\n              }}\n              className={twMerge(\n                'flex items-center justify-center size-48 rounded-full transition-colors',\n                isLocked ? 'cursor-default' : 'hover:bg-lightSand',\n              )}\n            >\n              <Icon\n                name={isFilled ? 'StarFilled' : 'StarOutlined'}\n                width=\"24px\"\n                className=\"text-black\"\n              />\n            </button>\n          );\n        })}\n      </div>\n\n      {activeRating > 0 && (\n        <p className=\"text-b4 text-darkGrey\" aria-live=\"polite\">\n          {renderRatingLabel(activeRating)}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAsBA,SAAgB,EAAqB,EACnC,WACA,WACA,sBACA,gBAC4B;CAC5B,IAAM,CAAC,GAAS,KAAc,EAAS,EAAE,EACnC,CAAC,GAAU,KAAe,EAAS,EAAE;CAE3C,SAAS,EAAa,GAAgB;AAChC,MAAW,MACf,EAAY,EAAO,EACnB,EAAO,EAAO;;CAGhB,IAAM,IAAe,KAAW,GAC1B,IAAW,IAAW;AAE5B,QACE,kBAAC,OAAD;EAAK,WAAW,EAAQ,8BAA8B,EAAU;YAAhE;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,KAAD;KAAG,WAAU;eAAsB,EAAO;KAAU,CAAA,EACpD,kBAAC,KAAD;KAAG,WAAU;eAAb;MACG,EAAO;MAAS;MAAC,kBAAC,QAAD;OAAM,WAAU;iBAAsB,EAAO;OAAoB,CAAA;;;;GAIvF,kBAAC,OAAD;IAAK,MAAK;IAAQ,cAAY,EAAO;IAAgB,WAAU;cAC5D,EAAO,WAAW,KAAK,GAAO,MAAM;KACnC,IAAM,IAAS,IAAI,GACb,IAAW,KAAU;AAC3B,YACE,kBAAC,UAAD;MAEE,MAAK;MACL,cAAY,GAAG,EAAO,OAAO,IAAS,IAAI,MAAM,GAAG,KAAK;MACxD,gBAAc,MAAa;MAC3B,iBAAe;MACf,eAAe,EAAa,EAAO;MACnC,oBAAoB;AAClB,OAAK,KAAU,EAAW,EAAO;;MAEnC,oBAAoB;AAClB,OAAK,KAAU,EAAW,EAAE;;MAE9B,WAAW,EACT,2EACA,IAAW,mBAAmB,qBAC/B;gBAED,kBAAC,GAAD;OACE,MAAM,IAAW,eAAe;OAChC,OAAM;OACN,WAAU;OACV,CAAA;MACK,EAtBF,EAsBE;;IAGT,CAAA;GAEL,IAAe,KACd,kBAAC,KAAD;IAAG,WAAU;IAAwB,aAAU;cAC5C,EAAkB,EAAA;IACjB,CAAA"}
+{"version":3,"file":"ChatWindowCsatPrompt.js","names":[],"sources":["../../lib/ui/ChatWindowCsatPrompt.tsx"],"sourcesContent":["'use client';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\nimport { twMerge } from './helpers/twMerge';\n\nexport interface ChatWindowCsatPromptLabels {\n  intro: string;\n  question: string;\n  questionNote: string;\n  groupAriaLabel: string;\n  starLabels: [string, string, string, string, string];\n}\n\nexport interface ChatWindowCsatPromptProps {\n  onRate: (rating: number) => void;\n  labels: ChatWindowCsatPromptLabels;\n  renderRatingLabel: (rating: number) => ReactNode;\n  className?: string;\n}\n\nexport function ChatWindowCsatPrompt({\n  onRate,\n  labels,\n  renderRatingLabel,\n  className,\n}: ChatWindowCsatPromptProps) {\n  const [hovered, setHovered] = useState(0);\n  const [selected, setSelected] = useState(0);\n\n  function handleSelect(rating: number) {\n    if (selected > 0) return;\n    setSelected(rating);\n    onRate(rating);\n  }\n\n  const activeRating = hovered || selected;\n  const isLocked = selected > 0;\n\n  return (\n    <div className={twMerge('flex flex-col gap-20 px-20', className)}>\n      <div className=\"flex flex-col gap-4\">\n        <p className=\"text-b3 text-black\">{labels.intro}</p>\n        <p className=\"text-b3 text-black\">\n          {labels.question} <span className=\"text-b4 text-black\">{labels.questionNote}</span>\n        </p>\n      </div>\n\n      <div role=\"group\" aria-label={labels.groupAriaLabel} className=\"flex items-center gap-0\">\n        {labels.starLabels.map((label, i) => {\n          const rating = i + 1;\n          const isFilled = rating <= activeRating;\n          return (\n            <button\n              key={rating}\n              type=\"button\"\n              aria-label={`${rating} star${rating > 1 ? 's' : ''} — ${label}`}\n              aria-pressed={selected === rating}\n              aria-disabled={isLocked}\n              onClick={() => handleSelect(rating)}\n              onMouseEnter={() => {\n                if (!isLocked) setHovered(rating);\n              }}\n              onMouseLeave={() => {\n                if (!isLocked) setHovered(0);\n              }}\n              className={twMerge(\n                'flex items-center justify-center size-48 rounded-full transition-colors outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n                isLocked ? 'cursor-default' : 'hover:bg-lightSand',\n              )}\n            >\n              <Icon\n                name={isFilled ? 'StarFilled' : 'StarOutlined'}\n                width=\"24px\"\n                className=\"text-black\"\n              />\n            </button>\n          );\n        })}\n      </div>\n\n      {activeRating > 0 && (\n        <p className=\"text-b4 text-darkGrey\" aria-live=\"polite\">\n          {renderRatingLabel(activeRating)}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAsBA,SAAgB,EAAqB,EACnC,WACA,WACA,sBACA,gBAC4B;CAC5B,IAAM,CAAC,GAAS,KAAc,EAAS,EAAE,EACnC,CAAC,GAAU,KAAe,EAAS,EAAE;CAE3C,SAAS,EAAa,GAAgB;AAChC,MAAW,MACf,EAAY,EAAO,EACnB,EAAO,EAAO;;CAGhB,IAAM,IAAe,KAAW,GAC1B,IAAW,IAAW;AAE5B,QACE,kBAAC,OAAD;EAAK,WAAW,EAAQ,8BAA8B,EAAU;YAAhE;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,KAAD;KAAG,WAAU;eAAsB,EAAO;KAAU,CAAA,EACpD,kBAAC,KAAD;KAAG,WAAU;eAAb;MACG,EAAO;MAAS;MAAC,kBAAC,QAAD;OAAM,WAAU;iBAAsB,EAAO;OAAoB,CAAA;;;;GAIvF,kBAAC,OAAD;IAAK,MAAK;IAAQ,cAAY,EAAO;IAAgB,WAAU;cAC5D,EAAO,WAAW,KAAK,GAAO,MAAM;KACnC,IAAM,IAAS,IAAI,GACb,IAAW,KAAU;AAC3B,YACE,kBAAC,UAAD;MAEE,MAAK;MACL,cAAY,GAAG,EAAO,OAAO,IAAS,IAAI,MAAM,GAAG,KAAK;MACxD,gBAAc,MAAa;MAC3B,iBAAe;MACf,eAAe,EAAa,EAAO;MACnC,oBAAoB;AAClB,OAAK,KAAU,EAAW,EAAO;;MAEnC,oBAAoB;AAClB,OAAK,KAAU,EAAW,EAAE;;MAE9B,WAAW,EACT,kKACA,IAAW,mBAAmB,qBAC/B;gBAED,kBAAC,GAAD;OACE,MAAM,IAAW,eAAe;OAChC,OAAM;OACN,WAAU;OACV,CAAA;MACK,EAtBF,EAsBE;;IAGT,CAAA;GAEL,IAAe,KACd,kBAAC,KAAD;IAAG,WAAU;IAAwB,aAAU;cAC5C,EAAkB,EAAA;IACjB,CAAA"}

package/ui/ChoiceExpander.js

@@ -60,7 +60,7 @@ var d = ({ label: d, showCheckIcon: f = !1, children: p, expanded: m, defaultExp
 				"aria-label": v || d,
 				disabled: _,
 				onClick: N,
-				className: e("flex items-center justify-center w-240 mx-auto relative gap-20 transition-opacity duration-200", "rounded-pill focus-visible:ring focus-visible:ring-8 focus-visible:ring-lavender/20 outline-none px-20 py-12 ", _ ? "opacity-50 cursor-not-allowed" : "cursor-pointer", "[@supports(anchor-name:_--label-anchor)]:[--anchorSupport:1]"),
+				className: e("flex items-center justify-center w-240 mx-auto relative gap-20 transition-opacity duration-200", "rounded-pill focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 outline-none px-20 py-12 ", _ ? "opacity-50 cursor-not-allowed" : "cursor-pointer", "[@supports(anchor-name:_--label-anchor)]:[--anchorSupport:1]"),
 				children: [
 					/* @__PURE__ */ l("div", {
 						"aria-hidden": "true",

package/ui/ChoiceExpander.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceExpander.js","names":[],"sources":["../../lib/ui/ChoiceExpander.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport { getBgColor, getTextColor } from './helpers/colors/colors';\nimport type { Colors } from './types/Colors';\n\nexport interface ChoiceExpanderProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Text shown when collapsed (e.g., \"From $255\")\n   */\n  label: string;\n\n  /**\n   * Show check icon in collapsed state (selected variant)\n   */\n  showCheckIcon?: boolean;\n\n  /**\n   * Content shown when expanded\n   */\n  children: ReactNode;\n\n  /**\n   * Controlled state - if provided, component is controlled\n   */\n  expanded?: boolean;\n\n  /**\n   * Initial state for uncontrolled mode\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Callback when expanded state changes\n   */\n  onExpandedChange?: (isExpanded: boolean) => void;\n\n  /**\n   * Disable interaction\n   */\n  disabled?: boolean;\n\n  /**\n   * Custom aria-label for button\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background color for unexpanded button state\n   */\n  buttonBgColor?: Colors;\n\n  /**\n   * Text color for unexpanded button state\n   */\n  buttonTextColor?: Colors;\n\n  /**\n   * collapse label for screen readers\n   */\n  collapseLabel: string;\n\n  /**\n   * expand label for screen readers\n   */\n  expandLabel: string;\n}\n\nexport const ChoiceExpander: FunctionComponent<ChoiceExpanderProps> = ({\n  label,\n  showCheckIcon = false,\n  children,\n  expanded,\n  defaultExpanded = false,\n  onExpandedChange,\n  disabled = false,\n  ariaLabel,\n  buttonBgColor = 'black',\n  buttonTextColor = 'white',\n  collapseLabel,\n  expandLabel,\n  className,\n  ...props\n}) => {\n  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n  const contentId = useId();\n  const morphContainerRef = useRef<HTMLDivElement>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const hasInteractedRef = useRef(false);\n\n  const isExpanded = expanded !== undefined ? expanded : internalExpanded;\n\n  const handleToggle = useCallback(() => {\n    if (disabled) return;\n\n    hasInteractedRef.current = true;\n    const newState = !isExpanded;\n\n    if (expanded === undefined) {\n      setInternalExpanded(newState);\n    }\n\n    onExpandedChange?.(newState);\n  }, [disabled, isExpanded, expanded, onExpandedChange]);\n\n  useEffect(() => {\n    if (!isExpanded) return;\n\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        handleToggle();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [isExpanded, handleToggle]);\n\n  useEffect(() => {\n    if (isExpanded && closeButtonRef.current) {\n      closeButtonRef.current.focus();\n    } else if (!isExpanded && hasInteractedRef.current && triggerButtonRef.current) {\n      triggerButtonRef.current.focus();\n    }\n  }, [isExpanded]);\n\n  useEffect(() => {\n    if (!isExpanded) return;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      if (morphContainerRef.current && !morphContainerRef.current.contains(event.target as Node)) {\n        handleToggle();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [isExpanded, handleToggle]);\n\n  return (\n    <div\n      className={clsx('relative flex items-center justify-center', className)}\n      data-name=\"ChoiceExpander\"\n      data-testid=\"choice-expander\"\n      style={{ width: '240px', height: 48 }}\n      {...props}\n    >\n      <div\n        ref={morphContainerRef}\n        className={clsx(\n          'absolute top-0 grid transition-all duration-500',\n          !isExpanded && [\n            'w-240 rounded-pill-transitionable border-transparent',\n            getBgColor(buttonBgColor),\n            getTextColor(buttonTextColor),\n          ],\n          isExpanded && [\n            'w-324 rounded-16 bg-white text-black border border-gray-900',\n            'z-10',\n            disabled && 'opacity-50',\n          ],\n        )}\n      >\n        <button\n          ref={triggerButtonRef}\n          type=\"button\"\n          data-testid=\"choice-expander-button\"\n          aria-expanded={isExpanded}\n          aria-controls={contentId}\n          aria-label={ariaLabel || label}\n          disabled={disabled}\n          onClick={handleToggle}\n          className={clsx(\n            'flex items-center justify-center w-240 mx-auto relative gap-20 transition-opacity duration-200',\n            'rounded-pill focus-visible:ring focus-visible:ring-8 focus-visible:ring-lavender/20 outline-none px-20 py-12 ',\n            disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',\n            '[@supports(anchor-name:_--label-anchor)]:[--anchorSupport:1]',\n          )}\n        >\n          {/* invisible top middle anchor position */}\n          <div\n            aria-hidden=\"true\"\n            className=\"absolute h-24 w-24 mx-auto pointer-events-none\"\n            style={{ anchorName: '--middle-anchor' } as React.CSSProperties}\n          ></div>\n          <span className=\"text-b3 flex items-center font-semibold\">\n            {/* label anchor */}\n            <span\n              className={clsx('transition-opacity duration-200 pe-8', isExpanded && 'opacity-0')}\n            >\n              {label}\n            </span>\n            <div\n              className=\"h-24 w-24\"\n              style={{ anchorName: '--label-anchor' } as React.CSSProperties}\n              aria-hidden=\"true\"\n            >\n              <Icon\n                name=\"ArrowDefaultDown\"\n                width=\"24px\"\n                aria-hidden=\"true\"\n                className={clsx(\n                  isExpanded ? 'absolute left-[calc(50%-12px)] rotate-180' : 'rotate-[0deg]',\n                )}\n                style={\n                  {\n                    transition: 'rotate 0.3s, left 0.3s',\n                    opacity: 'calc((1 - var(--anchorSupport)) * 1)',\n                  } as React.CSSProperties\n                }\n              />\n            </div>\n            <span className=\"sr-only\">{isExpanded ? collapseLabel : expandLabel}</span>\n          </span>\n          <Icon\n            name=\"ArrowDefaultDown\"\n            width=\"24px\"\n            aria-hidden=\"true\"\n            className={clsx('absolute', isExpanded ? 'rotate-180' : 'rotate-[0deg]')}\n            style={\n              {\n                positionAnchor: isExpanded ? '--middle-anchor' : '--label-anchor',\n                left: 'anchor(left)',\n                top: 'anchor(top)',\n                transition: 'left 0.3s, rotate 0.3s',\n              } as React.CSSProperties\n            }\n          />\n          {showCheckIcon && (\n            <Icon\n              name=\"CheckDefault\"\n              width=\"24px\"\n              aria-hidden=\"true\"\n              className={clsx('transition-opacity duration-200', isExpanded && 'opacity-0')}\n            />\n          )}\n        </button>\n\n        <div\n          className={clsx(\n            'grid overflow-hidden transition-[grid-template-rows,opacity] duration-500',\n            isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr] opacity-0',\n          )}\n        >\n          <div className=\"overflow-hidden\">\n            <div className=\"px-8 pb-8\" id={contentId}>\n              {children}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ChoiceExpander.js","names":[],"sources":["../../lib/ui/ChoiceExpander.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport { getBgColor, getTextColor } from './helpers/colors/colors';\nimport type { Colors } from './types/Colors';\n\nexport interface ChoiceExpanderProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Text shown when collapsed (e.g., \"From $255\")\n   */\n  label: string;\n\n  /**\n   * Show check icon in collapsed state (selected variant)\n   */\n  showCheckIcon?: boolean;\n\n  /**\n   * Content shown when expanded\n   */\n  children: ReactNode;\n\n  /**\n   * Controlled state - if provided, component is controlled\n   */\n  expanded?: boolean;\n\n  /**\n   * Initial state for uncontrolled mode\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Callback when expanded state changes\n   */\n  onExpandedChange?: (isExpanded: boolean) => void;\n\n  /**\n   * Disable interaction\n   */\n  disabled?: boolean;\n\n  /**\n   * Custom aria-label for button\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background color for unexpanded button state\n   */\n  buttonBgColor?: Colors;\n\n  /**\n   * Text color for unexpanded button state\n   */\n  buttonTextColor?: Colors;\n\n  /**\n   * collapse label for screen readers\n   */\n  collapseLabel: string;\n\n  /**\n   * expand label for screen readers\n   */\n  expandLabel: string;\n}\n\nexport const ChoiceExpander: FunctionComponent<ChoiceExpanderProps> = ({\n  label,\n  showCheckIcon = false,\n  children,\n  expanded,\n  defaultExpanded = false,\n  onExpandedChange,\n  disabled = false,\n  ariaLabel,\n  buttonBgColor = 'black',\n  buttonTextColor = 'white',\n  collapseLabel,\n  expandLabel,\n  className,\n  ...props\n}) => {\n  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n  const contentId = useId();\n  const morphContainerRef = useRef<HTMLDivElement>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const hasInteractedRef = useRef(false);\n\n  const isExpanded = expanded !== undefined ? expanded : internalExpanded;\n\n  const handleToggle = useCallback(() => {\n    if (disabled) return;\n\n    hasInteractedRef.current = true;\n    const newState = !isExpanded;\n\n    if (expanded === undefined) {\n      setInternalExpanded(newState);\n    }\n\n    onExpandedChange?.(newState);\n  }, [disabled, isExpanded, expanded, onExpandedChange]);\n\n  useEffect(() => {\n    if (!isExpanded) return;\n\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        handleToggle();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [isExpanded, handleToggle]);\n\n  useEffect(() => {\n    if (isExpanded && closeButtonRef.current) {\n      closeButtonRef.current.focus();\n    } else if (!isExpanded && hasInteractedRef.current && triggerButtonRef.current) {\n      triggerButtonRef.current.focus();\n    }\n  }, [isExpanded]);\n\n  useEffect(() => {\n    if (!isExpanded) return;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      if (morphContainerRef.current && !morphContainerRef.current.contains(event.target as Node)) {\n        handleToggle();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [isExpanded, handleToggle]);\n\n  return (\n    <div\n      className={clsx('relative flex items-center justify-center', className)}\n      data-name=\"ChoiceExpander\"\n      data-testid=\"choice-expander\"\n      style={{ width: '240px', height: 48 }}\n      {...props}\n    >\n      <div\n        ref={morphContainerRef}\n        className={clsx(\n          'absolute top-0 grid transition-all duration-500',\n          !isExpanded && [\n            'w-240 rounded-pill-transitionable border-transparent',\n            getBgColor(buttonBgColor),\n            getTextColor(buttonTextColor),\n          ],\n          isExpanded && [\n            'w-324 rounded-16 bg-white text-black border border-gray-900',\n            'z-10',\n            disabled && 'opacity-50',\n          ],\n        )}\n      >\n        <button\n          ref={triggerButtonRef}\n          type=\"button\"\n          data-testid=\"choice-expander-button\"\n          aria-expanded={isExpanded}\n          aria-controls={contentId}\n          aria-label={ariaLabel || label}\n          disabled={disabled}\n          onClick={handleToggle}\n          className={clsx(\n            'flex items-center justify-center w-240 mx-auto relative gap-20 transition-opacity duration-200',\n            'rounded-pill focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 outline-none px-20 py-12 ',\n            disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',\n            '[@supports(anchor-name:_--label-anchor)]:[--anchorSupport:1]',\n          )}\n        >\n          {/* invisible top middle anchor position */}\n          <div\n            aria-hidden=\"true\"\n            className=\"absolute h-24 w-24 mx-auto pointer-events-none\"\n            style={{ anchorName: '--middle-anchor' } as React.CSSProperties}\n          ></div>\n          <span className=\"text-b3 flex items-center font-semibold\">\n            {/* label anchor */}\n            <span\n              className={clsx('transition-opacity duration-200 pe-8', isExpanded && 'opacity-0')}\n            >\n              {label}\n            </span>\n            <div\n              className=\"h-24 w-24\"\n              style={{ anchorName: '--label-anchor' } as React.CSSProperties}\n              aria-hidden=\"true\"\n            >\n              <Icon\n                name=\"ArrowDefaultDown\"\n                width=\"24px\"\n                aria-hidden=\"true\"\n                className={clsx(\n                  isExpanded ? 'absolute left-[calc(50%-12px)] rotate-180' : 'rotate-[0deg]',\n                )}\n                style={\n                  {\n                    transition: 'rotate 0.3s, left 0.3s',\n                    opacity: 'calc((1 - var(--anchorSupport)) * 1)',\n                  } as React.CSSProperties\n                }\n              />\n            </div>\n            <span className=\"sr-only\">{isExpanded ? collapseLabel : expandLabel}</span>\n          </span>\n          <Icon\n            name=\"ArrowDefaultDown\"\n            width=\"24px\"\n            aria-hidden=\"true\"\n            className={clsx('absolute', isExpanded ? 'rotate-180' : 'rotate-[0deg]')}\n            style={\n              {\n                positionAnchor: isExpanded ? '--middle-anchor' : '--label-anchor',\n                left: 'anchor(left)',\n                top: 'anchor(top)',\n                transition: 'left 0.3s, rotate 0.3s',\n              } as React.CSSProperties\n            }\n          />\n          {showCheckIcon && (\n            <Icon\n              name=\"CheckDefault\"\n              width=\"24px\"\n              aria-hidden=\"true\"\n              className={clsx('transition-opacity duration-200', isExpanded && 'opacity-0')}\n            />\n          )}\n        </button>\n\n        <div\n          className={clsx(\n            'grid overflow-hidden transition-[grid-template-rows,opacity] duration-500',\n            isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr] opacity-0',\n          )}\n        >\n          <div className=\"overflow-hidden\">\n            <div className=\"px-8 pb-8\" id={contentId}>\n              {children}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/ui/ExpandableText.js

@@ -28,7 +28,7 @@ var u = ({ buttonClassName: u, children: d, className: f, id: p, labels: m, line
 	}), w && /* @__PURE__ */ c("button", {
 		"aria-controls": p,
 		"aria-expanded": x,
-		className: e("self-start border-b border-current font-semibold text-inherit transition-colors", u),
+		className: e("self-start border-b border-current font-semibold text-inherit transition-colors outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", u),
 		onClick: () => S(!x),
 		type: "button",
 		children: x ? m.reduce : m.expand

package/ui/ExpandableText.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableText.js","names":[],"sources":["../../lib/ui/ExpandableText.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { CSSProperties, PropsWithChildren } from 'react';\nimport { useCallback, useLayoutEffect, useRef, useState } from 'react';\n\nimport { useIsClient } from './hooks/useIsClient';\nimport { useResizeObserver } from './hooks/useResizeObserver';\n\nexport interface ExpandableTextLabels {\n  expand: string;\n  reduce: string;\n}\n\nexport interface ExpandableTextProps {\n  buttonClassName?: string;\n  className?: string;\n  id: string;\n  labels: ExpandableTextLabels;\n  /** Tailwind line-clamp class to use when collapsed, e.g. \"line-clamp-3\" */\n  lineClamps?: string;\n}\n\nexport const ExpandableText = ({\n  buttonClassName,\n  children,\n  className,\n  id,\n  labels,\n  lineClamps = 'line-clamp-3',\n}: PropsWithChildren<ExpandableTextProps>) => {\n  const ref = useRef<HTMLDivElement>(null!);\n  const [min, setMin] = useState(0);\n  const [max, setMax] = useState(0);\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const isClient = useIsClient();\n\n  const onResize = useCallback(() => {\n    setMax(ref.current.scrollHeight);\n    setMin((currentMin) => {\n      if (currentMin === 0) {\n        return ref.current.offsetHeight;\n      }\n      return currentMin;\n    });\n  }, []);\n\n  useResizeObserver<HTMLDivElement>({\n    ref,\n    onResize,\n  });\n\n  useLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n    setMin(ref.current.offsetHeight);\n    setMax(ref.current.scrollHeight);\n  }, []);\n\n  if (!children) {\n    return null;\n  }\n\n  const withToggleButton = max > min || isExpanded;\n  const style = { '--height': `${isExpanded ? max : min}px` } as CSSProperties;\n\n  return (\n    <>\n      <div\n        className={clsx(className, 'overflow-clip transition-all duration-500', {\n          'h-(--height)': isClient,\n        })}\n        style={style}\n      >\n        <div className={clsx({ [lineClamps]: !isExpanded })} id={id} ref={ref}>\n          {children}\n        </div>\n      </div>\n      {withToggleButton && (\n        <button\n          aria-controls={id}\n          aria-expanded={isExpanded}\n          className={clsx(\n            'self-start border-b border-current font-semibold text-inherit transition-colors',\n            buttonClassName,\n          )}\n          onClick={() => setIsExpanded(!isExpanded)}\n          type=\"button\"\n        >\n          {isExpanded ? labels.reduce : labels.expand}\n        </button>\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;;;;AAsBA,IAAa,KAAkB,EAC7B,oBACA,aACA,cACA,OACA,WACA,gBAAa,qBAC+B;CAC5C,IAAM,IAAM,EAAuB,KAAM,EACnC,CAAC,GAAK,KAAU,EAAS,EAAE,EAC3B,CAAC,GAAK,KAAU,EAAS,EAAE,EAC3B,CAAC,GAAY,KAAiB,EAAS,GAAM,EAE7C,IAAW,GAAa;AAyB9B,KAbA,EAAkC;EAChC;EACA,UAZe,QAAkB;AAEjC,GADA,EAAO,EAAI,QAAQ,aAAa,EAChC,GAAQ,MACF,MAAe,IACV,EAAI,QAAQ,eAEd,EACP;KACD,EAAE,CAAA;EAKJ,CAAC,EAEF,QAAsB;AACf,IAAI,YAGT,EAAO,EAAI,QAAQ,aAAa,EAChC,EAAO,EAAI,QAAQ,aAAa;IAC/B,EAAE,CAAC,EAEF,CAAC,EACH,QAAO;CAGT,IAAM,IAAmB,IAAM,KAAO,GAChC,IAAQ,EAAE,YAAY,GAAG,IAAa,IAAM,EAAI,KAAK;AAE3D,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;EACE,WAAW,EAAK,GAAW,6CAA6C,EACtE,gBAAgB,GACjB,CAAC;EACK;YAEP,kBAAC,OAAD;GAAK,WAAW,EAAK,GAAG,IAAa,CAAC,GAAY,CAAC;GAAM;GAAS;GAC/D;GACG,CAAA;EACF,CAAA,EACL,KACC,kBAAC,UAAD;EACE,iBAAe;EACf,iBAAe;EACf,WAAW,EACT,mFACA,EACD;EACD,eAAe,EAAc,CAAC,EAAW;EACzC,MAAK;YAEJ,IAAa,EAAO,SAAS,EAAO;EAC9B,CAAA,CAEV,EAAA,CAAA"}
+{"version":3,"file":"ExpandableText.js","names":[],"sources":["../../lib/ui/ExpandableText.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { CSSProperties, PropsWithChildren } from 'react';\nimport { useCallback, useLayoutEffect, useRef, useState } from 'react';\n\nimport { useIsClient } from './hooks/useIsClient';\nimport { useResizeObserver } from './hooks/useResizeObserver';\n\nexport interface ExpandableTextLabels {\n  expand: string;\n  reduce: string;\n}\n\nexport interface ExpandableTextProps {\n  buttonClassName?: string;\n  className?: string;\n  id: string;\n  labels: ExpandableTextLabels;\n  /** Tailwind line-clamp class to use when collapsed, e.g. \"line-clamp-3\" */\n  lineClamps?: string;\n}\n\nexport const ExpandableText = ({\n  buttonClassName,\n  children,\n  className,\n  id,\n  labels,\n  lineClamps = 'line-clamp-3',\n}: PropsWithChildren<ExpandableTextProps>) => {\n  const ref = useRef<HTMLDivElement>(null!);\n  const [min, setMin] = useState(0);\n  const [max, setMax] = useState(0);\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const isClient = useIsClient();\n\n  const onResize = useCallback(() => {\n    setMax(ref.current.scrollHeight);\n    setMin((currentMin) => {\n      if (currentMin === 0) {\n        return ref.current.offsetHeight;\n      }\n      return currentMin;\n    });\n  }, []);\n\n  useResizeObserver<HTMLDivElement>({\n    ref,\n    onResize,\n  });\n\n  useLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n    setMin(ref.current.offsetHeight);\n    setMax(ref.current.scrollHeight);\n  }, []);\n\n  if (!children) {\n    return null;\n  }\n\n  const withToggleButton = max > min || isExpanded;\n  const style = { '--height': `${isExpanded ? max : min}px` } as CSSProperties;\n\n  return (\n    <>\n      <div\n        className={clsx(className, 'overflow-clip transition-all duration-500', {\n          'h-(--height)': isClient,\n        })}\n        style={style}\n      >\n        <div className={clsx({ [lineClamps]: !isExpanded })} id={id} ref={ref}>\n          {children}\n        </div>\n      </div>\n      {withToggleButton && (\n        <button\n          aria-controls={id}\n          aria-expanded={isExpanded}\n          className={clsx(\n            'self-start border-b border-current font-semibold text-inherit transition-colors outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n            buttonClassName,\n          )}\n          onClick={() => setIsExpanded(!isExpanded)}\n          type=\"button\"\n        >\n          {isExpanded ? labels.reduce : labels.expand}\n        </button>\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;;;;AAsBA,IAAa,KAAkB,EAC7B,oBACA,aACA,cACA,OACA,WACA,gBAAa,qBAC+B;CAC5C,IAAM,IAAM,EAAuB,KAAM,EACnC,CAAC,GAAK,KAAU,EAAS,EAAE,EAC3B,CAAC,GAAK,KAAU,EAAS,EAAE,EAC3B,CAAC,GAAY,KAAiB,EAAS,GAAM,EAE7C,IAAW,GAAa;AAyB9B,KAbA,EAAkC;EAChC;EACA,UAZe,QAAkB;AAEjC,GADA,EAAO,EAAI,QAAQ,aAAa,EAChC,GAAQ,MACF,MAAe,IACV,EAAI,QAAQ,eAEd,EACP;KACD,EAAE,CAAA;EAKJ,CAAC,EAEF,QAAsB;AACf,IAAI,YAGT,EAAO,EAAI,QAAQ,aAAa,EAChC,EAAO,EAAI,QAAQ,aAAa;IAC/B,EAAE,CAAC,EAEF,CAAC,EACH,QAAO;CAGT,IAAM,IAAmB,IAAM,KAAO,GAChC,IAAQ,EAAE,YAAY,GAAG,IAAa,IAAM,EAAI,KAAK;AAE3D,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;EACE,WAAW,EAAK,GAAW,6CAA6C,EACtE,gBAAgB,GACjB,CAAC;EACK;YAEP,kBAAC,OAAD;GAAK,WAAW,EAAK,GAAG,IAAa,CAAC,GAAY,CAAC;GAAM;GAAS;GAC/D;GACG,CAAA;EACF,CAAA,EACL,KACC,kBAAC,UAAD;EACE,iBAAe;EACf,iBAAe;EACf,WAAW,EACT,0KACA,EACD;EACD,eAAe,EAAc,CAAC,EAAW;EACzC,MAAK;YAEJ,IAAa,EAAO,SAAS,EAAO;EAC9B,CAAA,CAEV,EAAA,CAAA"}

package/ui/HamburgerIcon.js

@@ -12,7 +12,7 @@ var n = ({ className: n, isActive: r = !1, ...i }) => {
 	return /* @__PURE__ */ t("span", {
 		"data-name": "HamburgerIcon",
 		...i,
-		className: e("menu-icon cursor-pointer", "color-current relative isolate shrink-0 h-24 w-24 block", n),
+		className: e("menu-icon cursor-pointer", "color-current relative isolate shrink-0 h-24 w-24 block outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", n),
 		"data-testid": r ? "HamburgerIcon-active" : "HamburgerIcon",
 		children: /* @__PURE__ */ t("span", { className: e("absolute left-1/2 top-1/2 block h-2 w-24 -translate-x-1/2 -translate-y-1/2 transition-[background] duration-500 cursor-pointer", {
 			"bg-current": !r,

package/ui/HamburgerIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"HamburgerIcon.js","names":[],"sources":["../../lib/ui/HamburgerIcon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\ninterface Props extends ComponentPropsWithoutRef<'span'> {\n  isActive?: boolean;\n}\n\nexport const HamburgerIcon: FunctionComponent<Props> = ({\n  className,\n  isActive = false,\n  ...attrs\n}) => {\n  const before = clsx(\n    'before:absolute before:left-0 before:top-0 before:block before:h-2 before:w-24 before:bg-current before:opacity-100 before:transition-transform before:duration-500 before:content-[\"\"] before:cursor-pointer',\n    { 'before:translate-y-[-6px]': !isActive, 'before:translate-y-0 before:rotate-45': isActive },\n  );\n\n  const after = clsx(\n    'after:absolute after:left-0 after:top-0 after:block after:h-2 after:w-24 after:bg-current after:opacity-100 after:transition-transform after:duration-500 after:content-[\"\"] after:cursor-pointer',\n    { 'after:translate-y-[6px]': !isActive, 'after:translate-y-0 after:-rotate-45': isActive },\n  );\n\n  return (\n    <span\n      data-name=\"HamburgerIcon\"\n      {...attrs}\n      className={clsx(\n        'menu-icon cursor-pointer',\n        'color-current relative isolate shrink-0 h-24 w-24 block',\n        className,\n      )}\n      data-testid={isActive ? 'HamburgerIcon-active' : 'HamburgerIcon'}\n    >\n      <span\n        className={clsx(\n          'absolute left-1/2 top-1/2 block h-2 w-24 -translate-x-1/2 -translate-y-1/2 transition-[background] duration-500 cursor-pointer',\n          { 'bg-current': !isActive, 'bg-transparent': isActive },\n          before,\n          after,\n        )}\n      />\n    </span>\n  );\n};\n"],"mappings":";;;AAOA,IAAa,KAA2C,EACtD,cACA,cAAW,IACX,GAAG,QACC;CACJ,IAAM,IAAS,EACb,mNACA;EAAE,6BAA6B,CAAC;EAAU,yCAAyC;EAAU,CAC9F,EAEK,IAAQ,EACZ,uMACA;EAAE,2BAA2B,CAAC;EAAU,wCAAwC;EAAU,CAC3F;AAED,QACE,kBAAC,QAAD;EACE,aAAU;EACV,GAAI;EACJ,WAAW,EACT,4BACA,2DACA,EACD;EACD,eAAa,IAAW,yBAAyB;YAEjD,kBAAC,QAAD,EACE,WAAW,EACT,kIACA;GAAE,cAAc,CAAC;GAAU,kBAAkB;GAAU,EACvD,GACA,EACD,EACD,CAAA;EACG,CAAA"}
+{"version":3,"file":"HamburgerIcon.js","names":[],"sources":["../../lib/ui/HamburgerIcon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\ninterface Props extends ComponentPropsWithoutRef<'span'> {\n  isActive?: boolean;\n}\n\nexport const HamburgerIcon: FunctionComponent<Props> = ({\n  className,\n  isActive = false,\n  ...attrs\n}) => {\n  const before = clsx(\n    'before:absolute before:left-0 before:top-0 before:block before:h-2 before:w-24 before:bg-current before:opacity-100 before:transition-transform before:duration-500 before:content-[\"\"] before:cursor-pointer',\n    { 'before:translate-y-[-6px]': !isActive, 'before:translate-y-0 before:rotate-45': isActive },\n  );\n\n  const after = clsx(\n    'after:absolute after:left-0 after:top-0 after:block after:h-2 after:w-24 after:bg-current after:opacity-100 after:transition-transform after:duration-500 after:content-[\"\"] after:cursor-pointer',\n    { 'after:translate-y-[6px]': !isActive, 'after:translate-y-0 after:-rotate-45': isActive },\n  );\n\n  return (\n    <span\n      data-name=\"HamburgerIcon\"\n      {...attrs}\n      className={clsx(\n        'menu-icon cursor-pointer',\n        'color-current relative isolate shrink-0 h-24 w-24 block outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n        className,\n      )}\n      data-testid={isActive ? 'HamburgerIcon-active' : 'HamburgerIcon'}\n    >\n      <span\n        className={clsx(\n          'absolute left-1/2 top-1/2 block h-2 w-24 -translate-x-1/2 -translate-y-1/2 transition-[background] duration-500 cursor-pointer',\n          { 'bg-current': !isActive, 'bg-transparent': isActive },\n          before,\n          after,\n        )}\n      />\n    </span>\n  );\n};\n"],"mappings":";;;AAOA,IAAa,KAA2C,EACtD,cACA,cAAW,IACX,GAAG,QACC;CACJ,IAAM,IAAS,EACb,mNACA;EAAE,6BAA6B,CAAC;EAAU,yCAAyC;EAAU,CAC9F,EAEK,IAAQ,EACZ,uMACA;EAAE,2BAA2B,CAAC;EAAU,wCAAwC;EAAU,CAC3F;AAED,QACE,kBAAC,QAAD;EACE,aAAU;EACV,GAAI;EACJ,WAAW,EACT,4BACA,kJACA,EACD;EACD,eAAa,IAAW,yBAAyB;YAEjD,kBAAC,QAAD,EACE,WAAW,EACT,kIACA;GAAE,cAAc,CAAC;GAAU,kBAAkB;GAAU,EACvD,GACA,EACD,EACD,CAAA;EACG,CAAA"}

package/ui/Link.js

@@ -7,7 +7,7 @@ var a = ({ label: a, icon: o, component: s = "a", iconType: c, underlined: l = !
 	if (!a) return null;
 	let m = a.lastIndexOf(" "), h = m === -1 ? a.length : m, g = a.substring(0, 1), _ = a.substring(1, h + 1), v = a.substring(h);
 	return /* @__PURE__ */ i(d ? "span" : s, {
-		className: t("decoration-none link-container cursor-pointer text-b3 font-semibold", u),
+		className: t("decoration-none link-container cursor-pointer text-b3 font-semibold outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", u),
 		"data-name": "Link",
 		...p,
 		children: [/* @__PURE__ */ r("span", {

package/ui/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":[],"sources":["../../lib/ui/Link.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { AnchorHTMLAttributes, FunctionComponent, PropsWithChildren } from 'react';\n\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { twMerge } from './helpers/twMerge';\n\ninterface LinkProps<T extends HTMLAnchorElement = HTMLAnchorElement>\n  extends AnchorHTMLAttributes<T> {\n  /**\n   * Label text\n   */\n  label: string;\n  /**\n   * Icon name\n   */\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  /**\n   * Icon width\n   */\n  width?: string;\n  /**\n   * Underlined\n   */\n  underlined?: boolean;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * Is the link inert (not itself clickable but part of a clickable element)\n   */\n  inert?: boolean;\n  /**\n   * Allow giving a custom component\n   */\n  component?: FunctionComponent<PropsWithChildren<any>> | string;\n}\n\nexport const Link: FunctionComponent<LinkProps> = ({\n  label,\n  icon,\n  component = 'a',\n  iconType,\n  underlined = true,\n  className,\n  inert,\n  width = '24px',\n  ...anchorAttrs\n}) => {\n  if (!label) {\n    return null;\n  }\n  const lastSpace = label.lastIndexOf(' ');\n  const lastIndex = lastSpace === -1 ? label.length : lastSpace;\n\n  const first = label.substring(0, 1);\n  const middle = label.substring(1, lastIndex + 1);\n  const last = label.substring(lastIndex);\n  const Cmp = component as FunctionComponent<PropsWithChildren>;\n\n  const TagName = inert ? 'span' : Cmp;\n\n  return (\n    <TagName\n      className={twMerge(\n        'decoration-none link-container cursor-pointer text-b3 font-semibold',\n        className,\n      )}\n      data-name=\"Link\"\n      {...anchorAttrs}\n    >\n      <span className={clsx({ 'link-underline': underlined })}>{first}</span>\n      <span\n        className={clsx('hoverable', {\n          'has-icon': icon,\n          'link-underline': underlined,\n        })}\n      >\n        {middle}\n        <span className=\"inline-block\">\n          {last}\n          {icon && (\n            <Icon\n              name={icon}\n              iconType={iconType}\n              width={width}\n              style={{ marginInlineStart: '8px' }}\n            />\n          )}\n        </span>\n      </span>\n    </TagName>\n  );\n};\n"],"mappings":";;;;;AAuCA,IAAa,KAAsC,EACjD,UACA,SACA,eAAY,KACZ,aACA,gBAAa,IACb,cACA,UACA,WAAQ,QACR,GAAG,QACC;AACJ,KAAI,CAAC,EACH,QAAO;CAET,IAAM,IAAY,EAAM,YAAY,IAAI,EAClC,IAAY,MAAc,KAAK,EAAM,SAAS,GAE9C,IAAQ,EAAM,UAAU,GAAG,EAAE,EAC7B,IAAS,EAAM,UAAU,GAAG,IAAY,EAAE,EAC1C,IAAO,EAAM,UAAU,EAAU;AAKvC,QACE,kBAHc,IAAQ,SAFZ,GAKV;EACE,WAAW,EACT,uEACA,EACD;EACD,aAAU;EACV,GAAI;YANN,CAQE,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAE,kBAAkB,GAAY,CAAC;aAAG;GAAa,CAAA,EACvE,kBAAC,QAAD;GACE,WAAW,EAAK,aAAa;IAC3B,YAAY;IACZ,kBAAkB;IACnB,CAAC;aAJJ,CAMG,GACD,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,GACA,KACC,kBAAC,GAAD;KACE,MAAM;KACI;KACH;KACP,OAAO,EAAE,mBAAmB,OAAO;KACnC,CAAA,CAEC;MACF;KACC"}
+{"version":3,"file":"Link.js","names":[],"sources":["../../lib/ui/Link.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { AnchorHTMLAttributes, FunctionComponent, PropsWithChildren } from 'react';\n\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { twMerge } from './helpers/twMerge';\n\ninterface LinkProps<T extends HTMLAnchorElement = HTMLAnchorElement>\n  extends AnchorHTMLAttributes<T> {\n  /**\n   * Label text\n   */\n  label: string;\n  /**\n   * Icon name\n   */\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  /**\n   * Icon width\n   */\n  width?: string;\n  /**\n   * Underlined\n   */\n  underlined?: boolean;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * Is the link inert (not itself clickable but part of a clickable element)\n   */\n  inert?: boolean;\n  /**\n   * Allow giving a custom component\n   */\n  component?: FunctionComponent<PropsWithChildren<any>> | string;\n}\n\nexport const Link: FunctionComponent<LinkProps> = ({\n  label,\n  icon,\n  component = 'a',\n  iconType,\n  underlined = true,\n  className,\n  inert,\n  width = '24px',\n  ...anchorAttrs\n}) => {\n  if (!label) {\n    return null;\n  }\n  const lastSpace = label.lastIndexOf(' ');\n  const lastIndex = lastSpace === -1 ? label.length : lastSpace;\n\n  const first = label.substring(0, 1);\n  const middle = label.substring(1, lastIndex + 1);\n  const last = label.substring(lastIndex);\n  const Cmp = component as FunctionComponent<PropsWithChildren>;\n\n  const TagName = inert ? 'span' : Cmp;\n\n  return (\n    <TagName\n      className={twMerge(\n        'decoration-none link-container cursor-pointer text-b3 font-semibold outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n        className,\n      )}\n      data-name=\"Link\"\n      {...anchorAttrs}\n    >\n      <span className={clsx({ 'link-underline': underlined })}>{first}</span>\n      <span\n        className={clsx('hoverable', {\n          'has-icon': icon,\n          'link-underline': underlined,\n        })}\n      >\n        {middle}\n        <span className=\"inline-block\">\n          {last}\n          {icon && (\n            <Icon\n              name={icon}\n              iconType={iconType}\n              width={width}\n              style={{ marginInlineStart: '8px' }}\n            />\n          )}\n        </span>\n      </span>\n    </TagName>\n  );\n};\n"],"mappings":";;;;;AAuCA,IAAa,KAAsC,EACjD,UACA,SACA,eAAY,KACZ,aACA,gBAAa,IACb,cACA,UACA,WAAQ,QACR,GAAG,QACC;AACJ,KAAI,CAAC,EACH,QAAO;CAET,IAAM,IAAY,EAAM,YAAY,IAAI,EAClC,IAAY,MAAc,KAAK,EAAM,SAAS,GAE9C,IAAQ,EAAM,UAAU,GAAG,EAAE,EAC7B,IAAS,EAAM,UAAU,GAAG,IAAY,EAAE,EAC1C,IAAO,EAAM,UAAU,EAAU;AAKvC,QACE,kBAHc,IAAQ,SAFZ,GAKV;EACE,WAAW,EACT,8JACA,EACD;EACD,aAAU;EACV,GAAI;YANN,CAQE,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAE,kBAAkB,GAAY,CAAC;aAAG;GAAa,CAAA,EACvE,kBAAC,QAAD;GACE,WAAW,EAAK,aAAa;IAC3B,YAAY;IACZ,kBAAkB;IACnB,CAAC;aAJJ,CAMG,GACD,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,GACA,KACC,kBAAC,GAAD;KACE,MAAM;KACI;KACH;KACP,OAAO,EAAE,mBAAmB,OAAO;KACnC,CAAA,CAEC;MACF;KACC"}

package/ui/PageNavigation.js

@@ -44,7 +44,7 @@ var o = {
 						href: t.href,
 						"aria-current": n ? "page" : void 0,
 						style: n ? s : void 0,
-						className: e("relative z-10 grid items-center justify-center gap-2 rounded-pill", "font-sans text-b3 font-semibold focus-visible:ring-8 focus-visible:ring-lavender/20 outline-none", n ? "[@supports(not(anchor-name:--x))]:bg-black" : "focus:bg-pearl", n ? "px-20 py-12" : "md:px-20 md:py-12", n ? "text-white" : "text-black"),
+						className: e("relative z-10 grid items-center justify-center gap-2 rounded-pill", "font-sans text-b3 font-semibold focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 outline-none", n ? "[@supports(not(anchor-name:--x))]:bg-black" : "focus:bg-pearl", n ? "px-20 py-12" : "md:px-20 md:py-12", n ? "text-white" : "text-black"),
 						children: [t.icon && /* @__PURE__ */ i("div", {
 							className: e("row-start-1 row-end-1 col-start-1 col-end-1 flex items-center justify-center transition-opacity duration-300 md:hidden", "md:opacity-0 transition-opacity mx-auto", n && "opacity-0"),
 							"aria-hidden": "true",

package/ui/PageNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageNavigation.js","names":[],"sources":["../../lib/ui/PageNavigation.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  ComponentPropsWithoutRef,\n  CSSProperties,\n  FunctionComponent,\n  KeyboardEvent,\n} from 'react';\nimport { useCallback, useRef } from 'react';\nimport clsx from 'clsx';\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\n\nexport interface PageNavigationItem {\n  id: string;\n  label: string;\n  href: string;\n  icon?: IconicNames;\n}\n\nexport interface PageNavigationProps extends ComponentPropsWithoutRef<'nav'> {\n  items: PageNavigationItem[];\n  activeItem: string;\n}\n\n// Static — hoisted outside component so it's not recreated on every render\nconst PILL_STYLE: CSSProperties = {\n  positionAnchor: '--page-nav-active',\n  top: 'anchor(top)',\n  bottom: 'anchor(bottom)',\n  left: 'anchor(left)',\n  right: 'anchor(right)',\n  position: 'absolute',\n};\n\nconst ACTIVE_ANCHOR_STYLE: CSSProperties = { anchorName: '--page-nav-active' };\n\nconst PILL = (\n  <span\n    aria-hidden=\"true\"\n    className=\"pointer-events-none absolute rounded-pill bg-black transition-all duration-300 [position-anchor:--page-nav-active]\"\n    style={PILL_STYLE}\n  />\n);\n\nexport const PageNavigation: FunctionComponent<PageNavigationProps> = ({\n  items,\n  activeItem,\n  className,\n  ...attrs\n}) => {\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLUListElement>) => {\n    const links = Array.from(listRef.current?.querySelectorAll<HTMLAnchorElement>('a') ?? []);\n    const focused = links.indexOf(document.activeElement as HTMLAnchorElement);\n    if (focused === -1) return;\n\n    let next = focused;\n    if (e.key === 'ArrowRight') next = (focused + 1) % links.length;\n    else if (e.key === 'ArrowLeft') next = (focused - 1 + links.length) % links.length;\n    else if (e.key === 'Home') next = 0;\n    else if (e.key === 'End') next = links.length - 1;\n    else return;\n\n    e.preventDefault();\n    links[next].focus();\n  }, []);\n\n  return (\n    <nav aria-label=\"Page navigation\" {...attrs} className={clsx('flex items-center', className)}>\n      <ul\n        ref={listRef}\n        onKeyDown={handleKeyDown}\n        className=\"relative flex items-center gap-4 md:gap-16\"\n        role=\"list\"\n      >\n        {PILL}\n\n        {items.map((item) => {\n          const isActive = item.id === activeItem;\n\n          return (\n            <li key={item.id} className=\"relative\">\n              <a\n                href={item.href}\n                aria-current={isActive ? 'page' : undefined}\n                style={isActive ? ACTIVE_ANCHOR_STYLE : undefined}\n                className={clsx(\n                  'relative z-10 grid items-center justify-center gap-2 rounded-pill',\n                  'font-sans text-b3 font-semibold focus-visible:ring-8 focus-visible:ring-lavender/20 outline-none',\n                  isActive ? '[@supports(not(anchor-name:--x))]:bg-black' : 'focus:bg-pearl',\n                  isActive ? 'px-20 py-12' : 'md:px-20 md:py-12',\n                  isActive ? 'text-white' : 'text-black',\n                )}\n              >\n                {item.icon && (\n                  <div\n                    className={clsx(\n                      'row-start-1 row-end-1 col-start-1 col-end-1 flex items-center justify-center transition-opacity duration-300 md:hidden',\n                      'md:opacity-0 transition-opacity mx-auto',\n                      isActive && 'opacity-0',\n                    )}\n                    aria-hidden=\"true\"\n                  >\n                    <Icon name={item.icon} width=\"30px\" />\n                  </div>\n                )}\n\n                <span\n                  className={clsx(\n                    'row-start-1 row-end-1 col-start-1 col-end-1 grid grid-cols-[0fr] md:grid-cols-[1fr] overflow-hidden transition-all opacity-0 duration-300 md:opacity-100 text-center',\n                    isActive && 'grid-cols-[1fr] opacity-100',\n                  )}\n                >\n                  <span className=\"overflow-hidden mx-auto\">{item.label}</span>\n                </span>\n              </a>\n            </li>\n          );\n        })}\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;AAyBA,IAAM,IAA4B;CAChC,gBAAgB;CAChB,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACP,UAAU;CACX,EAEK,IAAqC,EAAE,YAAY,qBAAqB,EAExE,IACJ,kBAAC,QAAD;CACE,eAAY;CACZ,WAAU;CACV,OAAO;CACP,CAAA,EAGS,KAA0D,EACrE,UACA,eACA,cACA,GAAG,QACC;CACJ,IAAM,IAAU,EAAyB,KAAK,EAExC,IAAgB,GAAa,MAAuC;EACxE,IAAM,IAAQ,MAAM,KAAK,EAAQ,SAAS,iBAAoC,IAAI,IAAI,EAAE,CAAC,EACnF,IAAU,EAAM,QAAQ,SAAS,cAAmC;AAC1E,MAAI,MAAY,GAAI;EAEpB,IAAI,IAAO;AACX,MAAI,EAAE,QAAQ,aAAc,MAAQ,IAAU,KAAK,EAAM;WAChD,EAAE,QAAQ,YAAa,MAAQ,IAAU,IAAI,EAAM,UAAU,EAAM;WACnE,EAAE,QAAQ,OAAQ,KAAO;WACzB,EAAE,QAAQ,MAAO,KAAO,EAAM,SAAS;MAC3C;AAGL,EADA,EAAE,gBAAgB,EAClB,EAAM,GAAM,OAAO;IAClB,EAAE,CAAC;AAEN,QACE,kBAAC,OAAD;EAAK,cAAW;EAAkB,GAAI;EAAO,WAAW,EAAK,qBAAqB,EAAU;YAC1F,kBAAC,MAAD;GACE,KAAK;GACL,WAAW;GACX,WAAU;GACV,MAAK;aAJP,CAMG,GAEA,EAAM,KAAK,MAAS;IACnB,IAAM,IAAW,EAAK,OAAO;AAE7B,WACE,kBAAC,MAAD;KAAkB,WAAU;eAC1B,kBAAC,KAAD;MACE,MAAM,EAAK;MACX,gBAAc,IAAW,SAAS,KAAA;MAClC,OAAO,IAAW,IAAsB,KAAA;MACxC,WAAW,EACT,qEACA,oGACA,IAAW,+CAA+C,kBAC1D,IAAW,gBAAgB,qBAC3B,IAAW,eAAe,aAC3B;gBAVH,CAYG,EAAK,QACJ,kBAAC,OAAD;OACE,WAAW,EACT,0HACA,2CACA,KAAY,YACb;OACD,eAAY;iBAEZ,kBAAC,GAAD;QAAM,MAAM,EAAK;QAAM,OAAM;QAAS,CAAA;OAClC,CAAA,EAGR,kBAAC,QAAD;OACE,WAAW,EACT,wKACA,KAAY,8BACb;iBAED,kBAAC,QAAD;QAAM,WAAU;kBAA2B,EAAK;QAAa,CAAA;OACxD,CAAA,CAAA;;KAEN,EAnCI,EAAK,GAmCT;KAEP,CAAA;;EAEA,CAAA"}
+{"version":3,"file":"PageNavigation.js","names":[],"sources":["../../lib/ui/PageNavigation.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  ComponentPropsWithoutRef,\n  CSSProperties,\n  FunctionComponent,\n  KeyboardEvent,\n} from 'react';\nimport { useCallback, useRef } from 'react';\nimport clsx from 'clsx';\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\n\nexport interface PageNavigationItem {\n  id: string;\n  label: string;\n  href: string;\n  icon?: IconicNames;\n}\n\nexport interface PageNavigationProps extends ComponentPropsWithoutRef<'nav'> {\n  items: PageNavigationItem[];\n  activeItem: string;\n}\n\n// Static — hoisted outside component so it's not recreated on every render\nconst PILL_STYLE: CSSProperties = {\n  positionAnchor: '--page-nav-active',\n  top: 'anchor(top)',\n  bottom: 'anchor(bottom)',\n  left: 'anchor(left)',\n  right: 'anchor(right)',\n  position: 'absolute',\n};\n\nconst ACTIVE_ANCHOR_STYLE: CSSProperties = { anchorName: '--page-nav-active' };\n\nconst PILL = (\n  <span\n    aria-hidden=\"true\"\n    className=\"pointer-events-none absolute rounded-pill bg-black transition-all duration-300 [position-anchor:--page-nav-active]\"\n    style={PILL_STYLE}\n  />\n);\n\nexport const PageNavigation: FunctionComponent<PageNavigationProps> = ({\n  items,\n  activeItem,\n  className,\n  ...attrs\n}) => {\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLUListElement>) => {\n    const links = Array.from(listRef.current?.querySelectorAll<HTMLAnchorElement>('a') ?? []);\n    const focused = links.indexOf(document.activeElement as HTMLAnchorElement);\n    if (focused === -1) return;\n\n    let next = focused;\n    if (e.key === 'ArrowRight') next = (focused + 1) % links.length;\n    else if (e.key === 'ArrowLeft') next = (focused - 1 + links.length) % links.length;\n    else if (e.key === 'Home') next = 0;\n    else if (e.key === 'End') next = links.length - 1;\n    else return;\n\n    e.preventDefault();\n    links[next].focus();\n  }, []);\n\n  return (\n    <nav aria-label=\"Page navigation\" {...attrs} className={clsx('flex items-center', className)}>\n      <ul\n        ref={listRef}\n        onKeyDown={handleKeyDown}\n        className=\"relative flex items-center gap-4 md:gap-16\"\n        role=\"list\"\n      >\n        {PILL}\n\n        {items.map((item) => {\n          const isActive = item.id === activeItem;\n\n          return (\n            <li key={item.id} className=\"relative\">\n              <a\n                href={item.href}\n                aria-current={isActive ? 'page' : undefined}\n                style={isActive ? ACTIVE_ANCHOR_STYLE : undefined}\n                className={clsx(\n                  'relative z-10 grid items-center justify-center gap-2 rounded-pill',\n                  'font-sans text-b3 font-semibold focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 outline-none',\n                  isActive ? '[@supports(not(anchor-name:--x))]:bg-black' : 'focus:bg-pearl',\n                  isActive ? 'px-20 py-12' : 'md:px-20 md:py-12',\n                  isActive ? 'text-white' : 'text-black',\n                )}\n              >\n                {item.icon && (\n                  <div\n                    className={clsx(\n                      'row-start-1 row-end-1 col-start-1 col-end-1 flex items-center justify-center transition-opacity duration-300 md:hidden',\n                      'md:opacity-0 transition-opacity mx-auto',\n                      isActive && 'opacity-0',\n                    )}\n                    aria-hidden=\"true\"\n                  >\n                    <Icon name={item.icon} width=\"30px\" />\n                  </div>\n                )}\n\n                <span\n                  className={clsx(\n                    'row-start-1 row-end-1 col-start-1 col-end-1 grid grid-cols-[0fr] md:grid-cols-[1fr] overflow-hidden transition-all opacity-0 duration-300 md:opacity-100 text-center',\n                    isActive && 'grid-cols-[1fr] opacity-100',\n                  )}\n                >\n                  <span className=\"overflow-hidden mx-auto\">{item.label}</span>\n                </span>\n              </a>\n            </li>\n          );\n        })}\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;AAyBA,IAAM,IAA4B;CAChC,gBAAgB;CAChB,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACP,UAAU;CACX,EAEK,IAAqC,EAAE,YAAY,qBAAqB,EAExE,IACJ,kBAAC,QAAD;CACE,eAAY;CACZ,WAAU;CACV,OAAO;CACP,CAAA,EAGS,KAA0D,EACrE,UACA,eACA,cACA,GAAG,QACC;CACJ,IAAM,IAAU,EAAyB,KAAK,EAExC,IAAgB,GAAa,MAAuC;EACxE,IAAM,IAAQ,MAAM,KAAK,EAAQ,SAAS,iBAAoC,IAAI,IAAI,EAAE,CAAC,EACnF,IAAU,EAAM,QAAQ,SAAS,cAAmC;AAC1E,MAAI,MAAY,GAAI;EAEpB,IAAI,IAAO;AACX,MAAI,EAAE,QAAQ,aAAc,MAAQ,IAAU,KAAK,EAAM;WAChD,EAAE,QAAQ,YAAa,MAAQ,IAAU,IAAI,EAAM,UAAU,EAAM;WACnE,EAAE,QAAQ,OAAQ,KAAO;WACzB,EAAE,QAAQ,MAAO,KAAO,EAAM,SAAS;MAC3C;AAGL,EADA,EAAE,gBAAgB,EAClB,EAAM,GAAM,OAAO;IAClB,EAAE,CAAC;AAEN,QACE,kBAAC,OAAD;EAAK,cAAW;EAAkB,GAAI;EAAO,WAAW,EAAK,qBAAqB,EAAU;YAC1F,kBAAC,MAAD;GACE,KAAK;GACL,WAAW;GACX,WAAU;GACV,MAAK;aAJP,CAMG,GAEA,EAAM,KAAK,MAAS;IACnB,IAAM,IAAW,EAAK,OAAO;AAE7B,WACE,kBAAC,MAAD;KAAkB,WAAU;eAC1B,kBAAC,KAAD;MACE,MAAM,EAAK;MACX,gBAAc,IAAW,SAAS,KAAA;MAClC,OAAO,IAAW,IAAsB,KAAA;MACxC,WAAW,EACT,qEACA,0HACA,IAAW,+CAA+C,kBAC1D,IAAW,gBAAgB,qBAC3B,IAAW,eAAe,aAC3B;gBAVH,CAYG,EAAK,QACJ,kBAAC,OAAD;OACE,WAAW,EACT,0HACA,2CACA,KAAY,YACb;OACD,eAAY;iBAEZ,kBAAC,GAAD;QAAM,MAAM,EAAK;QAAM,OAAM;QAAS,CAAA;OAClC,CAAA,EAGR,kBAAC,QAAD;OACE,WAAW,EACT,wKACA,KAAY,8BACb;iBAED,kBAAC,QAAD;QAAM,WAAU;kBAA2B,EAAK;QAAa,CAAA;OACxD,CAAA,CAAA;;KAEN,EAnCI,EAAK,GAmCT;KAEP,CAAA;;EAEA,CAAA"}

package/ui/Pagination.js

@@ -53,7 +53,7 @@ var l = () => /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s("div", {
 							"data-action": "previous",
 							"aria-controls": "page-content",
 							"aria-label": `page ${d - 1}`,
-							className: e("text:black text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active", { "pointer-events-none disabled:text-grey": n.disabled }),
+							className: e("text:black text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", { "pointer-events-none disabled:text-grey": n.disabled }),
 							disabled: n.disabled,
 							onClick: () => g(d - 1),
 							type: "button",
@@ -71,7 +71,7 @@ var l = () => /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s("div", {
 						children: /* @__PURE__ */ c("button", {
 							"aria-controls": "page-content",
 							"aria-label": `page ${d + 1}`,
-							className: e("text:black mb-5 text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active", { "pointer-events-none disabled:text-grey": n.disabled }),
+							className: e("text:black mb-5 text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", { "pointer-events-none disabled:text-grey": n.disabled }),
 							"data-action": "next",
 							disabled: n.disabled,
 							onClick: () => g(d + 1),

package/ui/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":[],"sources":["../../lib/ui/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { Fragment, type FunctionComponent, type HTMLAttributes } from 'react';\n\nimport {\n  showMobileEllipsis,\n  generatePagination,\n  hidePageButtonForMobile,\n} from './Pagination.helper';\nimport { Button } from './buttons/Button';\nimport { Icon } from '@clubmed/trident-icons';\nimport type { ScrollerLabels } from './types/ScrollerLabels';\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /**\n   * The current page number (must be >= 1)\n   */\n  defaultPage: number;\n  /**\n   * The total pages number\n   */\n  count: number;\n  /**\n   * A callback function to handle page changes.\n   */\n  onChange: (page: number) => void;\n  /**\n   * Additional class names for the previous & next buttons\n   */\n  buttonClassName?: string;\n  /**\n   * Additional class names for the label of the previous & next buttons\n   */\n  buttonLabelClassName?: string;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * UI Labels\n   */\n  labels: ScrollerLabels;\n  /**\n   * A pagination factory to generate an array of Pagination elements (pageNumber, ellipsis, next button, previous button).\n   */\n  paginationFactory?: typeof generatePagination;\n}\n\nconst EllipsisDesktop = () => {\n  return (\n    <li key=\"desktop-ellipsis\">\n      <div\n        aria-controls=\"page-content\"\n        className=\"text-base mx-8 ml-4 hidden size-48 items-center justify-center text-b3 font-semibold text-black md:flex\"\n      >\n        &#8230;\n      </div>\n    </li>\n  );\n};\n\nconst EllipsisMobile = () => {\n  return (\n    <li key=\"mobile-ellipsis\">\n      <div\n        aria-controls=\"page-content\"\n        className=\"text-base mx-8 ml-4 flex size-48 items-center justify-center text-b3 font-semibold text-black md:hidden\"\n      >\n        &#8230;\n      </div>\n    </li>\n  );\n};\n\nexport const Pagination: FunctionComponent<PaginationProps> = ({\n  defaultPage,\n  buttonClassName = 'md:mr-32',\n  buttonLabelClassName = 'md:flex',\n  className,\n  labels = {},\n  onChange,\n  paginationFactory = generatePagination,\n  count,\n  ...props\n}) => {\n  const pagination = paginationFactory(defaultPage, count);\n\n  return (\n    <nav\n      {...props}\n      data-name=\"Pagination\"\n      role=\"navigation\"\n      aria-label=\"pagination navigation\"\n      className={clsx('flex justify-center border-t-sand', className)}\n    >\n      <ul className=\"mt-12 flex\">\n        {pagination.map((page, index) => {\n          switch (page.type) {\n            case 'pageNumber':\n              return (\n                <Fragment key={`pagination-pageNumber-${index}`}>\n                  {page.value === count && showMobileEllipsis(page.value, defaultPage, count) && (\n                    <EllipsisMobile />\n                  )}\n                  <li\n                    className={clsx('mr-2', {\n                      'hidden md:flex': hidePageButtonForMobile(page.value, defaultPage, count),\n                    })}\n                  >\n                    {page.value === defaultPage ? (\n                      <Button\n                        aria-current=\"page\"\n                        className=\"text-white\"\n                        color=\"black\"\n                        variant=\"circle\"\n                      >\n                        {page.value.toString()}\n                      </Button>\n                    ) : (\n                      <Button\n                        className={clsx('size-48 items-center', {\n                          'mx-8 flex shrink-0 cursor-pointer justify-center self-start':\n                            index === pagination.length - 1,\n                        })}\n                        onClick={() => onChange(page.value)}\n                        color=\"white\"\n                        variant=\"circle\"\n                      >\n                        {page.value.toString()}\n                      </Button>\n                    )}\n                  </li>\n                  {page.value === 1 && showMobileEllipsis(page.value, defaultPage, count) && (\n                    <EllipsisMobile />\n                  )}\n                </Fragment>\n              );\n\n            case 'ellipsis':\n              return <EllipsisDesktop key={`pagination-ellipsis-${index}`} />;\n\n            case 'previousButton':\n              return (\n                <li key=\"pagination-labels.previous\" className={clsx(buttonClassName)}>\n                  <button\n                    data-action=\"previous\"\n                    aria-controls=\"page-content\"\n                    aria-label={`page ${defaultPage - 1}`}\n                    className={clsx(\n                      'text:black text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active',\n                      {\n                        'pointer-events-none disabled:text-grey': page.disabled,\n                      },\n                    )}\n                    disabled={page.disabled}\n                    onClick={() => onChange(defaultPage - 1)}\n                    type=\"button\"\n                  >\n                    <Icon name=\"ArrowDefaultLeft\" width=\"30px\" />\n                    <span\n                      className={clsx(\n                        'ml-4 hidden border-b',\n                        { 'border-black': !page.disabled },\n                        buttonLabelClassName,\n                      )}\n                    >\n                      {labels.previous}\n                    </span>\n                  </button>\n                </li>\n              );\n\n            case 'nextButton':\n              return (\n                <li className={clsx(buttonClassName)} key=\"pagination-labels.next\">\n                  <button\n                    aria-controls=\"page-content\"\n                    aria-label={`page ${defaultPage + 1}`}\n                    className={clsx(\n                      'text:black mb-5 text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active',\n                      {\n                        'pointer-events-none disabled:text-grey': page.disabled,\n                      },\n                    )}\n                    data-action=\"next\"\n                    disabled={page.disabled}\n                    onClick={() => onChange(defaultPage + 1)}\n                    type=\"button\"\n                  >\n                    <span\n                      className={clsx(\n                        'ml-4 hidden border-b',\n                        { 'border-black': !page.disabled },\n                        buttonLabelClassName,\n                      )}\n                    >\n                      {labels.next}\n                    </span>\n                    <Icon name=\"ArrowDefaultRight\" width=\"30px\" />\n                  </button>\n                </li>\n              );\n\n            default:\n              return null;\n          }\n        })}\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;AAiDA,IAAM,UAEF,kBAAC,MAAD,EAAA,UACE,kBAAC,OAAD;CACE,iBAAc;CACd,WAAU;WACX;CAEK,CAAA,EACH,EAPG,mBAOH,EAIH,UAEF,kBAAC,MAAD,EAAA,UACE,kBAAC,OAAD;CACE,iBAAc;CACd,WAAU;WACX;CAEK,CAAA,EACH,EAPG,kBAOH,EAII,KAAkD,EAC7D,gBACA,qBAAkB,YAClB,0BAAuB,WACvB,cACA,YAAS,EAAE,EACX,aACA,uBAAoB,GACpB,UACA,GAAG,QACC;CACJ,IAAM,IAAa,EAAkB,GAAa,EAAM;AAExD,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,MAAK;EACL,cAAW;EACX,WAAW,EAAK,qCAAqC,EAAU;YAE/D,kBAAC,MAAD;GAAI,WAAU;aACX,EAAW,KAAK,GAAM,MAAU;AAC/B,YAAQ,EAAK,MAAb;KACE,KAAK,aACH,QACE,kBAAC,GAAD,EAAA,UAAA;MACG,EAAK,UAAU,KAAS,EAAmB,EAAK,OAAO,GAAa,EAAM,IACzE,kBAAC,GAAD,EAAkB,CAAA;MAEpB,kBAAC,MAAD;OACE,WAAW,EAAK,QAAQ,EACtB,kBAAkB,EAAwB,EAAK,OAAO,GAAa,EAAM,EAC1E,CAAC;iBAED,EAAK,UAAU,IACd,kBAAC,GAAD;QACE,gBAAa;QACb,WAAU;QACV,OAAM;QACN,SAAQ;kBAEP,EAAK,MAAM,UAAA;QACL,CAAA,GAET,kBAAC,GAAD;QACE,WAAW,EAAK,wBAAwB,EACtC,+DACE,MAAU,EAAW,SAAS,GACjC,CAAC;QACF,eAAe,EAAS,EAAK,MAAM;QACnC,OAAM;QACN,SAAQ;kBAEP,EAAK,MAAM,UAAA;QACL,CAAA;OAER,CAAA;MACJ,EAAK,UAAU,KAAK,EAAmB,EAAK,OAAO,GAAa,EAAM,IACrE,kBAAC,GAAD,EAAkB,CAAA;MAEX,EAAA,EAnCI,yBAAyB,IAmC7B;KAGf,KAAK,WACH,QAAO,kBAAC,GAAD,EAAwD,EAAlC,uBAAuB,IAAW;KAEjE,KAAK,iBACH,QACE,kBAAC,MAAD;MAAqC,WAAW,EAAK,EAAgB;gBACnE,kBAAC,UAAD;OACE,eAAY;OACZ,iBAAc;OACd,cAAY,QAAQ,IAAc;OAClC,WAAW,EACT,iLACA,EACE,0CAA0C,EAAK,UAChD,CACF;OACD,UAAU,EAAK;OACf,eAAe,EAAS,IAAc,EAAE;OACxC,MAAK;iBAZP,CAcE,kBAAC,GAAD;QAAM,MAAK;QAAmB,OAAM;QAAS,CAAA,EAC7C,kBAAC,QAAD;QACE,WAAW,EACT,wBACA,EAAE,gBAAgB,CAAC,EAAK,UAAU,EAClC,EACD;kBAEA,EAAO;QACH,CAAA,CAAA;;MAEN,EA1BG,6BA0BH;KAGT,KAAK,aACH,QACE,kBAAC,MAAD;MAAI,WAAW,EAAK,EAAgB;gBAClC,kBAAC,UAAD;OACE,iBAAc;OACd,cAAY,QAAQ,IAAc;OAClC,WAAW,EACT,sLACA,EACE,0CAA0C,EAAK,UAChD,CACF;OACD,eAAY;OACZ,UAAU,EAAK;OACf,eAAe,EAAS,IAAc,EAAE;OACxC,MAAK;iBAZP,CAcE,kBAAC,QAAD;QACE,WAAW,EACT,wBACA,EAAE,gBAAgB,CAAC,EAAK,UAAU,EAClC,EACD;kBAEA,EAAO;QACH,CAAA,EACP,kBAAC,GAAD;QAAM,MAAK;QAAoB,OAAM;QAAS,CAAA,CAAA;;MAE7C,EA1BqC,yBA0BrC;KAGT,QACE,QAAO;;;GAGV,CAAA;EACD,CAAA"}
+{"version":3,"file":"Pagination.js","names":[],"sources":["../../lib/ui/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { Fragment, type FunctionComponent, type HTMLAttributes } from 'react';\n\nimport {\n  showMobileEllipsis,\n  generatePagination,\n  hidePageButtonForMobile,\n} from './Pagination.helper';\nimport { Button } from './buttons/Button';\nimport { Icon } from '@clubmed/trident-icons';\nimport type { ScrollerLabels } from './types/ScrollerLabels';\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /**\n   * The current page number (must be >= 1)\n   */\n  defaultPage: number;\n  /**\n   * The total pages number\n   */\n  count: number;\n  /**\n   * A callback function to handle page changes.\n   */\n  onChange: (page: number) => void;\n  /**\n   * Additional class names for the previous & next buttons\n   */\n  buttonClassName?: string;\n  /**\n   * Additional class names for the label of the previous & next buttons\n   */\n  buttonLabelClassName?: string;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * UI Labels\n   */\n  labels: ScrollerLabels;\n  /**\n   * A pagination factory to generate an array of Pagination elements (pageNumber, ellipsis, next button, previous button).\n   */\n  paginationFactory?: typeof generatePagination;\n}\n\nconst EllipsisDesktop = () => {\n  return (\n    <li key=\"desktop-ellipsis\">\n      <div\n        aria-controls=\"page-content\"\n        className=\"text-base mx-8 ml-4 hidden size-48 items-center justify-center text-b3 font-semibold text-black md:flex\"\n      >\n        &#8230;\n      </div>\n    </li>\n  );\n};\n\nconst EllipsisMobile = () => {\n  return (\n    <li key=\"mobile-ellipsis\">\n      <div\n        aria-controls=\"page-content\"\n        className=\"text-base mx-8 ml-4 flex size-48 items-center justify-center text-b3 font-semibold text-black md:hidden\"\n      >\n        &#8230;\n      </div>\n    </li>\n  );\n};\n\nexport const Pagination: FunctionComponent<PaginationProps> = ({\n  defaultPage,\n  buttonClassName = 'md:mr-32',\n  buttonLabelClassName = 'md:flex',\n  className,\n  labels = {},\n  onChange,\n  paginationFactory = generatePagination,\n  count,\n  ...props\n}) => {\n  const pagination = paginationFactory(defaultPage, count);\n\n  return (\n    <nav\n      {...props}\n      data-name=\"Pagination\"\n      role=\"navigation\"\n      aria-label=\"pagination navigation\"\n      className={clsx('flex justify-center border-t-sand', className)}\n    >\n      <ul className=\"mt-12 flex\">\n        {pagination.map((page, index) => {\n          switch (page.type) {\n            case 'pageNumber':\n              return (\n                <Fragment key={`pagination-pageNumber-${index}`}>\n                  {page.value === count && showMobileEllipsis(page.value, defaultPage, count) && (\n                    <EllipsisMobile />\n                  )}\n                  <li\n                    className={clsx('mr-2', {\n                      'hidden md:flex': hidePageButtonForMobile(page.value, defaultPage, count),\n                    })}\n                  >\n                    {page.value === defaultPage ? (\n                      <Button\n                        aria-current=\"page\"\n                        className=\"text-white\"\n                        color=\"black\"\n                        variant=\"circle\"\n                      >\n                        {page.value.toString()}\n                      </Button>\n                    ) : (\n                      <Button\n                        className={clsx('size-48 items-center', {\n                          'mx-8 flex shrink-0 cursor-pointer justify-center self-start':\n                            index === pagination.length - 1,\n                        })}\n                        onClick={() => onChange(page.value)}\n                        color=\"white\"\n                        variant=\"circle\"\n                      >\n                        {page.value.toString()}\n                      </Button>\n                    )}\n                  </li>\n                  {page.value === 1 && showMobileEllipsis(page.value, defaultPage, count) && (\n                    <EllipsisMobile />\n                  )}\n                </Fragment>\n              );\n\n            case 'ellipsis':\n              return <EllipsisDesktop key={`pagination-ellipsis-${index}`} />;\n\n            case 'previousButton':\n              return (\n                <li key=\"pagination-labels.previous\" className={clsx(buttonClassName)}>\n                  <button\n                    data-action=\"previous\"\n                    aria-controls=\"page-content\"\n                    aria-label={`page ${defaultPage - 1}`}\n                    className={clsx(\n                      'text:black text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n                      {\n                        'pointer-events-none disabled:text-grey': page.disabled,\n                      },\n                    )}\n                    disabled={page.disabled}\n                    onClick={() => onChange(defaultPage - 1)}\n                    type=\"button\"\n                  >\n                    <Icon name=\"ArrowDefaultLeft\" width=\"30px\" />\n                    <span\n                      className={clsx(\n                        'ml-4 hidden border-b',\n                        { 'border-black': !page.disabled },\n                        buttonLabelClassName,\n                      )}\n                    >\n                      {labels.previous}\n                    </span>\n                  </button>\n                </li>\n              );\n\n            case 'nextButton':\n              return (\n                <li className={clsx(buttonClassName)} key=\"pagination-labels.next\">\n                  <button\n                    aria-controls=\"page-content\"\n                    aria-label={`page ${defaultPage + 1}`}\n                    className={clsx(\n                      'text:black mb-5 text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n                      {\n                        'pointer-events-none disabled:text-grey': page.disabled,\n                      },\n                    )}\n                    data-action=\"next\"\n                    disabled={page.disabled}\n                    onClick={() => onChange(defaultPage + 1)}\n                    type=\"button\"\n                  >\n                    <span\n                      className={clsx(\n                        'ml-4 hidden border-b',\n                        { 'border-black': !page.disabled },\n                        buttonLabelClassName,\n                      )}\n                    >\n                      {labels.next}\n                    </span>\n                    <Icon name=\"ArrowDefaultRight\" width=\"30px\" />\n                  </button>\n                </li>\n              );\n\n            default:\n              return null;\n          }\n        })}\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;AAiDA,IAAM,UAEF,kBAAC,MAAD,EAAA,UACE,kBAAC,OAAD;CACE,iBAAc;CACd,WAAU;WACX;CAEK,CAAA,EACH,EAPG,mBAOH,EAIH,UAEF,kBAAC,MAAD,EAAA,UACE,kBAAC,OAAD;CACE,iBAAc;CACd,WAAU;WACX;CAEK,CAAA,EACH,EAPG,kBAOH,EAII,KAAkD,EAC7D,gBACA,qBAAkB,YAClB,0BAAuB,WACvB,cACA,YAAS,EAAE,EACX,aACA,uBAAoB,GACpB,UACA,GAAG,QACC;CACJ,IAAM,IAAa,EAAkB,GAAa,EAAM;AAExD,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,MAAK;EACL,cAAW;EACX,WAAW,EAAK,qCAAqC,EAAU;YAE/D,kBAAC,MAAD;GAAI,WAAU;aACX,EAAW,KAAK,GAAM,MAAU;AAC/B,YAAQ,EAAK,MAAb;KACE,KAAK,aACH,QACE,kBAAC,GAAD,EAAA,UAAA;MACG,EAAK,UAAU,KAAS,EAAmB,EAAK,OAAO,GAAa,EAAM,IACzE,kBAAC,GAAD,EAAkB,CAAA;MAEpB,kBAAC,MAAD;OACE,WAAW,EAAK,QAAQ,EACtB,kBAAkB,EAAwB,EAAK,OAAO,GAAa,EAAM,EAC1E,CAAC;iBAED,EAAK,UAAU,IACd,kBAAC,GAAD;QACE,gBAAa;QACb,WAAU;QACV,OAAM;QACN,SAAQ;kBAEP,EAAK,MAAM,UAAA;QACL,CAAA,GAET,kBAAC,GAAD;QACE,WAAW,EAAK,wBAAwB,EACtC,+DACE,MAAU,EAAW,SAAS,GACjC,CAAC;QACF,eAAe,EAAS,EAAK,MAAM;QACnC,OAAM;QACN,SAAQ;kBAEP,EAAK,MAAM,UAAA;QACL,CAAA;OAER,CAAA;MACJ,EAAK,UAAU,KAAK,EAAmB,EAAK,OAAO,GAAa,EAAM,IACrE,kBAAC,GAAD,EAAkB,CAAA;MAEX,EAAA,EAnCI,yBAAyB,IAmC7B;KAGf,KAAK,WACH,QAAO,kBAAC,GAAD,EAAwD,EAAlC,uBAAuB,IAAW;KAEjE,KAAK,iBACH,QACE,kBAAC,MAAD;MAAqC,WAAW,EAAK,EAAgB;gBACnE,kBAAC,UAAD;OACE,eAAY;OACZ,iBAAc;OACd,cAAY,QAAQ,IAAc;OAClC,WAAW,EACT,wQACA,EACE,0CAA0C,EAAK,UAChD,CACF;OACD,UAAU,EAAK;OACf,eAAe,EAAS,IAAc,EAAE;OACxC,MAAK;iBAZP,CAcE,kBAAC,GAAD;QAAM,MAAK;QAAmB,OAAM;QAAS,CAAA,EAC7C,kBAAC,QAAD;QACE,WAAW,EACT,wBACA,EAAE,gBAAgB,CAAC,EAAK,UAAU,EAClC,EACD;kBAEA,EAAO;QACH,CAAA,CAAA;;MAEN,EA1BG,6BA0BH;KAGT,KAAK,aACH,QACE,kBAAC,MAAD;MAAI,WAAW,EAAK,EAAgB;gBAClC,kBAAC,UAAD;OACE,iBAAc;OACd,cAAY,QAAQ,IAAc;OAClC,WAAW,EACT,6QACA,EACE,0CAA0C,EAAK,UAChD,CACF;OACD,eAAY;OACZ,UAAU,EAAK;OACf,eAAe,EAAS,IAAc,EAAE;OACxC,MAAK;iBAZP,CAcE,kBAAC,QAAD;QACE,WAAW,EACT,wBACA,EAAE,gBAAgB,CAAC,EAAK,UAAU,EAClC,EACD;kBAEA,EAAO;QACH,CAAA,EACP,kBAAC,GAAD;QAAM,MAAK;QAAoB,OAAM;QAAS,CAAA,CAAA;;MAE7C,EA1BqC,yBA0BrC;KAGT,QACE,QAAO;;;GAGV,CAAA;EACD,CAAA"}

package/ui/SidebarLayout.js

@@ -18,7 +18,7 @@ function u(e) {
 	let { children: t, icon: n, label: r, ...i } = e;
 	return /* @__PURE__ */ c("button", {
 		...i,
-		className: "flex whitespace-nowrap items-center text-white outline-none rounded-pill relative group/sidebar-item",
+		className: "flex whitespace-nowrap items-center text-white outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 rounded-pill relative group/sidebar-item",
 		children: t
 	});
 }
@@ -45,7 +45,7 @@ var d = ({ item: e, isActive: n = !1, isCollapsed: r = !1, anchorName: i, onItem
 					"aria-hidden": "true",
 					inert: !0,
 					children: /* @__PURE__ */ c("div", {
-						className: t("max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black", "[clip-path:circle(var(--sidebarItem_clipCircle))] transition-all duration-200 delay-100 ease-in-out group-focus-visible/sidebar-item:ring-8 group-focus-visible/sidebar-item:ring-lavender/20", n ? "[--sidebarItem_clipCircle:100%]" : "[--sidebarItem_clipCircle:0%]", "group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]", !n && "group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80"),
+						className: t("max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black", "[clip-path:circle(var(--sidebarItem_clipCircle))] transition-all duration-200 delay-100 ease-in-out group-focus-visible/sidebar-item:ring-4 group-focus-visible/sidebar-item:ring-black group-focus-visible/sidebar-item:ring-offset-2", n ? "[--sidebarItem_clipCircle:100%]" : "[--sidebarItem_clipCircle:0%]", "group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]", !n && "group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80"),
 						children: /* @__PURE__ */ c(s, {
 							name: e.icon,
 							className: "w-24"
@@ -124,7 +124,7 @@ var m = ({ items: i, children: a, className: o, activeIndex: s = 0, isCollapsed:
 				b,
 				x,
 				/* @__PURE__ */ c("button", {
-					className: "md:hidden w-48 h-48 focus-visible:ring-8 focus-visible:ring-lavender/20 rounded-full flex items-center justify-center text-white transition-opacity outline-none",
+					className: "md:hidden w-48 h-48 focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 rounded-full flex items-center justify-center text-white transition-opacity outline-none",
 					"aria-label": g ? "Open the navigation menu" : "Close the navigation menu",
 					onClick: v,
 					children: /* @__PURE__ */ c(r, { isActive: !g })
@@ -135,7 +135,7 @@ var m = ({ items: i, children: a, className: o, activeIndex: s = 0, isCollapsed:
 			children: [/* @__PURE__ */ l("aside", {
 				className: t("z-10 max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0", g ? "max-md:-translate-x-full" : "md:pe-24"),
 				children: [/* @__PURE__ */ c("button", {
-					className: "hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-8 focus-visible:ring-lavender/20 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]",
+					className: "hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]",
 					onClick: v,
 					"aria-label": g ? "Expand sidebar" : "Collapse sidebar",
 					style: { positionAnchor: `--sidebar-item-${s}` },

package/ui/SidebarLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarLayout.js","names":[],"sources":["../../lib/ui/SidebarLayout.tsx"],"sourcesContent":["import { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type Dispatch,\n  type PropsWithChildren,\n  type ReactNode,\n  type SetStateAction,\n  type MouseEvent,\n  useCallback,\n  useRef,\n  useState,\n} from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { HamburgerIcon } from './HamburgerIcon';\nimport { useSlots } from '@/ui/hooks/useSlots';\n\ntype SidebarSubItem = {\n  label: string;\n  href: string;\n} & ComponentPropsWithoutRef<'a'>;\n\ntype SidebarItem = {\n  label: string;\n  icon: IconicNames;\n  items?: SidebarSubItem[];\n} & ((ComponentPropsWithoutRef<'a'> & { href: string }) | ComponentPropsWithoutRef<'button'>);\n\ninterface SidebarItemProps {\n  item: SidebarItem;\n  isActive?: boolean;\n  isCollapsed?: boolean;\n  anchorName: string;\n  onItemClick?: () => void;\n}\n\nfunction Cta(item: PropsWithChildren<SidebarItem>) {\n  if ('href' in item) {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { children, icon, label, ...attrs } = item;\n\n    return (\n      <a\n        {...attrs}\n        className=\"flex whitespace-nowrap items-center text-white hover:text-saffron transition-colors outline-none focus-visible:bg-white/20 rounded-pill relative group/sidebar-item\"\n      >\n        {children}\n      </a>\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { children, icon, label, ...attrs } = item;\n\n  return (\n    <button\n      {...attrs}\n      className=\"flex whitespace-nowrap items-center text-white outline-none rounded-pill relative group/sidebar-item\"\n    >\n      {children}\n    </button>\n  );\n}\n\nconst SidebarItem = ({\n  item,\n  isActive = false,\n  isCollapsed = false,\n  anchorName,\n  onItemClick,\n}: SidebarItemProps) => {\n  const hasSubItems = item.items && item.items.length > 0;\n\n  return (\n    <div className=\"col-start-1 col-end-3\">\n      <Cta\n        {...item}\n        onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          if (hasSubItems && onItemClick) {\n            e.preventDefault();\n            onItemClick();\n          }\n        }}\n        style={{ anchorName: `--${anchorName}` } as CSSProperties}\n      >\n        <div className=\"relative\">\n          <div\n            className={twMerge('aspect-square w-48 rounded-full flex items-center justify-center')}\n          >\n            <Icon name={item.icon} className=\"w-24 text-white\" />\n          </div>\n          <div className=\"absolute inset-0 pointer-events-none\" aria-hidden=\"true\" inert>\n            <div\n              className={twMerge(\n                'max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black',\n                '[clip-path:circle(var(--sidebarItem_clipCircle))] transition-all duration-200 delay-100 ease-in-out group-focus-visible/sidebar-item:ring-8 group-focus-visible/sidebar-item:ring-lavender/20',\n                isActive ? '[--sidebarItem_clipCircle:100%]' : '[--sidebarItem_clipCircle:0%]',\n                'group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]',\n                !isActive &&\n                  'group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80',\n              )}\n            >\n              <Icon name={item.icon} className=\"w-24\" />\n            </div>\n          </div>\n        </div>\n        <span\n          className={twMerge(\n            'transition-all duration-300 ease-in-out whitespace-nowrap ps-8 pe-12 truncate md:max-w-240',\n            isCollapsed ? 'opacity-0' : 'opacity-100',\n          )}\n        >\n          {item.label}\n        </span>\n      </Cta>\n      {hasSubItems && (\n        <div\n          className={twMerge(\n            'grid transition-[grid-template-rows,opacity] duration-300 ease-in-out overflow-hidden max-md:grid-rows-[1fr] max-md:opacity-100',\n            isCollapsed ? 'grid-rows-[0fr] opacity-0' : 'grid-rows-[1fr] opacity-100 pb-12',\n          )}\n          inert={isCollapsed}\n        >\n          <div className=\"outline-none relative overflow-hidden flex flex-col gap-8 ps-48 font-normal\">\n            {item.items!.map((subItem, subIndex) => (\n              <a\n                key={subIndex}\n                href={subItem.href}\n                className=\"text-white hover:text-saffron transition-colors text-b4 whitespace-nowrap outline-none focus-visible:bg-white/20 ps-8 pe-16 rounded-pill\"\n              >\n                {subItem.label}\n              </a>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const CollapseIndicatorSVG = ({ isCollapsed }: { isCollapsed: boolean }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"48\">\n    <g fill=\"none\" fillRule=\"nonzero\">\n      <path\n        fill=\"#FFF\"\n        d=\"M10.008 48v-1.829c0-4.116-1.722-8.045-4.75-10.835-6.331-5.837-6.331-15.835 0-21.672a14.736 14.736 0 0 0 4.75-10.835V0h27.417v48H10.008Z\"\n      />\n      <g\n        className={twMerge(\n          'transition-transform duration-500 ease-in-out origin-center [transform-box:fill-box]',\n          isCollapsed ? 'rotate-180' : 'rotate-0',\n        )}\n      >\n        <path\n          fill=\"#1E2643\"\n          d=\"M19.686 12.547c6.617 0 12 5.383 12 12s-5.383 12-12 12-12-5.383-12-12 5.383-12 12-12Zm0 1.986c-5.522 0-10.015 4.492-10.015 10.014 0 5.523 4.493 10.015 10.016 10.015 5.52 0 10.012-4.492 10.012-10.015 0-5.522-4.492-10.014-10.012-10.014Zm-2.097 4.382c.376-.366 1.032-.366 1.409 0l5.037 4.895a.948.948 0 0 1 0 1.37l-5.037 4.894a1.002 1.002 0 0 1-.705.285 1 1 0 0 1-.704-.285.947.947 0 0 1 0-1.369l4.332-4.21-4.332-4.21a.95.95 0 0 1 0-1.37Z\"\n        />\n      </g>\n    </g>\n  </svg>\n);\n\nexport interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {\n  items: SidebarItem[];\n  children: ReactNode;\n  activeIndex?: number;\n  isCollapsed?: boolean;\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n}\n\nfunction useSidebarLayout({\n  isCollapsed: initialCollapsedValue,\n  onCollapsedChange,\n}: {\n  isCollapsed?: boolean;\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n}) {\n  const [isCollapsed, setIsCollapsedState] = useState(() => initialCollapsedValue ?? true);\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  const setIsCollapsed = useCallback<Dispatch<SetStateAction<boolean>>>(\n    (value) => {\n      setIsCollapsedState((previousState) => {\n        const nextState = typeof value === 'function' ? value(previousState) : value;\n        if (nextState !== previousState) {\n          onCollapsedChange?.(nextState);\n        }\n        return nextState;\n      });\n    },\n    [onCollapsedChange],\n  );\n\n  const handleToggleCollapse = useCallback(() => {\n    setIsCollapsed((prev) => !prev);\n  }, [setIsCollapsed]);\n\n  return {\n    isCollapsed,\n    setIsCollapsed,\n    overlayRef,\n    handleToggleCollapse,\n  };\n}\n\nexport const SidebarLayout = ({\n  items,\n  children: initialChildren,\n  className,\n  activeIndex = 0,\n  isCollapsed: initialCollapsedValue,\n  onCollapsedChange,\n  ...attrs\n}: SidebarLayoutProps) => {\n  const { isCollapsed, setIsCollapsed, handleToggleCollapse } = useSidebarLayout({\n    isCollapsed: initialCollapsedValue,\n    onCollapsedChange,\n  });\n  const {\n    'header-logo': headerLogo,\n    header,\n    ['header-actions']: headerActions,\n    children,\n  } = useSlots(initialChildren, ['header-logo', 'header', 'header-actions']);\n\n  return (\n    <div\n      data-name=\"SidebarLayout\"\n      className={clsx('h-screen overflow-clip flex flex-col bg-ultramarine', className)}\n      {...attrs}\n    >\n      {/* Header */}\n      <header className=\"bg-ultramarine h-64 flex items-center justify-between gap-8 p-8 ps-20 md:px-24 text-white shrink-0\">\n        {headerLogo}\n        {header}\n        {headerActions}\n        <button\n          className=\"md:hidden w-48 h-48 focus-visible:ring-8 focus-visible:ring-lavender/20 rounded-full flex items-center justify-center text-white transition-opacity outline-none\"\n          aria-label={isCollapsed ? 'Open the navigation menu' : 'Close the navigation menu'}\n          onClick={handleToggleCollapse}\n        >\n          <HamburgerIcon isActive={!isCollapsed} />\n        </button>\n      </header>\n\n      {/* Main container with sidebar and content */}\n      <div className=\"flex h-full overflow-x-clip overflow-y-hidden\">\n        {/* Sidebar */}\n        <aside\n          className={twMerge(\n            'z-10 max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0',\n            isCollapsed ? 'max-md:-translate-x-full' : 'md:pe-24',\n          )}\n        >\n          {/* Indicator */}\n          <button\n            className=\"hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-8 focus-visible:ring-lavender/20 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]\"\n            onClick={handleToggleCollapse}\n            aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n            style={\n              {\n                positionAnchor: `--sidebar-item-${activeIndex}`,\n              } as CSSProperties\n            }\n          >\n            <CollapseIndicatorSVG isCollapsed={isCollapsed} />\n          </button>\n\n          <nav\n            className={twMerge(\n              'max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:gap-y-20 grid overflow-hidden text-b3 font-semibold relative transition-grid-template-columns duration-300 ease-in-out',\n              isCollapsed ? 'grid-cols-[48px_0fr]' : 'grid-cols-[48px_1fr]',\n            )}\n          >\n            {items.map((item, index) => (\n              <SidebarItem\n                key={index}\n                item={item}\n                isActive={index === activeIndex}\n                isCollapsed={isCollapsed}\n                anchorName={`sidebar-item-${index}`}\n                onItemClick={() => {\n                  if (item.items && item.items.length > 0) {\n                    setIsCollapsed((prev) => (prev ? false : prev));\n                  }\n                }}\n              />\n            ))}\n          </nav>\n        </aside>\n\n        <main className=\"w-full md:min-w-0 md:w-[calc(100%-108px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0\">\n          {children}\n        </main>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"SidebarLayout.js","names":[],"sources":["../../lib/ui/SidebarLayout.tsx"],"sourcesContent":["import { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type Dispatch,\n  type PropsWithChildren,\n  type ReactNode,\n  type SetStateAction,\n  type MouseEvent,\n  useCallback,\n  useRef,\n  useState,\n} from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { HamburgerIcon } from './HamburgerIcon';\nimport { useSlots } from '@/ui/hooks/useSlots';\n\ntype SidebarSubItem = {\n  label: string;\n  href: string;\n} & ComponentPropsWithoutRef<'a'>;\n\ntype SidebarItem = {\n  label: string;\n  icon: IconicNames;\n  items?: SidebarSubItem[];\n} & ((ComponentPropsWithoutRef<'a'> & { href: string }) | ComponentPropsWithoutRef<'button'>);\n\ninterface SidebarItemProps {\n  item: SidebarItem;\n  isActive?: boolean;\n  isCollapsed?: boolean;\n  anchorName: string;\n  onItemClick?: () => void;\n}\n\nfunction Cta(item: PropsWithChildren<SidebarItem>) {\n  if ('href' in item) {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { children, icon, label, ...attrs } = item;\n\n    return (\n      <a\n        {...attrs}\n        className=\"flex whitespace-nowrap items-center text-white hover:text-saffron transition-colors outline-none focus-visible:bg-white/20 rounded-pill relative group/sidebar-item\"\n      >\n        {children}\n      </a>\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { children, icon, label, ...attrs } = item;\n\n  return (\n    <button\n      {...attrs}\n      className=\"flex whitespace-nowrap items-center text-white outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 rounded-pill relative group/sidebar-item\"\n    >\n      {children}\n    </button>\n  );\n}\n\nconst SidebarItem = ({\n  item,\n  isActive = false,\n  isCollapsed = false,\n  anchorName,\n  onItemClick,\n}: SidebarItemProps) => {\n  const hasSubItems = item.items && item.items.length > 0;\n\n  return (\n    <div className=\"col-start-1 col-end-3\">\n      <Cta\n        {...item}\n        onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          if (hasSubItems && onItemClick) {\n            e.preventDefault();\n            onItemClick();\n          }\n        }}\n        style={{ anchorName: `--${anchorName}` } as CSSProperties}\n      >\n        <div className=\"relative\">\n          <div\n            className={twMerge('aspect-square w-48 rounded-full flex items-center justify-center')}\n          >\n            <Icon name={item.icon} className=\"w-24 text-white\" />\n          </div>\n          <div className=\"absolute inset-0 pointer-events-none\" aria-hidden=\"true\" inert>\n            <div\n              className={twMerge(\n                'max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black',\n                '[clip-path:circle(var(--sidebarItem_clipCircle))] transition-all duration-200 delay-100 ease-in-out group-focus-visible/sidebar-item:ring-4 group-focus-visible/sidebar-item:ring-black group-focus-visible/sidebar-item:ring-offset-2',\n                isActive ? '[--sidebarItem_clipCircle:100%]' : '[--sidebarItem_clipCircle:0%]',\n                'group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]',\n                !isActive &&\n                  'group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80',\n              )}\n            >\n              <Icon name={item.icon} className=\"w-24\" />\n            </div>\n          </div>\n        </div>\n        <span\n          className={twMerge(\n            'transition-all duration-300 ease-in-out whitespace-nowrap ps-8 pe-12 truncate md:max-w-240',\n            isCollapsed ? 'opacity-0' : 'opacity-100',\n          )}\n        >\n          {item.label}\n        </span>\n      </Cta>\n      {hasSubItems && (\n        <div\n          className={twMerge(\n            'grid transition-[grid-template-rows,opacity] duration-300 ease-in-out overflow-hidden max-md:grid-rows-[1fr] max-md:opacity-100',\n            isCollapsed ? 'grid-rows-[0fr] opacity-0' : 'grid-rows-[1fr] opacity-100 pb-12',\n          )}\n          inert={isCollapsed}\n        >\n          <div className=\"outline-none relative overflow-hidden flex flex-col gap-8 ps-48 font-normal\">\n            {item.items!.map((subItem, subIndex) => (\n              <a\n                key={subIndex}\n                href={subItem.href}\n                className=\"text-white hover:text-saffron transition-colors text-b4 whitespace-nowrap outline-none focus-visible:bg-white/20 ps-8 pe-16 rounded-pill\"\n              >\n                {subItem.label}\n              </a>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const CollapseIndicatorSVG = ({ isCollapsed }: { isCollapsed: boolean }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"48\">\n    <g fill=\"none\" fillRule=\"nonzero\">\n      <path\n        fill=\"#FFF\"\n        d=\"M10.008 48v-1.829c0-4.116-1.722-8.045-4.75-10.835-6.331-5.837-6.331-15.835 0-21.672a14.736 14.736 0 0 0 4.75-10.835V0h27.417v48H10.008Z\"\n      />\n      <g\n        className={twMerge(\n          'transition-transform duration-500 ease-in-out origin-center [transform-box:fill-box]',\n          isCollapsed ? 'rotate-180' : 'rotate-0',\n        )}\n      >\n        <path\n          fill=\"#1E2643\"\n          d=\"M19.686 12.547c6.617 0 12 5.383 12 12s-5.383 12-12 12-12-5.383-12-12 5.383-12 12-12Zm0 1.986c-5.522 0-10.015 4.492-10.015 10.014 0 5.523 4.493 10.015 10.016 10.015 5.52 0 10.012-4.492 10.012-10.015 0-5.522-4.492-10.014-10.012-10.014Zm-2.097 4.382c.376-.366 1.032-.366 1.409 0l5.037 4.895a.948.948 0 0 1 0 1.37l-5.037 4.894a1.002 1.002 0 0 1-.705.285 1 1 0 0 1-.704-.285.947.947 0 0 1 0-1.369l4.332-4.21-4.332-4.21a.95.95 0 0 1 0-1.37Z\"\n        />\n      </g>\n    </g>\n  </svg>\n);\n\nexport interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {\n  items: SidebarItem[];\n  children: ReactNode;\n  activeIndex?: number;\n  isCollapsed?: boolean;\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n}\n\nfunction useSidebarLayout({\n  isCollapsed: initialCollapsedValue,\n  onCollapsedChange,\n}: {\n  isCollapsed?: boolean;\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n}) {\n  const [isCollapsed, setIsCollapsedState] = useState(() => initialCollapsedValue ?? true);\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  const setIsCollapsed = useCallback<Dispatch<SetStateAction<boolean>>>(\n    (value) => {\n      setIsCollapsedState((previousState) => {\n        const nextState = typeof value === 'function' ? value(previousState) : value;\n        if (nextState !== previousState) {\n          onCollapsedChange?.(nextState);\n        }\n        return nextState;\n      });\n    },\n    [onCollapsedChange],\n  );\n\n  const handleToggleCollapse = useCallback(() => {\n    setIsCollapsed((prev) => !prev);\n  }, [setIsCollapsed]);\n\n  return {\n    isCollapsed,\n    setIsCollapsed,\n    overlayRef,\n    handleToggleCollapse,\n  };\n}\n\nexport const SidebarLayout = ({\n  items,\n  children: initialChildren,\n  className,\n  activeIndex = 0,\n  isCollapsed: initialCollapsedValue,\n  onCollapsedChange,\n  ...attrs\n}: SidebarLayoutProps) => {\n  const { isCollapsed, setIsCollapsed, handleToggleCollapse } = useSidebarLayout({\n    isCollapsed: initialCollapsedValue,\n    onCollapsedChange,\n  });\n  const {\n    'header-logo': headerLogo,\n    header,\n    ['header-actions']: headerActions,\n    children,\n  } = useSlots(initialChildren, ['header-logo', 'header', 'header-actions']);\n\n  return (\n    <div\n      data-name=\"SidebarLayout\"\n      className={clsx('h-screen overflow-clip flex flex-col bg-ultramarine', className)}\n      {...attrs}\n    >\n      {/* Header */}\n      <header className=\"bg-ultramarine h-64 flex items-center justify-between gap-8 p-8 ps-20 md:px-24 text-white shrink-0\">\n        {headerLogo}\n        {header}\n        {headerActions}\n        <button\n          className=\"md:hidden w-48 h-48 focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 rounded-full flex items-center justify-center text-white transition-opacity outline-none\"\n          aria-label={isCollapsed ? 'Open the navigation menu' : 'Close the navigation menu'}\n          onClick={handleToggleCollapse}\n        >\n          <HamburgerIcon isActive={!isCollapsed} />\n        </button>\n      </header>\n\n      {/* Main container with sidebar and content */}\n      <div className=\"flex h-full overflow-x-clip overflow-y-hidden\">\n        {/* Sidebar */}\n        <aside\n          className={twMerge(\n            'z-10 max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0',\n            isCollapsed ? 'max-md:-translate-x-full' : 'md:pe-24',\n          )}\n        >\n          {/* Indicator */}\n          <button\n            className=\"hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]\"\n            onClick={handleToggleCollapse}\n            aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n            style={\n              {\n                positionAnchor: `--sidebar-item-${activeIndex}`,\n              } as CSSProperties\n            }\n          >\n            <CollapseIndicatorSVG isCollapsed={isCollapsed} />\n          </button>\n\n          <nav\n            className={twMerge(\n              'max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:gap-y-20 grid overflow-hidden text-b3 font-semibold relative transition-grid-template-columns duration-300 ease-in-out',\n              isCollapsed ? 'grid-cols-[48px_0fr]' : 'grid-cols-[48px_1fr]',\n            )}\n          >\n            {items.map((item, index) => (\n              <SidebarItem\n                key={index}\n                item={item}\n                isActive={index === activeIndex}\n                isCollapsed={isCollapsed}\n                anchorName={`sidebar-item-${index}`}\n                onItemClick={() => {\n                  if (item.items && item.items.length > 0) {\n                    setIsCollapsed((prev) => (prev ? false : prev));\n                  }\n                }}\n              />\n            ))}\n          </nav>\n        </aside>\n\n        <main className=\"w-full md:min-w-0 md:w-[calc(100%-108px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0\">\n          {children}\n        </main>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/ui/Toggle.js

@@ -25,7 +25,7 @@ var o = ({ className: o, index: s = 0, items: c = [], onClick: l, ...u }) => {
 					className: e(a.className, "rounded-pill relative cursor-pointer overflow-hidden px-20 py-8 transition-colors", {
 						active: s,
 						[t(r)]: s
-					}, "before:absolute before:inset-0 before:-z-1 before:transition-colors hover:before:bg-pearl focus-visible:before:bg-pearl"),
+					}, "before:absolute before:inset-0 before:-z-1 before:transition-colors hover:before:bg-pearl outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2"),
 					key: a.id,
 					onClick: () => {
 						f(o), l?.(o);

package/ui/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":[],"sources":["../../lib/ui/Toggle.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, CSSProperties, FunctionComponent, ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { getComplementaryTextColor } from './helpers/colors/colors';\nimport type { Colors } from './types/Colors';\n\ninterface Item extends Omit<ComponentPropsWithoutRef<'button'>, 'children'> {\n  color: Colors;\n  id: string;\n  label: ReactNode;\n}\n\nexport interface ToggleProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'onClick'> {\n  index?: number;\n  items: Item[];\n  onClick?: (index: number) => void;\n}\n\nexport const Toggle: FunctionComponent<ToggleProps> = ({\n  className,\n  index = 0,\n  items = [],\n  onClick,\n  ...attrs\n}) => {\n  const [active, setActive] = useState(index);\n\n  useEffect(() => {\n    setActive(index);\n  }, [index]);\n\n  if (!items.length) {\n    return null;\n  }\n\n  const style = {\n    '--toggle-color': `var(--color-${items[active].color || 'black'})`,\n  } as CSSProperties;\n\n  return (\n    <div\n      {...attrs}\n      className={clsx('rounded-pill text-b3 border p-4 font-bold', className)}\n      role=\"group\"\n    >\n      <div\n        className={clsx(\n          'toggle relative isolate flex',\n          'before:rounded-pill before:absolute before:z-0 before:bg-(--toggle-color) before:transition-all before:duration-300 before:ease-out',\n        )}\n        style={style}\n      >\n        {items.map(({ color, label, ...item }, i) => {\n          const isActive = active === i;\n\n          return (\n            <button\n              {...item}\n              aria-pressed={isActive}\n              className={clsx(\n                item.className,\n                'rounded-pill relative cursor-pointer overflow-hidden px-20 py-8 transition-colors',\n                { active: isActive, [getComplementaryTextColor(color)]: isActive },\n                'before:absolute before:inset-0 before:-z-1 before:transition-colors hover:before:bg-pearl focus-visible:before:bg-pearl',\n              )}\n              key={item.id}\n              onClick={() => {\n                setActive(i);\n                onClick?.(i);\n              }}\n              type=\"button\"\n            >\n              {label}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAoBA,IAAa,KAA0C,EACrD,cACA,WAAQ,GACR,WAAQ,EAAE,EACV,YACA,GAAG,QACC;CACJ,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAM;AAM3C,KAJA,QAAgB;AACd,IAAU,EAAM;IACf,CAAC,EAAM,CAAC,EAEP,CAAC,EAAM,OACT,QAAO;CAGT,IAAM,IAAQ,EACZ,kBAAkB,eAAe,EAAM,GAAQ,SAAS,QAAQ,IACjE;AAED,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EAAK,6CAA6C,EAAU;EACvE,MAAK;YAEL,kBAAC,OAAD;GACE,WAAW,EACT,gCACA,sIACD;GACM;aAEN,EAAM,KAAK,EAAE,UAAO,UAAO,GAAG,KAAQ,MAAM;IAC3C,IAAM,IAAW,MAAW;AAE5B,WACE,kBAAC,UAAD;KACE,GAAI;KACJ,gBAAc;KACd,WAAW,EACT,EAAK,WACL,qFACA;MAAE,QAAQ;OAAW,EAA0B,EAAM,GAAG;MAAU,EAClE,0HACD;KACD,KAAK,EAAK;KACV,eAAe;AAEb,MADA,EAAU,EAAE,EACZ,IAAU,EAAE;;KAEd,MAAK;KAGE,EADN,EACM;;GAGT,CAAA;EACF,CAAA"}
+{"version":3,"file":"Toggle.js","names":[],"sources":["../../lib/ui/Toggle.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, CSSProperties, FunctionComponent, ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { getComplementaryTextColor } from './helpers/colors/colors';\nimport type { Colors } from './types/Colors';\n\ninterface Item extends Omit<ComponentPropsWithoutRef<'button'>, 'children'> {\n  color: Colors;\n  id: string;\n  label: ReactNode;\n}\n\nexport interface ToggleProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'onClick'> {\n  index?: number;\n  items: Item[];\n  onClick?: (index: number) => void;\n}\n\nexport const Toggle: FunctionComponent<ToggleProps> = ({\n  className,\n  index = 0,\n  items = [],\n  onClick,\n  ...attrs\n}) => {\n  const [active, setActive] = useState(index);\n\n  useEffect(() => {\n    setActive(index);\n  }, [index]);\n\n  if (!items.length) {\n    return null;\n  }\n\n  const style = {\n    '--toggle-color': `var(--color-${items[active].color || 'black'})`,\n  } as CSSProperties;\n\n  return (\n    <div\n      {...attrs}\n      className={clsx('rounded-pill text-b3 border p-4 font-bold', className)}\n      role=\"group\"\n    >\n      <div\n        className={clsx(\n          'toggle relative isolate flex',\n          'before:rounded-pill before:absolute before:z-0 before:bg-(--toggle-color) before:transition-all before:duration-300 before:ease-out',\n        )}\n        style={style}\n      >\n        {items.map(({ color, label, ...item }, i) => {\n          const isActive = active === i;\n\n          return (\n            <button\n              {...item}\n              aria-pressed={isActive}\n              className={clsx(\n                item.className,\n                'rounded-pill relative cursor-pointer overflow-hidden px-20 py-8 transition-colors',\n                { active: isActive, [getComplementaryTextColor(color)]: isActive },\n                'before:absolute before:inset-0 before:-z-1 before:transition-colors hover:before:bg-pearl outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n              )}\n              key={item.id}\n              onClick={() => {\n                setActive(i);\n                onClick?.(i);\n              }}\n              type=\"button\"\n            >\n              {label}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAoBA,IAAa,KAA0C,EACrD,cACA,WAAQ,GACR,WAAQ,EAAE,EACV,YACA,GAAG,QACC;CACJ,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAM;AAM3C,KAJA,QAAgB;AACd,IAAU,EAAM;IACf,CAAC,EAAM,CAAC,EAEP,CAAC,EAAM,OACT,QAAO;CAGT,IAAM,IAAQ,EACZ,kBAAkB,eAAe,EAAM,GAAQ,SAAS,QAAQ,IACjE;AAED,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EAAK,6CAA6C,EAAU;EACvE,MAAK;YAEL,kBAAC,OAAD;GACE,WAAW,EACT,gCACA,sIACD;GACM;aAEN,EAAM,KAAK,EAAE,UAAO,UAAO,GAAG,KAAQ,MAAM;IAC3C,IAAM,IAAW,MAAW;AAE5B,WACE,kBAAC,UAAD;KACE,GAAI;KACJ,gBAAc;KACd,WAAW,EACT,EAAK,WACL,qFACA;MAAE,QAAQ;OAAW,EAA0B,EAAM,GAAG;MAAU,EAClE,mLACD;KACD,KAAK,EAAK;KACV,eAAe;AAEb,MADA,EAAU,EAAE,EACZ,IAAU,EAAE;;KAEd,MAAK;KAGE,EADN,EACM;;GAGT,CAAA;EACF,CAAA"}

package/ui/buttons/Button.type.js

@@ -29,7 +29,7 @@ var t = {
 	primary: "button-medium",
 	secondary: "button-secondary",
 	tertiary: "button-tertiary"
-}, d = (e) => e != null && e in u, f = (e) => d(e) ? u[e] : u.medium, p = ({ color: t, size: n, theme: i, variant: a }) => e("flex", "button", o(i), r(t), l(a), f(n));
+}, d = (e) => e != null && e in u, f = (e) => d(e) ? u[e] : u.medium, p = ({ color: t, size: n, theme: i, variant: a }) => e("flex", "button", "outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", o(i), r(t), l(a), f(n));
 //#endregion
 export { t as BUTTON_COLORS, u as BUTTON_SIZES, i as BUTTON_THEMES, s as BUTTON_VARIANTS, p as getButtonClasses };
 

package/ui/buttons/Button.type.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.type.js","names":[],"sources":["../../../lib/ui/buttons/Button.type.ts"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { IconicNames } from '@clubmed/trident-icons';\nimport type { Colors } from '../types/Colors';\nimport type { PropsWithChildren } from 'react';\n\nexport interface ButtonProps extends PropsWithChildren {\n  color?: Colors;\n  icon?: IconicNames;\n  iconWidth?: string;\n  size?: 'small' | 'medium' | 'large' | 'primary' | 'secondary' | 'tertiary';\n  theme?: 'outline' | 'solid';\n  variant?: 'circle' | 'pill';\n}\n\ntype Params = {\n  color: ButtonProps['color'];\n  size: ButtonProps['size'];\n  theme: ButtonProps['theme'];\n  variant: ButtonProps['variant'];\n};\n\nexport const BUTTON_COLORS = {\n  black: 'button-black',\n  green: 'button-green',\n  lavender: 'button-lavender',\n  lightSand: 'button-lightSand',\n  marygold: 'button-marygold',\n  pearl: 'button-pearl',\n  orange: 'button-orange',\n  red: 'button-red',\n  saffron: 'button-saffron',\n  sand: 'button-sand',\n  sienna: 'button-sienna',\n  ultramarine: 'button-ultramarine',\n  verdigris: 'button-verdigris',\n  wave: 'button-wave',\n  white: 'button-white',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst colorGuard = (color: string | undefined): color is keyof typeof BUTTON_COLORS => {\n  return color != undefined && color in BUTTON_COLORS;\n};\n\nconst getButtonColor = (color: string | undefined) => {\n  if (colorGuard(color)) {\n    return BUTTON_COLORS[color];\n  }\n\n  return BUTTON_COLORS.saffron;\n};\n\nexport const BUTTON_THEMES = {\n  outline: 'button-outline',\n  solid: 'button-solid',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst themeGuard = (color: string | undefined): color is keyof typeof BUTTON_THEMES => {\n  return color != undefined && color in BUTTON_THEMES;\n};\n\nconst getButtonTheme = (theme: string | undefined) => {\n  if (themeGuard(theme)) {\n    return BUTTON_THEMES[theme];\n  }\n\n  return BUTTON_THEMES.solid;\n};\n\nexport const BUTTON_VARIANTS = {\n  circle: 'button-circle',\n  pill: 'button-pill',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst variantGuard = (color: string | undefined): color is keyof typeof BUTTON_VARIANTS => {\n  return color != undefined && color in BUTTON_VARIANTS;\n};\n\nconst getButtonVariant = (variant: string | undefined) => {\n  if (variantGuard(variant)) {\n    return BUTTON_VARIANTS[variant];\n  }\n\n  return BUTTON_VARIANTS.pill;\n};\n\nexport const BUTTON_SIZES = {\n  small: 'button-small',\n  medium: 'button-medium',\n  large: 'button-large',\n  primary: 'button-medium',\n  secondary: 'button-secondary',\n  tertiary: 'button-tertiary',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst sizeGuard = (color: string | undefined): color is keyof typeof BUTTON_SIZES => {\n  return color != undefined && color in BUTTON_SIZES;\n};\n\nconst getButtonSize = (size: ButtonProps['size']) => {\n  if (sizeGuard(size)) {\n    return BUTTON_SIZES[size];\n  }\n\n  return BUTTON_SIZES.medium;\n};\n\nexport const getButtonClasses = ({ color, size, theme, variant }: Params) => {\n  /* keep the \"flex\" class outside of \"button-*\" so that it can be overridden in responsive */\n  return clsx(\n    'flex',\n    'button',\n    getButtonTheme(theme),\n    getButtonColor(color),\n    getButtonVariant(variant),\n    getButtonSize(size),\n  );\n};\n"],"mappings":";;AAsBA,IAAa,IAAgB;CAC3B,OAAO;CACP,OAAO;CACP,UAAU;CACV,WAAW;CACX,UAAU;CACV,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,MAAM;CACN,QAAQ;CACR,aAAa;CACb,WAAW;CACX,MAAM;CACN,OAAO;CACR,EAEK,KAAc,MACX,KAAS,QAAa,KAAS,GAGlC,KAAkB,MAClB,EAAW,EAAM,GACZ,EAAc,KAGhB,EAAc,SAGV,IAAgB;CAC3B,SAAS;CACT,OAAO;CACR,EAEK,KAAc,MACX,KAAS,QAAa,KAAS,GAGlC,KAAkB,MAClB,EAAW,EAAM,GACZ,EAAc,KAGhB,EAAc,OAGV,IAAkB;CAC7B,QAAQ;CACR,MAAM;CACP,EAEK,KAAgB,MACb,KAAS,QAAa,KAAS,GAGlC,KAAoB,MACpB,EAAa,EAAQ,GAChB,EAAgB,KAGlB,EAAgB,MAGZ,IAAe;CAC1B,OAAO;CACP,QAAQ;CACR,OAAO;CACP,SAAS;CACT,WAAW;CACX,UAAU;CACX,EAEK,KAAa,MACV,KAAS,QAAa,KAAS,GAGlC,KAAiB,MACjB,EAAU,EAAK,GACV,EAAa,KAGf,EAAa,QAGT,KAAoB,EAAE,UAAO,SAAM,UAAO,iBAE9C,EACL,QACA,UACA,EAAe,EAAM,EACrB,EAAe,EAAM,EACrB,EAAiB,EAAQ,EACzB,EAAc,EAAK,CACpB"}
+{"version":3,"file":"Button.type.js","names":[],"sources":["../../../lib/ui/buttons/Button.type.ts"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { IconicNames } from '@clubmed/trident-icons';\nimport type { Colors } from '../types/Colors';\nimport type { PropsWithChildren } from 'react';\n\nexport interface ButtonProps extends PropsWithChildren {\n  color?: Colors;\n  icon?: IconicNames;\n  iconWidth?: string;\n  size?: 'small' | 'medium' | 'large' | 'primary' | 'secondary' | 'tertiary';\n  theme?: 'outline' | 'solid';\n  variant?: 'circle' | 'pill';\n}\n\ntype Params = {\n  color: ButtonProps['color'];\n  size: ButtonProps['size'];\n  theme: ButtonProps['theme'];\n  variant: ButtonProps['variant'];\n};\n\nexport const BUTTON_COLORS = {\n  black: 'button-black',\n  green: 'button-green',\n  lavender: 'button-lavender',\n  lightSand: 'button-lightSand',\n  marygold: 'button-marygold',\n  pearl: 'button-pearl',\n  orange: 'button-orange',\n  red: 'button-red',\n  saffron: 'button-saffron',\n  sand: 'button-sand',\n  sienna: 'button-sienna',\n  ultramarine: 'button-ultramarine',\n  verdigris: 'button-verdigris',\n  wave: 'button-wave',\n  white: 'button-white',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst colorGuard = (color: string | undefined): color is keyof typeof BUTTON_COLORS => {\n  return color != undefined && color in BUTTON_COLORS;\n};\n\nconst getButtonColor = (color: string | undefined) => {\n  if (colorGuard(color)) {\n    return BUTTON_COLORS[color];\n  }\n\n  return BUTTON_COLORS.saffron;\n};\n\nexport const BUTTON_THEMES = {\n  outline: 'button-outline',\n  solid: 'button-solid',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst themeGuard = (color: string | undefined): color is keyof typeof BUTTON_THEMES => {\n  return color != undefined && color in BUTTON_THEMES;\n};\n\nconst getButtonTheme = (theme: string | undefined) => {\n  if (themeGuard(theme)) {\n    return BUTTON_THEMES[theme];\n  }\n\n  return BUTTON_THEMES.solid;\n};\n\nexport const BUTTON_VARIANTS = {\n  circle: 'button-circle',\n  pill: 'button-pill',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst variantGuard = (color: string | undefined): color is keyof typeof BUTTON_VARIANTS => {\n  return color != undefined && color in BUTTON_VARIANTS;\n};\n\nconst getButtonVariant = (variant: string | undefined) => {\n  if (variantGuard(variant)) {\n    return BUTTON_VARIANTS[variant];\n  }\n\n  return BUTTON_VARIANTS.pill;\n};\n\nexport const BUTTON_SIZES = {\n  small: 'button-small',\n  medium: 'button-medium',\n  large: 'button-large',\n  primary: 'button-medium',\n  secondary: 'button-secondary',\n  tertiary: 'button-tertiary',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst sizeGuard = (color: string | undefined): color is keyof typeof BUTTON_SIZES => {\n  return color != undefined && color in BUTTON_SIZES;\n};\n\nconst getButtonSize = (size: ButtonProps['size']) => {\n  if (sizeGuard(size)) {\n    return BUTTON_SIZES[size];\n  }\n\n  return BUTTON_SIZES.medium;\n};\n\nexport const getButtonClasses = ({ color, size, theme, variant }: Params) => {\n  /* keep the \"flex\" class outside of \"button-*\" so that it can be overridden in responsive */\n  return clsx(\n    'flex',\n    'button',\n    'outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n    getButtonTheme(theme),\n    getButtonColor(color),\n    getButtonVariant(variant),\n    getButtonSize(size),\n  );\n};\n"],"mappings":";;AAsBA,IAAa,IAAgB;CAC3B,OAAO;CACP,OAAO;CACP,UAAU;CACV,WAAW;CACX,UAAU;CACV,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,MAAM;CACN,QAAQ;CACR,aAAa;CACb,WAAW;CACX,MAAM;CACN,OAAO;CACR,EAEK,KAAc,MACX,KAAS,QAAa,KAAS,GAGlC,KAAkB,MAClB,EAAW,EAAM,GACZ,EAAc,KAGhB,EAAc,SAGV,IAAgB;CAC3B,SAAS;CACT,OAAO;CACR,EAEK,KAAc,MACX,KAAS,QAAa,KAAS,GAGlC,KAAkB,MAClB,EAAW,EAAM,GACZ,EAAc,KAGhB,EAAc,OAGV,IAAkB;CAC7B,QAAQ;CACR,MAAM;CACP,EAEK,KAAgB,MACb,KAAS,QAAa,KAAS,GAGlC,KAAoB,MACpB,EAAa,EAAQ,GAChB,EAAgB,KAGlB,EAAgB,MAGZ,IAAe;CAC1B,OAAO;CACP,QAAQ;CACR,OAAO;CACP,SAAS;CACT,WAAW;CACX,UAAU;CACX,EAEK,KAAa,MACV,KAAS,QAAa,KAAS,GAGlC,KAAiB,MACjB,EAAU,EAAK,GACV,EAAa,KAGf,EAAa,QAGT,KAAoB,EAAE,UAAO,SAAM,UAAO,iBAE9C,EACL,QACA,UACA,0FACA,EAAe,EAAM,EACrB,EAAe,EAAM,EACrB,EAAiB,EAAQ,EACzB,EAAc,EAAK,CACpB"}

package/ui/forms/CheckboxSelect.js

@@ -64,7 +64,7 @@ function d({ id: d, name: f, label: p, description: m, placeholder: h = "Select.
 				"aria-disabled": H,
 				disabled: H,
 				onClick: M,
-				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none text-left flex items-center justify-between gap-8", {
+				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 text-left flex items-center justify-between gap-8", {
 					"bg-white text-black border-middleGrey focus:border-black active:border-black": !H && !B && !V,
 					"bg-pearl border-middleGrey text-grey": H,
 					"border-red bg-white": B,

package/ui/forms/CheckboxSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxSelect.js","names":[],"sources":["../../../lib/ui/forms/CheckboxSelect.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState, useEffect, type ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { Icon } from '@clubmed/trident-icons';\nimport { Checkbox } from './checkboxes/Checkbox';\nimport type { ValidationStatus } from '../hooks/useInternalStatus';\nimport { FormControl } from './FormControl';\nimport { useDropdown } from '../Dropdown';\n\nfunction OptionLabel({ children, selected }: { children: ReactNode; selected: boolean }) {\n  return (\n    <span\n      ref={(el) => {\n        if (el) el.title = el.textContent ?? '';\n      }}\n      className={clsx('text-b3 text-black truncate', { 'font-semibold': selected })}\n    >\n      {children}\n    </span>\n  );\n}\n\nexport interface CheckboxSelectOption<Value = string> {\n  value: Value;\n  label: ReactNode;\n}\n\nexport interface CheckboxSelectGroup<Value = string> {\n  label?: ReactNode;\n  options: CheckboxSelectOption<Value>[];\n}\n\nexport interface CheckboxSelectProps<Value = string> {\n  id?: string;\n  name?: string;\n  label?: ReactNode;\n  description?: string;\n  placeholder?: string;\n  value?: Value[];\n  options?: CheckboxSelectOption<Value>[];\n  groups?: CheckboxSelectGroup<Value>[];\n  onChange?: (event: Event, value: Value[]) => void;\n  disabled?: boolean;\n  required?: boolean;\n  hideRequiredStar?: boolean;\n  validationStatus?: ValidationStatus;\n  errorMessage?: string;\n  className?: string;\n  'data-testid'?: string;\n  /** Renders the selected values summary in the trigger */\n  renderValue?: (selected: Value[]) => ReactNode;\n}\n\nexport function CheckboxSelect<Value = string>({\n  id: idProp,\n  name: nameProp,\n  label,\n  description,\n  placeholder = 'Select...',\n  value: controlledValue,\n  options,\n  groups,\n  onChange,\n  disabled = false,\n  required = false,\n  hideRequiredStar,\n  validationStatus = 'default',\n  errorMessage,\n  className,\n  'data-testid': dataTestId,\n  renderValue,\n}: CheckboxSelectProps<Value>) {\n  const internalId = useId();\n  const id = idProp ?? internalId;\n  const name = nameProp ?? id;\n\n  const { open, toggle, containerRef, isLeaving } = useDropdown();\n  const [selected, setSelected] = useState<Value[]>(controlledValue ?? []);\n\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setSelected(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const toggleOption = (event: Event, val: Value) => {\n    const next = selected.includes(val) ? selected.filter((v) => v !== val) : [...selected, val];\n    setSelected(next);\n    onChange?.(event, next);\n  };\n\n  const allOptions: CheckboxSelectOption<Value>[] = options\n    ? options\n    : (groups ?? []).flatMap((g) => g.options);\n\n  const triggerLabel =\n    selected.length === 0 ? (\n      <span className=\"text-darkGrey\">{placeholder}</span>\n    ) : renderValue ? (\n      renderValue(selected)\n    ) : (\n      <span>\n        {allOptions\n          .filter((o) => selected.includes(o.value))\n          .map((o) => o.label)\n          .join(', ')}\n      </span>\n    );\n\n  const isError = validationStatus === 'error';\n  const isSuccess = validationStatus === 'success';\n  const isDisabled = disabled;\n\n  const renderOptions = (opts: CheckboxSelectOption<Value>[]) => (\n    <div className=\"flex flex-col gap-12\">\n      {opts.map((option, i) => (\n        <Checkbox\n          key={i}\n          name={name}\n          value={String(option.value)}\n          checked={selected.includes(option.value)}\n          disabled={disabled}\n          onChange={(event) => toggleOption(event, option.value)}\n        >\n          <OptionLabel selected={selected.includes(option.value)}>{option.label}</OptionLabel>\n        </Checkbox>\n      ))}\n    </div>\n  );\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      className={className}\n      dataName=\"CheckboxSelect\"\n      data-testid={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div ref={containerRef} className=\"relative\">\n        <button\n          type=\"button\"\n          id={id}\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n          aria-disabled={isDisabled}\n          disabled={isDisabled}\n          onClick={toggle}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none text-left flex items-center justify-between gap-8',\n            {\n              'bg-white text-black border-middleGrey focus:border-black active:border-black':\n                !isDisabled && !isError && !isSuccess,\n              'bg-pearl border-middleGrey text-grey': isDisabled,\n              'border-red bg-white': isError,\n              'border-green bg-white': isSuccess,\n            },\n          )}\n        >\n          <span className=\"truncate flex-1\">{triggerLabel}</span>\n          <span className=\"flex items-center gap-8 shrink-0\">\n            {isError && <Icon name=\"CrossDefault\" width=\"24px\" className=\"text-red\" />}\n            {isSuccess && <Icon name=\"CheckDefault\" width=\"24px\" className=\"text-green\" />}\n            <Icon\n              name=\"ArrowDefaultDown\"\n              width=\"24px\"\n              className={clsx('text-black transition-transform', { 'rotate-180': open })}\n            />\n          </span>\n        </button>\n\n        <div\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          aria-hidden={!open && !isLeaving}\n          className={clsx(\n            'absolute z-10 top-[calc(100%+8px)] left-0 right-0 bg-white rounded-16 border border-lightGrey shadow-md p-12 origin-top will-change-[transform,opacity]',\n            {\n              'animate-zoom-in': open,\n              'animate-zoom-out': !open && isLeaving,\n              'opacity-0 scale-90 pointer-events-none': !open && !isLeaving,\n            },\n          )}\n        >\n          {groups\n            ? groups.map((group, gi) => (\n                <div key={gi} className={clsx({ 'mt-16 first:mt-0': gi > 0 })}>\n                  {group.label && (\n                    <p className=\"text-b4 text-darkGrey font-semibold mb-8 ps-4\">{group.label}</p>\n                  )}\n                  {renderOptions(group.options)}\n                </div>\n              ))\n            : renderOptions(allOptions)}\n        </div>\n      </div>\n    </FormControl>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CheckboxSelect.js","names":[],"sources":["../../../lib/ui/forms/CheckboxSelect.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState, useEffect, type ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { Icon } from '@clubmed/trident-icons';\nimport { Checkbox } from './checkboxes/Checkbox';\nimport type { ValidationStatus } from '../hooks/useInternalStatus';\nimport { FormControl } from './FormControl';\nimport { useDropdown } from '../Dropdown';\n\nfunction OptionLabel({ children, selected }: { children: ReactNode; selected: boolean }) {\n  return (\n    <span\n      ref={(el) => {\n        if (el) el.title = el.textContent ?? '';\n      }}\n      className={clsx('text-b3 text-black truncate', { 'font-semibold': selected })}\n    >\n      {children}\n    </span>\n  );\n}\n\nexport interface CheckboxSelectOption<Value = string> {\n  value: Value;\n  label: ReactNode;\n}\n\nexport interface CheckboxSelectGroup<Value = string> {\n  label?: ReactNode;\n  options: CheckboxSelectOption<Value>[];\n}\n\nexport interface CheckboxSelectProps<Value = string> {\n  id?: string;\n  name?: string;\n  label?: ReactNode;\n  description?: string;\n  placeholder?: string;\n  value?: Value[];\n  options?: CheckboxSelectOption<Value>[];\n  groups?: CheckboxSelectGroup<Value>[];\n  onChange?: (event: Event, value: Value[]) => void;\n  disabled?: boolean;\n  required?: boolean;\n  hideRequiredStar?: boolean;\n  validationStatus?: ValidationStatus;\n  errorMessage?: string;\n  className?: string;\n  'data-testid'?: string;\n  /** Renders the selected values summary in the trigger */\n  renderValue?: (selected: Value[]) => ReactNode;\n}\n\nexport function CheckboxSelect<Value = string>({\n  id: idProp,\n  name: nameProp,\n  label,\n  description,\n  placeholder = 'Select...',\n  value: controlledValue,\n  options,\n  groups,\n  onChange,\n  disabled = false,\n  required = false,\n  hideRequiredStar,\n  validationStatus = 'default',\n  errorMessage,\n  className,\n  'data-testid': dataTestId,\n  renderValue,\n}: CheckboxSelectProps<Value>) {\n  const internalId = useId();\n  const id = idProp ?? internalId;\n  const name = nameProp ?? id;\n\n  const { open, toggle, containerRef, isLeaving } = useDropdown();\n  const [selected, setSelected] = useState<Value[]>(controlledValue ?? []);\n\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setSelected(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const toggleOption = (event: Event, val: Value) => {\n    const next = selected.includes(val) ? selected.filter((v) => v !== val) : [...selected, val];\n    setSelected(next);\n    onChange?.(event, next);\n  };\n\n  const allOptions: CheckboxSelectOption<Value>[] = options\n    ? options\n    : (groups ?? []).flatMap((g) => g.options);\n\n  const triggerLabel =\n    selected.length === 0 ? (\n      <span className=\"text-darkGrey\">{placeholder}</span>\n    ) : renderValue ? (\n      renderValue(selected)\n    ) : (\n      <span>\n        {allOptions\n          .filter((o) => selected.includes(o.value))\n          .map((o) => o.label)\n          .join(', ')}\n      </span>\n    );\n\n  const isError = validationStatus === 'error';\n  const isSuccess = validationStatus === 'success';\n  const isDisabled = disabled;\n\n  const renderOptions = (opts: CheckboxSelectOption<Value>[]) => (\n    <div className=\"flex flex-col gap-12\">\n      {opts.map((option, i) => (\n        <Checkbox\n          key={i}\n          name={name}\n          value={String(option.value)}\n          checked={selected.includes(option.value)}\n          disabled={disabled}\n          onChange={(event) => toggleOption(event, option.value)}\n        >\n          <OptionLabel selected={selected.includes(option.value)}>{option.label}</OptionLabel>\n        </Checkbox>\n      ))}\n    </div>\n  );\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      className={className}\n      dataName=\"CheckboxSelect\"\n      data-testid={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div ref={containerRef} className=\"relative\">\n        <button\n          type=\"button\"\n          id={id}\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n          aria-disabled={isDisabled}\n          disabled={isDisabled}\n          onClick={toggle}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 text-left flex items-center justify-between gap-8',\n            {\n              'bg-white text-black border-middleGrey focus:border-black active:border-black':\n                !isDisabled && !isError && !isSuccess,\n              'bg-pearl border-middleGrey text-grey': isDisabled,\n              'border-red bg-white': isError,\n              'border-green bg-white': isSuccess,\n            },\n          )}\n        >\n          <span className=\"truncate flex-1\">{triggerLabel}</span>\n          <span className=\"flex items-center gap-8 shrink-0\">\n            {isError && <Icon name=\"CrossDefault\" width=\"24px\" className=\"text-red\" />}\n            {isSuccess && <Icon name=\"CheckDefault\" width=\"24px\" className=\"text-green\" />}\n            <Icon\n              name=\"ArrowDefaultDown\"\n              width=\"24px\"\n              className={clsx('text-black transition-transform', { 'rotate-180': open })}\n            />\n          </span>\n        </button>\n\n        <div\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          aria-hidden={!open && !isLeaving}\n          className={clsx(\n            'absolute z-10 top-[calc(100%+8px)] left-0 right-0 bg-white rounded-16 border border-lightGrey shadow-md p-12 origin-top will-change-[transform,opacity]',\n            {\n              'animate-zoom-in': open,\n              'animate-zoom-out': !open && isLeaving,\n              'opacity-0 scale-90 pointer-events-none': !open && !isLeaving,\n            },\n          )}\n        >\n          {groups\n            ? groups.map((group, gi) => (\n                <div key={gi} className={clsx({ 'mt-16 first:mt-0': gi > 0 })}>\n                  {group.label && (\n                    <p className=\"text-b4 text-darkGrey font-semibold mb-8 ps-4\">{group.label}</p>\n                  )}\n                  {renderOptions(group.options)}\n                </div>\n              ))\n            : renderOptions(allOptions)}\n        </div>\n      </div>\n    </FormControl>\n  );\n}\n"],"mappings":"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"}

package/ui/forms/FloatingLabelTextField.js

@@ -39,7 +39,7 @@ var u = (u) => {
 							"--nbIconsStart": W,
 							"--nbIconsEnd": G
 						},
-						className: e("text-b3 rounded-pill w-full border h-60 font-normal outline-none", "ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]", {
+						className: e("text-b3 rounded-pill w-full border h-60 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", "ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]", {
 							"pt-[26px] pb-[8px]": V && m,
 							"py-12": !(V && m),
 							"border-middleGrey focus:border-black active:border-black": L === "default",
@@ -92,7 +92,7 @@ var u = (u) => {
 									type: w
 								}),
 								(E || U) && (U ? /* @__PURE__ */ c("button", {
-									className: "pointer-events-auto",
+									className: "pointer-events-auto outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
 									onClick: (e) => I("", e.nativeEvent),
 									"aria-label": D,
 									type: "reset",