@mattermost/compass-ui 0.1.0-alpha.1 → 0.1.0-alpha.11

package/dist/components/date-range-picker/DateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.js","sources":["../../../src/components/date-range-picker/DateRangePicker.tsx"],"sourcesContent":["import type { InputHTMLAttributes, KeyboardEvent } from 'react';\nimport { useState, useCallback, useEffect, useId, useRef } from 'react';\nimport Button from '@/components/button/Button';\nimport IconButton, {\n  ICON_BUTTON_ICON_SIZES,\n} from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport CalendarOutlineIcon from '@mattermost/compass-icons/components/calendar-outline';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport ChevronLeftIcon from '@mattermost/compass-icons/components/chevron-left';\nimport ChevronRightIcon from '@mattermost/compass-icons/components/chevron-right';\nimport { useAnchoredPopupPortal } from '@/hooks/use-anchored-popup-portal';\nimport { useOutsideClose } from '@/hooks/use-outside-close';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport styles from './DateRangePicker.module.scss';\n\nexport type DateRangePickerMode = 'date' | 'range';\n\nexport interface DateRangePickerProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'value' | 'defaultValue' | 'onChange' | 'type' | 'size'\n> {\n  /** Optional CSS class name applied to the root element. */\n  className?: string;\n  /** Selection mode: single date or range. Default: 'date'. */\n  mode?: DateRangePickerMode;\n  /** Controlled selected date (single mode). ISO string yyyy-mm-dd. */\n  value?: string;\n  /** Controlled start date (range mode). ISO string. */\n  startDate?: string;\n  /** Controlled end date (range mode). ISO string. */\n  endDate?: string;\n  /** Called when a date is selected (single mode). */\n  onChange?: (date: string) => void;\n  /** Called when range changes (range mode). */\n  onRangeChange?: (start: string, end: string) => void;\n  /** Portal mount node for the calendar; defaults to `document.body`. */\n  portalContainer?: HTMLElement | null;\n  /** Stacking order for the portaled calendar. */\n  zIndex?: number;\n}\n\n/** Approximate calendar panel height for the initial flip decision. */\nconst CALENDAR_PREFERRED_HEIGHT = 360;\n\nconst WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\n\nconst MONTHS = [\n  'January',\n  'February',\n  'March',\n  'April',\n  'May',\n  'June',\n  'July',\n  'August',\n  'September',\n  'October',\n  'November',\n  'December',\n];\n\nfunction formatDateDisplay(iso: string): string {\n  if (!iso) return '';\n  const [y, m, d] = iso.split('-');\n  return `${m}/${d}/${y}`;\n}\n\nfunction toIso(year: number, month: number, day: number): string {\n  return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;\n}\n\nfunction getDaysInMonth(year: number, month: number): number {\n  return new Date(year, month + 1, 0).getDate();\n}\n\nfunction getFirstDayOfWeek(year: number, month: number): number {\n  return new Date(year, month, 1).getDay();\n}\n\nfunction isSameDay(a: string, b: string): boolean {\n  return a === b;\n}\n\nfunction isBetween(date: string, start: string, end: string): boolean {\n  if (!start || !end) return false;\n  const [s, e] = start < end ? [start, end] : [end, start];\n  return date > s && date < e;\n}\n\nfunction dayFromIso(iso: string, year: number, month: number): number | null {\n  if (!iso) return null;\n  const [y, m, d] = iso.split('-').map(Number);\n  if (y === year && m === month + 1) return d;\n  return null;\n}\n\n/**\n * The Date and Range Picker lets people pick a single date or a start/end range from a\n * calendar. The trigger is a compact field; the calendar is a popover anchored 4px below it.\n */\nexport default function DateRangePicker({\n  className = '',\n  mode = 'date',\n  value,\n  startDate,\n  endDate,\n  onChange,\n  onRangeChange,\n  disabled,\n  id: idProp,\n  portalContainer = null,\n  zIndex,\n}: DateRangePickerProps) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const popoverId = `${id}-popover`;\n  const rootRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const gridRef = useRef<HTMLDivElement>(null);\n\n  const today = new Date();\n  const todayIso = toIso(\n    today.getFullYear(),\n    today.getMonth(),\n    today.getDate(),\n  );\n\n  // Calendar display state\n  const [displayYear, setDisplayYear] = useState(today.getFullYear());\n  const [displayMonth, setDisplayMonth] = useState(today.getMonth());\n  const [isOpen, setIsOpen] = useState(false);\n  /** Roving tabindex day-of-month within the visible grid. */\n  const [focusedDay, setFocusedDay] = useState(1);\n\n  // Internal selection state (uncontrolled fallback)\n  const [internalDate, setInternalDate] = useState('');\n  const [internalStart, setInternalStart] = useState('');\n  const [internalEnd, setInternalEnd] = useState('');\n\n  const selectedDate = value ?? internalDate;\n  const selectedStart = startDate ?? internalStart;\n  const selectedEnd = endDate ?? internalEnd;\n\n  const hasValue =\n    mode === 'date' ? Boolean(selectedDate) : Boolean(selectedStart);\n\n  const { mounted: popoverMounted, visible: popoverVisible } =\n    usePopoverTransition(isOpen);\n\n  const {\n    placement,\n    style: popoverStyle,\n    portalRef,\n    renderPortal,\n  } = useAnchoredPopupPortal(triggerRef, popoverMounted, {\n    preferredHeight: CALENDAR_PREFERRED_HEIGHT,\n    portalContainer,\n    zIndex,\n    matchWidth: false,\n  });\n\n  const close = useCallback((restoreFocus = true) => {\n    setIsOpen(false);\n    if (restoreFocus) {\n      triggerRef.current?.focus();\n    }\n  }, []);\n\n  useOutsideClose(rootRef, isOpen, () => close(true), portalRef);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    function handleKeyDown(e: globalThis.KeyboardEvent) {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        close(true);\n      }\n    }\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [isOpen, close]);\n\n  // Close when focus leaves the field and the portaled calendar.\n  useEffect(() => {\n    if (!isOpen) return;\n\n    function handleFocusIn(e: FocusEvent) {\n      const target = e.target as Node | null;\n      if (!target) return;\n      if (rootRef.current?.contains(target)) return;\n      if (portalRef.current?.contains(target)) return;\n      close(false);\n    }\n\n    document.addEventListener('focusin', handleFocusIn);\n    return () => document.removeEventListener('focusin', handleFocusIn);\n  }, [isOpen, close, portalRef]);\n\n  const daysInMonth = getDaysInMonth(displayYear, displayMonth);\n\n  const initialFocusDay = useCallback(() => {\n    if (mode === 'date') {\n      const fromValue = dayFromIso(selectedDate, displayYear, displayMonth);\n      if (fromValue) return fromValue;\n    } else {\n      const fromEnd = dayFromIso(selectedEnd, displayYear, displayMonth);\n      if (fromEnd) return fromEnd;\n      const fromStart = dayFromIso(selectedStart, displayYear, displayMonth);\n      if (fromStart) return fromStart;\n    }\n    const fromToday = dayFromIso(todayIso, displayYear, displayMonth);\n    if (fromToday) return fromToday;\n    return 1;\n  }, [\n    mode,\n    selectedDate,\n    selectedStart,\n    selectedEnd,\n    displayYear,\n    displayMonth,\n    todayIso,\n  ]);\n\n  // On open: after the enter transition enables pointer-events, move focus\n  // into the day grid (selected day, today, or the 1st).\n  useEffect(() => {\n    if (!isOpen || !popoverVisible) return;\n    const day = initialFocusDay();\n    setFocusedDay(day);\n    const frame = requestAnimationFrame(() => {\n      gridRef.current\n        ?.querySelector<HTMLElement>(`[data-day=\"${day}\"]`)\n        ?.focus();\n    });\n    return () => cancelAnimationFrame(frame);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- open/visible transition only\n  }, [isOpen, popoverVisible]);\n\n  const focusDayButton = useCallback((day: number) => {\n    setFocusedDay(day);\n    requestAnimationFrame(() => {\n      gridRef.current\n        ?.querySelector<HTMLElement>(`[data-day=\"${day}\"]`)\n        ?.focus();\n    });\n  }, []);\n\n  const handleToggle = useCallback(() => {\n    if (disabled) return;\n    setIsOpen((open) => !open);\n  }, [disabled]);\n\n  const handlePrevMonth = useCallback(() => {\n    setDisplayMonth((m) => {\n      if (m === 0) {\n        setDisplayYear((y) => y - 1);\n        return 11;\n      }\n      return m - 1;\n    });\n  }, []);\n\n  const handleNextMonth = useCallback(() => {\n    setDisplayMonth((m) => {\n      if (m === 11) {\n        setDisplayYear((y) => y + 1);\n        return 0;\n      }\n      return m + 1;\n    });\n  }, []);\n\n  const goToAdjacentMonth = useCallback(\n    (direction: -1 | 1, preferDay: number) => {\n      const nextMonth =\n        direction === -1\n          ? displayMonth === 0\n            ? 11\n            : displayMonth - 1\n          : displayMonth === 11\n            ? 0\n            : displayMonth + 1;\n      const nextYear =\n        direction === -1\n          ? displayMonth === 0\n            ? displayYear - 1\n            : displayYear\n          : displayMonth === 11\n            ? displayYear + 1\n            : displayYear;\n      const maxDay = getDaysInMonth(nextYear, nextMonth);\n      setDisplayYear(nextYear);\n      setDisplayMonth(nextMonth);\n      focusDayButton(Math.min(preferDay, maxDay));\n    },\n    [displayMonth, displayYear, focusDayButton],\n  );\n\n  const handleToday = useCallback(() => {\n    const now = new Date();\n    setDisplayYear(now.getFullYear());\n    setDisplayMonth(now.getMonth());\n    focusDayButton(now.getDate());\n  }, [focusDayButton]);\n\n  const handleDayClick = useCallback(\n    (iso: string, day: number) => {\n      if (mode === 'date') {\n        if (onChange) {\n          onChange(iso);\n        } else {\n          setInternalDate(iso);\n        }\n        close(true);\n      } else {\n        // range mode: first click = start, second = end\n        if (!selectedStart || (selectedStart && selectedEnd)) {\n          setInternalStart(iso);\n          setInternalEnd('');\n          setFocusedDay(day);\n        } else {\n          const [s, e] =\n            iso >= selectedStart ? [selectedStart, iso] : [iso, selectedStart];\n          if (onRangeChange) {\n            onRangeChange(s, e);\n          } else {\n            setInternalStart(s);\n            setInternalEnd(e);\n          }\n          close(true);\n        }\n      }\n    },\n    [mode, selectedStart, selectedEnd, onChange, onRangeChange, close],\n  );\n\n  const moveFocusedDay = useCallback(\n    (delta: number) => {\n      const next = focusedDay + delta;\n      if (next >= 1 && next <= daysInMonth) {\n        focusDayButton(next);\n        return;\n      }\n      if (next < 1) {\n        goToAdjacentMonth(\n          -1,\n          getDaysInMonth(\n            displayMonth === 0 ? displayYear - 1 : displayYear,\n            displayMonth === 0 ? 11 : displayMonth - 1,\n          ) + next,\n        );\n      } else {\n        goToAdjacentMonth(1, next - daysInMonth);\n      }\n    },\n    [\n      focusedDay,\n      daysInMonth,\n      displayMonth,\n      displayYear,\n      focusDayButton,\n      goToAdjacentMonth,\n    ],\n  );\n\n  const handleDayKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>, day: number) => {\n      switch (e.key) {\n        case 'ArrowLeft':\n          e.preventDefault();\n          moveFocusedDay(-1);\n          break;\n        case 'ArrowRight':\n          e.preventDefault();\n          moveFocusedDay(1);\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          moveFocusedDay(-7);\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          moveFocusedDay(7);\n          break;\n        case 'Home':\n          e.preventDefault();\n          focusDayButton(1);\n          break;\n        case 'End':\n          e.preventDefault();\n          focusDayButton(daysInMonth);\n          break;\n        case 'PageUp':\n          e.preventDefault();\n          goToAdjacentMonth(-1, day);\n          break;\n        case 'PageDown':\n          e.preventDefault();\n          goToAdjacentMonth(1, day);\n          break;\n        case 'Enter':\n        case ' ':\n          e.preventDefault();\n          setFocusedDay(day);\n          handleDayClick(toIso(displayYear, displayMonth, day), day);\n          break;\n        default:\n          break;\n      }\n    },\n    [\n      moveFocusedDay,\n      focusDayButton,\n      daysInMonth,\n      goToAdjacentMonth,\n      handleDayClick,\n      displayYear,\n      displayMonth,\n    ],\n  );\n\n  const handleTriggerKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n          e.preventDefault();\n          handleToggle();\n          break;\n        case 'ArrowDown':\n          if (!isOpen) {\n            e.preventDefault();\n            setIsOpen(true);\n          }\n          break;\n        case 'Escape':\n          if (isOpen) {\n            e.preventDefault();\n            close(true);\n          }\n          break;\n        default:\n          break;\n      }\n    },\n    [disabled, handleToggle, isOpen, close],\n  );\n\n  // Keep focusedDay in range when the month changes (nav buttons / PageUp).\n  useEffect(() => {\n    if (!isOpen) return;\n    setFocusedDay((d) => Math.min(Math.max(1, d), daysInMonth));\n  }, [isOpen, daysInMonth, displayMonth, displayYear]);\n\n  // Build calendar grid\n  const firstDay = getFirstDayOfWeek(displayYear, displayMonth);\n\n  // Build weeks (rows of 7 cells; null = empty)\n  const cells: (number | null)[] = [\n    ...Array(firstDay).fill(null),\n    ...Array.from({ length: daysInMonth }, (_, i) => i + 1),\n  ];\n  // Pad to complete last row\n  while (cells.length % 7 !== 0) cells.push(null);\n  const weeks: (number | null)[][] = [];\n  for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));\n\n  const displayValue =\n    mode === 'date'\n      ? formatDateDisplay(selectedDate)\n      : selectedStart\n        ? `${formatDateDisplay(selectedStart)}${selectedEnd ? ` – ${formatDateDisplay(selectedEnd)}` : ''}`\n        : '';\n\n  const rootClass = [\n    styles['date-range-picker'],\n    isOpen ? styles['date-range-picker--open'] : '',\n    disabled ? styles['date-range-picker--disabled'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div ref={rootRef} className={rootClass}>\n      {/* Trigger input */}\n      <div\n        ref={triggerRef}\n        className={styles['date-range-picker__trigger']}\n        role=\"button\"\n        aria-haspopup=\"dialog\"\n        aria-expanded={isOpen}\n        aria-controls={popoverMounted ? popoverId : undefined}\n        aria-disabled={disabled || undefined}\n        tabIndex={disabled ? -1 : 0}\n        id={id}\n        data-has-value={hasValue ? '' : undefined}\n        onClick={handleToggle}\n        onKeyDown={handleTriggerKeyDown}\n      >\n        <span\n          className={styles['date-range-picker__calendar-icon']}\n          aria-hidden\n        >\n          <Icon size=\"16\" glyph={<CalendarOutlineIcon />} />\n        </span>\n        <span className={styles['date-range-picker__value']}>\n          {displayValue || 'mm/dd/yyyy'}\n        </span>\n        <span className={styles['date-range-picker__chevron']} aria-hidden>\n          <Icon size=\"16\" glyph={<ChevronDownIcon />} />\n        </span>\n      </div>\n\n      {/* Calendar popover */}\n      {popoverMounted &&\n        renderPortal(\n          <div\n            ref={portalRef}\n            id={popoverId}\n            className={[\n              styles['date-range-picker__popover'],\n              placement === 'above'\n                ? styles['date-range-picker__popover--above']\n                : '',\n              popoverVisible\n                ? styles['date-range-picker__popover--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            style={popoverStyle}\n            role=\"dialog\"\n            aria-modal=\"false\"\n            aria-label=\"Date picker\"\n          >\n            {/* Header */}\n            <div className={styles['date-range-picker__header']}>\n              <span\n                className={styles['date-range-picker__month-label']}\n                aria-live=\"polite\"\n              >\n                {MONTHS[displayMonth]} {displayYear}\n              </span>\n              <div className={styles['date-range-picker__header-actions']}>\n                <Button\n                  emphasis=\"quaternary\"\n                  size=\"small\"\n                  leadingIcon={\n                    <Icon size=\"16\" glyph={<CalendarOutlineIcon />} />\n                  }\n                  onClick={handleToday}\n                >\n                  Today\n                </Button>\n                <div className={styles['date-range-picker__nav-buttons']}>\n                  <IconButton\n                    size=\"medium\"\n                    padding=\"compact\"\n                    icon={\n                      <Icon\n                        size={ICON_BUTTON_ICON_SIZES['medium']}\n                        glyph={<ChevronLeftIcon />}\n                      />\n                    }\n                    onClick={handlePrevMonth}\n                    aria-label=\"Previous month\"\n                  />\n                  <IconButton\n                    size=\"medium\"\n                    padding=\"compact\"\n                    icon={\n                      <Icon\n                        size={ICON_BUTTON_ICON_SIZES['medium']}\n                        glyph={<ChevronRightIcon />}\n                      />\n                    }\n                    onClick={handleNextMonth}\n                    aria-label=\"Next month\"\n                  />\n                </div>\n              </div>\n            </div>\n\n            {/* Weekday headers */}\n            <div className={styles['date-range-picker__weekdays']} aria-hidden>\n              {WEEKDAYS.map((d) => (\n                <span key={d} className={styles['date-range-picker__weekday']}>\n                  {d}\n                </span>\n              ))}\n            </div>\n\n            {/* Date grid */}\n            <div\n              ref={gridRef}\n              className={styles['date-range-picker__grid']}\n              role=\"grid\"\n              aria-label={`${MONTHS[displayMonth]} ${displayYear}`}\n            >\n              {weeks.map((week, wi) => (\n                <div\n                  key={wi}\n                  className={styles['date-range-picker__week']}\n                  role=\"row\"\n                >\n                  {week.map((day, di) => {\n                    if (day == null) {\n                      return (\n                        <span\n                          key={di}\n                          className={styles['date-range-picker__day-empty']}\n                          role=\"gridcell\"\n                        />\n                      );\n                    }\n                    const iso = toIso(displayYear, displayMonth, day);\n                    const isToday = iso === todayIso;\n                    const isRangeStart =\n                      mode === 'range' && isSameDay(iso, selectedStart);\n                    const isRangeEnd =\n                      mode === 'range' &&\n                      Boolean(selectedEnd) &&\n                      isSameDay(iso, selectedEnd);\n                    const isSelected =\n                      mode === 'date'\n                        ? isSameDay(iso, selectedDate)\n                        : isRangeStart || isRangeEnd;\n                    const isInRange =\n                      mode === 'range' &&\n                      isBetween(iso, selectedStart, selectedEnd);\n                    const hasRangeSpan =\n                      mode === 'range' &&\n                      Boolean(selectedStart) &&\n                      Boolean(selectedEnd) &&\n                      selectedStart !== selectedEnd;\n\n                    const cellClass = [\n                      styles['date-range-picker__day-cell'],\n                      isInRange\n                        ? styles['date-range-picker__day-cell--in-range']\n                        : '',\n                      hasRangeSpan && isRangeStart\n                        ? styles['date-range-picker__day-cell--range-start']\n                        : '',\n                      hasRangeSpan && isRangeEnd\n                        ? styles['date-range-picker__day-cell--range-end']\n                        : '',\n                    ]\n                      .filter(Boolean)\n                      .join(' ');\n\n                    const dayClass = [\n                      styles['date-range-picker__day'],\n                      isSelected\n                        ? styles['date-range-picker__day--selected']\n                        : '',\n                      isToday && !isSelected\n                        ? styles['date-range-picker__day--today']\n                        : '',\n                    ]\n                      .filter(Boolean)\n                      .join(' ');\n\n                    return (\n                      <div key={di} className={cellClass} role=\"gridcell\">\n                        <button\n                          type=\"button\"\n                          className={dayClass}\n                          data-day={day}\n                          tabIndex={focusedDay === day ? 0 : -1}\n                          onClick={() => handleDayClick(iso, day)}\n                          onFocus={() => setFocusedDay(day)}\n                          onKeyDown={(e) => handleDayKeyDown(e, day)}\n                          aria-label={iso}\n                          aria-pressed={isSelected}\n                          aria-current={isToday ? 'date' : undefined}\n                        >\n                          {day}\n                        </button>\n                      </div>\n                    );\n                  })}\n                </div>\n              ))}\n            </div>\n          </div>,\n        )}\n    </div>\n  );\n}\n"],"names":["CALENDAR_PREFERRED_HEIGHT","WEEKDAYS","MONTHS","formatDateDisplay","iso","y","m","d","toIso","year","month","day","getDaysInMonth","getFirstDayOfWeek","isSameDay","a","b","isBetween","date","start","end","s","e","dayFromIso","DateRangePicker","className","mode","value","startDate","endDate","onChange","onRangeChange","disabled","idProp","portalContainer","zIndex","generatedId","useId","id","popoverId","rootRef","useRef","triggerRef","gridRef","today","todayIso","displayYear","setDisplayYear","useState","displayMonth","setDisplayMonth","isOpen","setIsOpen","focusedDay","setFocusedDay","internalDate","setInternalDate","internalStart","setInternalStart","internalEnd","setInternalEnd","selectedDate","selectedStart","selectedEnd","hasValue","popoverMounted","popoverVisible","usePopoverTransition","placement","popoverStyle","portalRef","renderPortal","useAnchoredPopupPortal","close","useCallback","restoreFocus","_a","useOutsideClose","useEffect","handleKeyDown","handleFocusIn","target","_b","daysInMonth","initialFocusDay","fromValue","fromEnd","fromStart","fromToday","frame","focusDayButton","handleToggle","open","handlePrevMonth","handleNextMonth","goToAdjacentMonth","direction","preferDay","nextMonth","nextYear","maxDay","handleToday","now","handleDayClick","moveFocusedDay","delta","next","handleDayKeyDown","handleTriggerKeyDown","firstDay","cells","_","i","weeks","displayValue","rootClass","styles","jsxs","jsx","Icon","CalendarOutlineIcon","ChevronDownIcon","Button","IconButton","ICON_BUTTON_ICON_SIZES","ChevronLeftIcon","ChevronRightIcon","week","wi","di","isToday","isRangeStart","isRangeEnd","isSelected","isInRange","hasRangeSpan","cellClass","dayClass"],"mappings":"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"}

package/dist/components/date-range-picker/DateRangePicker.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./DateRangePicker.css');const e={"date-range-picker":"_date-range-picker_18hzd_2","date-range-picker__trigger":"_date-range-picker__trigger_18hzd_9","date-range-picker--disabled":"_date-range-picker--disabled_18hzd_21","date-range-picker--open":"_date-range-picker--open_18hzd_21","date-range-picker__calendar-icon":"_date-range-picker__calendar-icon_18hzd_38","date-range-picker__value":"_date-range-picker__value_18hzd_50","date-range-picker__chevron":"_date-range-picker__chevron_18hzd_68","date-range-picker__popover":"_date-range-picker__popover_18hzd_84","date-range-picker__popover--above":"_date-range-picker__popover--above_18hzd_103","date-range-picker__popover--visible":"_date-range-picker__popover--visible_18hzd_106","date-range-picker__header":"_date-range-picker__header_18hzd_112","date-range-picker__month-label":"_date-range-picker__month-label_18hzd_118","date-range-picker__header-actions":"_date-range-picker__header-actions_18hzd_129","date-range-picker__nav-buttons":"_date-range-picker__nav-buttons_18hzd_135","date-range-picker__weekdays":"_date-range-picker__weekdays_18hzd_139","date-range-picker__weekday":"_date-range-picker__weekday_18hzd_139","date-range-picker__grid":"_date-range-picker__grid_18hzd_159","date-range-picker__week":"_date-range-picker__week_18hzd_139","date-range-picker__day-empty":"_date-range-picker__day-empty_18hzd_169","date-range-picker__day-cell":"_date-range-picker__day-cell_18hzd_173","date-range-picker__day-cell--in-range":"_date-range-picker__day-cell--in-range_18hzd_182","date-range-picker__day-cell--range-start":"_date-range-picker__day-cell--range-start_18hzd_182","date-range-picker__day-cell--range-end":"_date-range-picker__day-cell--range-end_18hzd_182","date-range-picker__day":"_date-range-picker__day_18hzd_169","date-range-picker__day--selected":"_date-range-picker__day--selected_18hzd_225","date-range-picker__day--today":"_date-range-picker__day--today_18hzd_238"};exports.default=e;
+//# sourceMappingURL=DateRangePicker.module.scss.cjs.map

package/dist/components/date-range-picker/DateRangePicker.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/date-range-picker/DateRangePicker.module.scss.js

@@ -0,0 +1,32 @@
+import './DateRangePicker.css';const e = {
+  "date-range-picker": "_date-range-picker_18hzd_2",
+  "date-range-picker__trigger": "_date-range-picker__trigger_18hzd_9",
+  "date-range-picker--disabled": "_date-range-picker--disabled_18hzd_21",
+  "date-range-picker--open": "_date-range-picker--open_18hzd_21",
+  "date-range-picker__calendar-icon": "_date-range-picker__calendar-icon_18hzd_38",
+  "date-range-picker__value": "_date-range-picker__value_18hzd_50",
+  "date-range-picker__chevron": "_date-range-picker__chevron_18hzd_68",
+  "date-range-picker__popover": "_date-range-picker__popover_18hzd_84",
+  "date-range-picker__popover--above": "_date-range-picker__popover--above_18hzd_103",
+  "date-range-picker__popover--visible": "_date-range-picker__popover--visible_18hzd_106",
+  "date-range-picker__header": "_date-range-picker__header_18hzd_112",
+  "date-range-picker__month-label": "_date-range-picker__month-label_18hzd_118",
+  "date-range-picker__header-actions": "_date-range-picker__header-actions_18hzd_129",
+  "date-range-picker__nav-buttons": "_date-range-picker__nav-buttons_18hzd_135",
+  "date-range-picker__weekdays": "_date-range-picker__weekdays_18hzd_139",
+  "date-range-picker__weekday": "_date-range-picker__weekday_18hzd_139",
+  "date-range-picker__grid": "_date-range-picker__grid_18hzd_159",
+  "date-range-picker__week": "_date-range-picker__week_18hzd_139",
+  "date-range-picker__day-empty": "_date-range-picker__day-empty_18hzd_169",
+  "date-range-picker__day-cell": "_date-range-picker__day-cell_18hzd_173",
+  "date-range-picker__day-cell--in-range": "_date-range-picker__day-cell--in-range_18hzd_182",
+  "date-range-picker__day-cell--range-start": "_date-range-picker__day-cell--range-start_18hzd_182",
+  "date-range-picker__day-cell--range-end": "_date-range-picker__day-cell--range-end_18hzd_182",
+  "date-range-picker__day": "_date-range-picker__day_18hzd_169",
+  "date-range-picker__day--selected": "_date-range-picker__day--selected_18hzd_225",
+  "date-range-picker__day--today": "_date-range-picker__day--today_18hzd_238"
+};
+export {
+  e as default
+};
+//# sourceMappingURL=DateRangePicker.module.scss.js.map

package/dist/components/date-range-picker/DateRangePicker.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/date-range-picker/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DateRangePicker.cjs");exports.DateRangePicker=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/date-range-picker/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/date-range-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/date-range-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EACV,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,mBAAmB,CAAC"}

package/dist/components/date-range-picker/index.js

@@ -0,0 +1,5 @@
+import { default as r } from "./DateRangePicker.js";
+export {
+  r as DateRangePicker
+};
+//# sourceMappingURL=index.js.map

package/dist/components/date-range-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/divider/Divider.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),i=require("./Divider.module.scss.cjs");function r(){return e.jsx("div",{className:i.default.divider,children:e.jsx("hr",{className:i.default.divider__line})})}exports.default=r;
+//# sourceMappingURL=Divider.cjs.map

package/dist/components/divider/Divider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.cjs","sources":["../../../src/components/divider/Divider.tsx"],"sourcesContent":["import styles from './Divider.module.scss';\n\n/**\n * A Divider is a thin horizontal rule that separates content into related groups. It does\n * the lightest possible work — split a list, mark a transition, give a layout breathing room\n * — without competing for attention.\n */\nexport default function Divider() {\n  return (\n    <div className={styles.divider}>\n      <hr className={styles['divider__line']} />\n    </div>\n  );\n}\n"],"names":["Divider","jsx","styles"],"mappings":"wLAOA,SAAwBA,GAAU,CAChC,OACEC,EAAAA,IAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,QACrB,SAAAD,EAAAA,IAAC,KAAA,CAAG,UAAWC,EAAAA,QAAO,aAAe,CAAG,CAAA,CAC1C,CAEJ"}

package/dist/components/divider/Divider.css

@@ -0,0 +1 @@
+._divider_1wh3r_2{width:100%;padding:var(--spacing-xs) 0}._divider__line_1wh3r_6{border:none;border-top:1px solid rgba(var(--center-channel-color-rgb),.12);margin:0}

package/dist/components/divider/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/divider/Divider.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,4CAM9B"}

package/dist/components/divider/Divider.js

@@ -0,0 +1,9 @@
+import { jsx as i } from "react/jsx-runtime";
+import r from "./Divider.module.scss.js";
+function s() {
+  return /* @__PURE__ */ i("div", { className: r.divider, children: /* @__PURE__ */ i("hr", { className: r.divider__line }) });
+}
+export {
+  s as default
+};
+//# sourceMappingURL=Divider.js.map

package/dist/components/divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sources":["../../../src/components/divider/Divider.tsx"],"sourcesContent":["import styles from './Divider.module.scss';\n\n/**\n * A Divider is a thin horizontal rule that separates content into related groups. It does\n * the lightest possible work — split a list, mark a transition, give a layout breathing room\n * — without competing for attention.\n */\nexport default function Divider() {\n  return (\n    <div className={styles.divider}>\n      <hr className={styles['divider__line']} />\n    </div>\n  );\n}\n"],"names":["Divider","jsx","styles"],"mappings":";;AAOA,SAAwBA,IAAU;AAChC,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,SACrB,UAAA,gBAAAD,EAAC,MAAA,EAAG,WAAWC,EAAO,cAAe,CAAG,EAAA,CAC1C;AAEJ;"}

package/dist/components/divider/Divider.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Divider.css');const e="_divider_1wh3r_2",i="_divider__line_1wh3r_6",d={divider:e,divider__line:i};exports.default=d;exports.divider=e;exports.divider__line=i;
+//# sourceMappingURL=Divider.module.scss.cjs.map

package/dist/components/divider/Divider.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/divider/Divider.module.scss.js

@@ -0,0 +1,10 @@
+import './Divider.css';const i = "_divider_1wh3r_2", d = "_divider__line_1wh3r_6", e = {
+  divider: i,
+  divider__line: d
+};
+export {
+  e as default,
+  i as divider,
+  d as divider__line
+};
+//# sourceMappingURL=Divider.module.scss.js.map

package/dist/components/divider/Divider.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/divider/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Divider.cjs");exports.Divider=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/divider/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/divider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/divider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,mBAAmB,WAAW,CAAC"}

package/dist/components/divider/index.js

@@ -0,0 +1,5 @@
+import { default as a } from "./Divider.js";
+export {
+  a as Divider
+};
+//# sourceMappingURL=index.js.map

package/dist/components/divider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/dropdown/Dropdown.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),x=require("../button/Button.cjs"),j=require("../../utils/string.cjs"),s=require("../icon/Icon.cjs"),__g=require("@mattermost/compass-icons/components/chevron-down.js"),g=__g?.default??__g,e=require("./Dropdown.module.scss.cjs");function v({className:d="",children:t,leadingIcon:n,padding:r="tight",size:l="medium",appearance:i="default",isOpen:o=!1,disabled:u,type:c="button",...p}){const f=e.default[`dropdown--size-${j.toKebab(l)}`],m=r==="compact"?e.default["dropdown--padding-compact"]:"",h=i==="inverted"?e.default["dropdown--appearance-inverted"]:"",_=o?e.default["dropdown--open"]:"",w=[e.default.dropdown,f,m,h,_,d].filter(Boolean).join(" ");return a.jsx(x.default,{className:w,emphasis:"quaternary",size:"medium",type:c,disabled:u,"aria-expanded":o,"aria-haspopup":"listbox",...p,children:a.jsxs("span",{className:e.default.dropdown__trigger,children:[a.jsxs("span",{className:e.default.dropdown__content,children:[n!=null&&a.jsx("span",{className:e.default["dropdown__leading-icon"],"aria-hidden":!0,children:a.jsx(s.IconSlotContext.Provider,{value:{size:"16"},children:n})}),a.jsx("span",{className:e.default.dropdown__label,children:t})]}),a.jsx("span",{className:e.default.dropdown__chevron,"aria-hidden":!0,children:a.jsx(s.default,{size:"12",glyph:a.jsx(g,{})})})]})})}exports.default=v;
+//# sourceMappingURL=Dropdown.cjs.map

package/dist/components/dropdown/Dropdown.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.cjs","sources":["../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport { toKebab } from '@/utils/string';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport styles from './Dropdown.module.scss';\n\nexport type DropdownSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';\nexport type DropdownAppearance = 'default' | 'inverted';\nexport type DropdownPadding = 'tight' | 'compact';\n\nexport interface DropdownProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'size'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Label text shown in the trigger. */\n  children: ReactNode;\n  /** Optional leading icon — pass `<Icon glyph={<SomeIcon />} />`; Dropdown provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  /** Trigger inset. Tight is default; Compact adds more padding (Figma). Default: Tight. */\n  padding?: DropdownPadding;\n  /** Size variant. Default: Medium. */\n  size?: DropdownSize;\n  /** Light or dark background context. Default: Default. */\n  appearance?: DropdownAppearance;\n  /** When true, the dropdown is in an open/active state. */\n  isOpen?: boolean;\n}\n\n/**\n * A Dropdown is a heading-weight trigger that opens a Popover Menu. It reads as a title —\n * semibold, with a chevron — and signals \"this label is also a control.\"\n */\nexport default function Dropdown({\n  className = '',\n  children,\n  leadingIcon,\n  padding = 'tight',\n  size = 'medium',\n  appearance = 'default',\n  isOpen = false,\n  disabled,\n  type = 'button',\n  ...rest\n}: DropdownProps) {\n  const sizeClass = styles[`dropdown--size-${toKebab(size)}`];\n  const paddingClass =\n    padding === 'compact' ? styles['dropdown--padding-compact'] : '';\n  const appearanceClass =\n    appearance === 'inverted' ? styles['dropdown--appearance-inverted'] : '';\n  const openClass = isOpen ? styles['dropdown--open'] : '';\n\n  const rootClass = [\n    styles.dropdown,\n    sizeClass,\n    paddingClass,\n    appearanceClass,\n    openClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Button\n      className={rootClass}\n      emphasis=\"quaternary\"\n      size=\"medium\"\n      type={type}\n      disabled={disabled}\n      aria-expanded={isOpen}\n      aria-haspopup=\"listbox\"\n      {...rest}\n    >\n      <span className={styles.dropdown__trigger}>\n        <span className={styles.dropdown__content}>\n          {leadingIcon != null && (\n            <span className={styles['dropdown__leading-icon']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingIcon}\n              </IconSlotContext.Provider>\n            </span>\n          )}\n          <span className={styles.dropdown__label}>{children}</span>\n        </span>\n        <span className={styles.dropdown__chevron} aria-hidden>\n          <Icon size=\"12\" glyph={<ChevronDownIcon />} />\n        </span>\n      </span>\n    </Button>\n  );\n}\n"],"names":["Dropdown","className","children","leadingIcon","padding","size","appearance","isOpen","disabled","type","rest","sizeClass","styles","toKebab","paddingClass","appearanceClass","openClass","rootClass","jsx","Button","jsxs","IconSlotContext","Icon","ChevronDownIcon"],"mappings":"4VAoCA,SAAwBA,EAAS,CAC/B,UAAAC,EAAY,GACZ,SAAAC,EACA,YAAAC,EACA,QAAAC,EAAU,QACV,KAAAC,EAAO,SACP,WAAAC,EAAa,UACb,OAAAC,EAAS,GACT,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EAAkB,CAChB,MAAMC,EAAYC,EAAAA,QAAO,kBAAkBC,EAAAA,QAAQR,CAAI,CAAC,EAAE,EACpDS,EACJV,IAAY,UAAYQ,EAAAA,QAAO,2BAA2B,EAAI,GAC1DG,EACJT,IAAe,WAAaM,EAAAA,QAAO,+BAA+B,EAAI,GAClEI,EAAYT,EAASK,UAAO,gBAAgB,EAAI,GAEhDK,EAAY,CAChBL,EAAAA,QAAO,SACPD,EACAG,EACAC,EACAC,EACAf,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEiB,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWF,EACX,SAAS,aACT,KAAK,SACL,KAAAR,EACA,SAAAD,EACA,gBAAeD,EACf,gBAAc,UACb,GAAGG,EAEJ,SAAAU,EAAAA,KAAC,OAAA,CAAK,UAAWR,EAAAA,QAAO,kBACtB,SAAA,CAAAQ,EAAAA,KAAC,OAAA,CAAK,UAAWR,EAAAA,QAAO,kBACrB,SAAA,CAAAT,GAAe,MACde,EAAAA,IAAC,OAAA,CAAK,UAAWN,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAC5D,eAACS,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,WACH,EACF,EAEFH,EAAAA,IAAC,OAAA,CAAK,UAAWN,EAAAA,QAAO,gBAAkB,SAAAV,CAAA,CAAS,CAAA,EACrD,EACAgB,MAAC,OAAA,CAAK,UAAWN,EAAAA,QAAO,kBAAmB,cAAW,GACpD,SAAAM,EAAAA,IAACI,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOJ,EAAAA,IAACK,EAAA,CAAA,CAAgB,EAAI,CAAA,CAC9C,CAAA,CAAA,CACF,CAAA,CAAA,CAGN"}

package/dist/components/dropdown/Dropdown.css

@@ -0,0 +1 @@
+._dropdown_1v31c_2{display:inline-flex;align-items:center;background:transparent;border:0;border-radius:var(--radius-s);cursor:pointer;font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);color:var(--center-channel-color);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:background-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);padding:0}._dropdown_1v31c_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._dropdown_1v31c_2:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._dropdown_1v31c_2:active:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.12)}._dropdown_1v31c_2:disabled{opacity:.56;cursor:not-allowed}._dropdown_1v31c_2 .button__label{display:contents}._dropdown__trigger_1v31c_34{display:inline-flex;align-items:center}._dropdown__content_1v31c_38{display:inline-flex;align-items:center;flex-shrink:0}._dropdown__leading-icon_1v31c_43{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}._dropdown__label_1v31c_50{white-space:nowrap;color:inherit}._dropdown__chevron_1v31c_54{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit;transition:transform var(--duration-quick) var(--ease-transition)}._dropdown__chevron_1v31c_54 svg{display:block;width:var(--icon-size-12);height:var(--icon-size-12)}._dropdown--open_1v31c_67 ._dropdown__chevron_1v31c_54{transform:rotate(180deg)}._dropdown--size-x-small_1v31c_70{padding-left:var(--spacing-xxxs);padding-right:var(--spacing-xxxxs)}._dropdown--size-x-small_1v31c_70 ._dropdown__trigger_1v31c_34,._dropdown--size-x-small_1v31c_70 ._dropdown__content_1v31c_38{gap:var(--spacing-xxxs)}._dropdown--size-x-small_1v31c_70 ._dropdown__label_1v31c_50{font-size:var(--font-size-50);line-height:var(--line-height-50);letter-spacing:.01em}._dropdown--size-x-small_1v31c_70 ._dropdown__leading-icon_1v31c_43 svg{width:var(--icon-size-12);height:var(--icon-size-12)}._dropdown--size-small_1v31c_89{padding:var(--spacing-xxxxs) var(--spacing-xxxxs) var(--spacing-xxxxs) var(--spacing-xxxs)}._dropdown--size-small_1v31c_89 ._dropdown__trigger_1v31c_34,._dropdown--size-small_1v31c_89 ._dropdown__content_1v31c_38{gap:var(--spacing-xxxs)}._dropdown--size-small_1v31c_89 ._dropdown__label_1v31c_50{font-size:var(--font-size-75);line-height:var(--line-height-75)}._dropdown--size-small_1v31c_89 ._dropdown__leading-icon_1v31c_43 svg{width:var(--icon-size-12);height:var(--icon-size-12)}._dropdown--size-medium_1v31c_106{padding:var(--spacing-xxxxs) var(--spacing-xxxxs) var(--spacing-xxxxs) var(--spacing-xxxs)}._dropdown--size-medium_1v31c_106 ._dropdown__trigger_1v31c_34{gap:var(--spacing-xxxs)}._dropdown--size-medium_1v31c_106 ._dropdown__content_1v31c_38{gap:var(--spacing-xs)}._dropdown--size-medium_1v31c_106 ._dropdown__label_1v31c_50{font-size:var(--font-size-100);line-height:var(--line-height-100)}._dropdown--size-medium_1v31c_106 ._dropdown__chevron_1v31c_54 svg{width:var(--icon-size-16);height:var(--icon-size-16)}._dropdown--size-medium_1v31c_106 ._dropdown__leading-icon_1v31c_43 svg{width:var(--icon-size-16);height:var(--icon-size-16)}._dropdown--size-medium_1v31c_106._dropdown--padding-compact_1v31c_127{padding:var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-xs)}._dropdown--size-large_1v31c_130{padding:var(--spacing-xxxxs) var(--spacing-xxxs) var(--spacing-xxxxs) var(--spacing-xxs)}._dropdown--size-large_1v31c_130 ._dropdown__trigger_1v31c_34{gap:var(--spacing-xxxs)}._dropdown--size-large_1v31c_130 ._dropdown__content_1v31c_38{gap:var(--spacing-s)}._dropdown--size-large_1v31c_130 ._dropdown__label_1v31c_50{font-family:var(--font-family-heading);font-size:var(--font-size-200);line-height:var(--line-height-200)}._dropdown--size-large_1v31c_130 ._dropdown__chevron_1v31c_54 svg{width:var(--icon-size-16);height:var(--icon-size-16)}._dropdown--size-x-large_1v31c_148{padding:0 var(--spacing-xxs) 0 var(--spacing-xs)}._dropdown--size-x-large_1v31c_148 ._dropdown__trigger_1v31c_34{gap:var(--spacing-xxxs)}._dropdown--size-x-large_1v31c_148 ._dropdown__content_1v31c_38{gap:var(--spacing-s)}._dropdown--size-x-large_1v31c_148 ._dropdown__label_1v31c_50{font-family:var(--font-family-heading);font-size:var(--font-size-700);line-height:var(--line-height-700)}._dropdown--size-x-large_1v31c_148 ._dropdown__chevron_1v31c_54 svg{width:var(--icon-size-20);height:var(--icon-size-20)}._dropdown--appearance-inverted_1v31c_166{color:var(--sidebar-text)}._dropdown--appearance-inverted_1v31c_166:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._dropdown--appearance-inverted_1v31c_166:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.2)}

package/dist/components/dropdown/Dropdown.d.ts

@@ -0,0 +1,26 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type DropdownSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
+export type DropdownAppearance = 'default' | 'inverted';
+export type DropdownPadding = 'tight' | 'compact';
+export interface DropdownProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {
+    /** Optional CSS class name. */
+    className?: string;
+    /** Label text shown in the trigger. */
+    children: ReactNode;
+    /** Optional leading icon — pass `<Icon glyph={<SomeIcon />} />`; Dropdown provides the correct size via context. */
+    leadingIcon?: ReactNode;
+    /** Trigger inset. Tight is default; Compact adds more padding (Figma). Default: Tight. */
+    padding?: DropdownPadding;
+    /** Size variant. Default: Medium. */
+    size?: DropdownSize;
+    /** Light or dark background context. Default: Default. */
+    appearance?: DropdownAppearance;
+    /** When true, the dropdown is in an open/active state. */
+    isOpen?: boolean;
+}
+/**
+ * A Dropdown is a heading-weight trigger that opens a Popover Menu. It reads as a title —
+ * semibold, with a chevron — and signals "this label is also a control."
+ */
+export default function Dropdown({ className, children, leadingIcon, padding, size, appearance, isOpen, disabled, type, ...rest }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/components/dropdown/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ7D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAChF,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,CAAC;AAElD,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,CACP;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,oHAAoH;IACpH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,qCAAqC;IACrC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,SAAc,EACd,QAAQ,EACR,WAAW,EACX,OAAiB,EACjB,IAAe,EACf,UAAsB,EACtB,MAAc,EACd,QAAQ,EACR,IAAe,EACf,GAAG,IAAI,EACR,EAAE,aAAa,2CA+Cf"}

package/dist/components/dropdown/Dropdown.js

@@ -0,0 +1,51 @@
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import C from "../button/Button.js";
+import { toKebab as g } from "../../utils/string.js";
+import v, { IconSlotContext as x } from "../icon/Icon.js";
+import __N from "@mattermost/compass-icons/components/chevron-down.js";const N=__N&&__N.default?__N.default:__N;
+import o from "./Dropdown.module.scss.js";
+function I({
+  className: s = "",
+  children: d,
+  leadingIcon: a,
+  padding: t = "tight",
+  size: p = "medium",
+  appearance: i = "default",
+  isOpen: e = !1,
+  disabled: l,
+  type: c = "button",
+  ...m
+}) {
+  const h = o[`dropdown--size-${g(p)}`], u = t === "compact" ? o["dropdown--padding-compact"] : "", w = i === "inverted" ? o["dropdown--appearance-inverted"] : "", f = e ? o["dropdown--open"] : "", _ = [
+    o.dropdown,
+    h,
+    u,
+    w,
+    f,
+    s
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n(
+    C,
+    {
+      className: _,
+      emphasis: "quaternary",
+      size: "medium",
+      type: c,
+      disabled: l,
+      "aria-expanded": e,
+      "aria-haspopup": "listbox",
+      ...m,
+      children: /* @__PURE__ */ r("span", { className: o.dropdown__trigger, children: [
+        /* @__PURE__ */ r("span", { className: o.dropdown__content, children: [
+          a != null && /* @__PURE__ */ n("span", { className: o["dropdown__leading-icon"], "aria-hidden": !0, children: /* @__PURE__ */ n(x.Provider, { value: { size: "16" }, children: a }) }),
+          /* @__PURE__ */ n("span", { className: o.dropdown__label, children: d })
+        ] }),
+        /* @__PURE__ */ n("span", { className: o.dropdown__chevron, "aria-hidden": !0, children: /* @__PURE__ */ n(v, { size: "12", glyph: /* @__PURE__ */ n(N, {}) }) })
+      ] })
+    }
+  );
+}
+export {
+  I as default
+};
+//# sourceMappingURL=Dropdown.js.map

package/dist/components/dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport { toKebab } from '@/utils/string';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport styles from './Dropdown.module.scss';\n\nexport type DropdownSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';\nexport type DropdownAppearance = 'default' | 'inverted';\nexport type DropdownPadding = 'tight' | 'compact';\n\nexport interface DropdownProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'size'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Label text shown in the trigger. */\n  children: ReactNode;\n  /** Optional leading icon — pass `<Icon glyph={<SomeIcon />} />`; Dropdown provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  /** Trigger inset. Tight is default; Compact adds more padding (Figma). Default: Tight. */\n  padding?: DropdownPadding;\n  /** Size variant. Default: Medium. */\n  size?: DropdownSize;\n  /** Light or dark background context. Default: Default. */\n  appearance?: DropdownAppearance;\n  /** When true, the dropdown is in an open/active state. */\n  isOpen?: boolean;\n}\n\n/**\n * A Dropdown is a heading-weight trigger that opens a Popover Menu. It reads as a title —\n * semibold, with a chevron — and signals \"this label is also a control.\"\n */\nexport default function Dropdown({\n  className = '',\n  children,\n  leadingIcon,\n  padding = 'tight',\n  size = 'medium',\n  appearance = 'default',\n  isOpen = false,\n  disabled,\n  type = 'button',\n  ...rest\n}: DropdownProps) {\n  const sizeClass = styles[`dropdown--size-${toKebab(size)}`];\n  const paddingClass =\n    padding === 'compact' ? styles['dropdown--padding-compact'] : '';\n  const appearanceClass =\n    appearance === 'inverted' ? styles['dropdown--appearance-inverted'] : '';\n  const openClass = isOpen ? styles['dropdown--open'] : '';\n\n  const rootClass = [\n    styles.dropdown,\n    sizeClass,\n    paddingClass,\n    appearanceClass,\n    openClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Button\n      className={rootClass}\n      emphasis=\"quaternary\"\n      size=\"medium\"\n      type={type}\n      disabled={disabled}\n      aria-expanded={isOpen}\n      aria-haspopup=\"listbox\"\n      {...rest}\n    >\n      <span className={styles.dropdown__trigger}>\n        <span className={styles.dropdown__content}>\n          {leadingIcon != null && (\n            <span className={styles['dropdown__leading-icon']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingIcon}\n              </IconSlotContext.Provider>\n            </span>\n          )}\n          <span className={styles.dropdown__label}>{children}</span>\n        </span>\n        <span className={styles.dropdown__chevron} aria-hidden>\n          <Icon size=\"12\" glyph={<ChevronDownIcon />} />\n        </span>\n      </span>\n    </Button>\n  );\n}\n"],"names":["Dropdown","className","children","leadingIcon","padding","size","appearance","isOpen","disabled","type","rest","sizeClass","styles","toKebab","paddingClass","appearanceClass","openClass","rootClass","jsx","Button","jsxs","IconSlotContext","Icon","ChevronDownIcon"],"mappings":";;;;;;AAoCA,SAAwBA,EAAS;AAAA,EAC/B,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,YAAAC,IAAa;AAAA,EACb,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAYC,EAAO,kBAAkBC,EAAQR,CAAI,CAAC,EAAE,GACpDS,IACJV,MAAY,YAAYQ,EAAO,2BAA2B,IAAI,IAC1DG,IACJT,MAAe,aAAaM,EAAO,+BAA+B,IAAI,IAClEI,IAAYT,IAASK,EAAO,gBAAgB,IAAI,IAEhDK,IAAY;AAAA,IAChBL,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACAC;AAAA,IACAf;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAiB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,MACX,UAAS;AAAA,MACT,MAAK;AAAA,MACL,MAAAR;AAAA,MACA,UAAAD;AAAA,MACA,iBAAeD;AAAA,MACf,iBAAc;AAAA,MACb,GAAGG;AAAA,MAEJ,UAAA,gBAAAU,EAAC,QAAA,EAAK,WAAWR,EAAO,mBACtB,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAWR,EAAO,mBACrB,UAAA;AAAA,UAAAT,KAAe,QACd,gBAAAe,EAAC,QAAA,EAAK,WAAWN,EAAO,wBAAwB,GAAG,eAAW,IAC5D,4BAACS,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,aACH,GACF;AAAA,UAEF,gBAAAH,EAAC,QAAA,EAAK,WAAWN,EAAO,iBAAkB,UAAAV,EAAA,CAAS;AAAA,QAAA,GACrD;AAAA,QACA,gBAAAgB,EAAC,QAAA,EAAK,WAAWN,EAAO,mBAAmB,eAAW,IACpD,UAAA,gBAAAM,EAACI,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAJ,EAACK,GAAA,CAAA,CAAgB,GAAI,EAAA,CAC9C;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/dropdown/Dropdown.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Dropdown.css');const o="_dropdown_1v31c_2",d="_dropdown__trigger_1v31c_34",_="_dropdown__content_1v31c_38",n="_dropdown__label_1v31c_50",r="_dropdown__chevron_1v31c_54",e={dropdown:o,dropdown__trigger:d,dropdown__content:_,"dropdown__leading-icon":"_dropdown__leading-icon_1v31c_43",dropdown__label:n,dropdown__chevron:r,"dropdown--open":"_dropdown--open_1v31c_67","dropdown--size-x-small":"_dropdown--size-x-small_1v31c_70","dropdown--size-small":"_dropdown--size-small_1v31c_89","dropdown--size-medium":"_dropdown--size-medium_1v31c_106","dropdown--padding-compact":"_dropdown--padding-compact_1v31c_127","dropdown--size-large":"_dropdown--size-large_1v31c_130","dropdown--size-x-large":"_dropdown--size-x-large_1v31c_148","dropdown--appearance-inverted":"_dropdown--appearance-inverted_1v31c_166"};exports.default=e;exports.dropdown=o;exports.dropdown__chevron=r;exports.dropdown__content=_;exports.dropdown__label=n;exports.dropdown__trigger=d;
+//# sourceMappingURL=Dropdown.module.scss.cjs.map

package/dist/components/dropdown/Dropdown.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/dropdown/Dropdown.module.scss.js

@@ -0,0 +1,25 @@
+import './Dropdown.css';const o = "_dropdown_1v31c_2", d = "_dropdown__trigger_1v31c_34", _ = "_dropdown__content_1v31c_38", n = "_dropdown__label_1v31c_50", r = "_dropdown__chevron_1v31c_54", p = {
+  dropdown: o,
+  dropdown__trigger: d,
+  dropdown__content: _,
+  "dropdown__leading-icon": "_dropdown__leading-icon_1v31c_43",
+  dropdown__label: n,
+  dropdown__chevron: r,
+  "dropdown--open": "_dropdown--open_1v31c_67",
+  "dropdown--size-x-small": "_dropdown--size-x-small_1v31c_70",
+  "dropdown--size-small": "_dropdown--size-small_1v31c_89",
+  "dropdown--size-medium": "_dropdown--size-medium_1v31c_106",
+  "dropdown--padding-compact": "_dropdown--padding-compact_1v31c_127",
+  "dropdown--size-large": "_dropdown--size-large_1v31c_130",
+  "dropdown--size-x-large": "_dropdown--size-x-large_1v31c_148",
+  "dropdown--appearance-inverted": "_dropdown--appearance-inverted_1v31c_166"
+};
+export {
+  p as default,
+  o as dropdown,
+  r as dropdown__chevron,
+  _ as dropdown__content,
+  n as dropdown__label,
+  d as dropdown__trigger
+};
+//# sourceMappingURL=Dropdown.module.scss.js.map

package/dist/components/dropdown/Dropdown.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/components/dropdown/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Dropdown.cjs");exports.Dropdown=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/dropdown/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/dropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EACV,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,eAAe,GAChB,MAAM,YAAY,CAAC"}

package/dist/components/dropdown/index.js

@@ -0,0 +1,5 @@
+import { default as a } from "./Dropdown.js";
+export {
+  a as Dropdown
+};
+//# sourceMappingURL=index.js.map

package/dist/components/dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/emoji/Emoji.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),e=require("./Emoji.module.scss.cjs"),a={10:e.default["emoji--size-10"],12:e.default["emoji--size-12"],16:e.default["emoji--size-16"],20:e.default["emoji--size-20"],24:e.default["emoji--size-24"],28:e.default["emoji--size-28"],32:e.default["emoji--size-32"],40:e.default["emoji--size-40"],52:e.default["emoji--size-52"],64:e.default["emoji--size-64"],104:e.default["emoji--size-104"]};function d({className:i="",emoji:o,size:t="24"}){const s=a[t],l=[e.default.emoji,s,i].filter(Boolean).join(" ");return u.jsx("span",{className:l,role:"img","aria-hidden":!0,children:o})}exports.default=d;
+//# sourceMappingURL=Emoji.cjs.map

package/dist/components/emoji/Emoji.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.cjs","sources":["../../../src/components/emoji/Emoji.tsx"],"sourcesContent":["import styles from './Emoji.module.scss';\n\nexport type EmojiSize =\n  | '10'\n  | '12'\n  | '16'\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '52'\n  | '64'\n  | '104';\n\nexport interface EmojiProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Emoji character(s) to display (e.g. \"👍\", \"🎉\"). */\n  emoji: string;\n  /** Size from the Mattermost icon scale. Default 24. */\n  size?: EmojiSize;\n}\n\nconst SIZE_CLASS_MAP: Record<EmojiSize, string> = {\n  '10': styles['emoji--size-10'],\n  '12': styles['emoji--size-12'],\n  '16': styles['emoji--size-16'],\n  '20': styles['emoji--size-20'],\n  '24': styles['emoji--size-24'],\n  '28': styles['emoji--size-28'],\n  '32': styles['emoji--size-32'],\n  '40': styles['emoji--size-40'],\n  '52': styles['emoji--size-52'],\n  '64': styles['emoji--size-64'],\n  '104': styles['emoji--size-104'],\n};\n\n/**\n * Emoji is a compact, inline visual for conveying emotion, intent, or status — on messages,\n * in reactions, in pickers, or sprinkled through UI copy. The component standardises sizing\n * so native Unicode and custom workspace emoji render at a consistent footprint alongside\n * Icon.\n */\nexport default function Emoji({\n  className = '',\n  emoji,\n  size = '24',\n}: EmojiProps) {\n  const sizeClass = SIZE_CLASS_MAP[size];\n  const rootClass = [styles.emoji, sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={rootClass} role=\"img\" aria-hidden>\n      {emoji}\n    </span>\n  );\n}\n"],"names":["SIZE_CLASS_MAP","styles","Emoji","className","emoji","size","sizeClass","rootClass","jsx"],"mappings":"sLAwBMA,EAA4C,CAChD,GAAMC,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,IAAOA,EAAAA,QAAO,iBAAiB,CACjC,EAQA,SAAwBC,EAAM,CAC5B,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EAAO,IACT,EAAe,CACb,MAAMC,EAAYN,EAAeK,CAAI,EAC/BE,EAAY,CAACN,UAAO,MAAOK,EAAWH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEK,MAAC,QAAK,UAAWD,EAAW,KAAK,MAAM,cAAW,GAC/C,SAAAH,CAAA,CACH,CAEJ"}

package/dist/components/emoji/Emoji.css

@@ -0,0 +1 @@
+._emoji_1pc05_2{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}._emoji--size-10_1pc05_10{width:var(--icon-size-10);height:var(--icon-size-10);font-size:var(--icon-size-10)}._emoji--size-12_1pc05_15{width:var(--icon-size-12);height:var(--icon-size-12);font-size:var(--icon-size-12)}._emoji--size-16_1pc05_20{width:var(--icon-size-16);height:var(--icon-size-16);font-size:var(--icon-size-16)}._emoji--size-20_1pc05_25{width:var(--icon-size-20);height:var(--icon-size-20);font-size:var(--icon-size-20)}._emoji--size-24_1pc05_30{width:var(--icon-size-24);height:var(--icon-size-24);font-size:var(--icon-size-24)}._emoji--size-28_1pc05_35{width:var(--icon-size-28);height:var(--icon-size-28);font-size:var(--icon-size-28)}._emoji--size-32_1pc05_40{width:var(--icon-size-32);height:var(--icon-size-32);font-size:var(--icon-size-32)}._emoji--size-40_1pc05_45{width:var(--icon-size-40);height:var(--icon-size-40);font-size:var(--icon-size-40)}._emoji--size-52_1pc05_50{width:var(--icon-size-52);height:var(--icon-size-52);font-size:var(--icon-size-52)}._emoji--size-64_1pc05_55{width:var(--icon-size-64);height:var(--icon-size-64);font-size:var(--icon-size-64)}._emoji--size-104_1pc05_60{width:var(--icon-size-104);height:var(--icon-size-104);font-size:var(--icon-size-104)}

package/dist/components/emoji/Emoji.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.d.ts","sourceRoot":"","sources":["../../../src/components/emoji/Emoji.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,GACjB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,CAAC;AAEV,MAAM,WAAW,UAAU;IACzB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAgBD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,SAAc,EACd,KAAK,EACL,IAAW,GACZ,EAAE,UAAU,2CAWZ"}

package/dist/components/emoji/Emoji.js

@@ -0,0 +1,27 @@
+import { jsx as r } from "react/jsx-runtime";
+import e from "./Emoji.module.scss.js";
+const t = {
+  10: e["emoji--size-10"],
+  12: e["emoji--size-12"],
+  16: e["emoji--size-16"],
+  20: e["emoji--size-20"],
+  24: e["emoji--size-24"],
+  28: e["emoji--size-28"],
+  32: e["emoji--size-32"],
+  40: e["emoji--size-40"],
+  52: e["emoji--size-52"],
+  64: e["emoji--size-64"],
+  104: e["emoji--size-104"]
+};
+function a({
+  className: i = "",
+  emoji: o,
+  size: s = "24"
+}) {
+  const m = t[s], j = [e.emoji, m, i].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r("span", { className: j, role: "img", "aria-hidden": !0, children: o });
+}
+export {
+  a as default
+};
+//# sourceMappingURL=Emoji.js.map

package/dist/components/emoji/Emoji.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.js","sources":["../../../src/components/emoji/Emoji.tsx"],"sourcesContent":["import styles from './Emoji.module.scss';\n\nexport type EmojiSize =\n  | '10'\n  | '12'\n  | '16'\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '52'\n  | '64'\n  | '104';\n\nexport interface EmojiProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Emoji character(s) to display (e.g. \"👍\", \"🎉\"). */\n  emoji: string;\n  /** Size from the Mattermost icon scale. Default 24. */\n  size?: EmojiSize;\n}\n\nconst SIZE_CLASS_MAP: Record<EmojiSize, string> = {\n  '10': styles['emoji--size-10'],\n  '12': styles['emoji--size-12'],\n  '16': styles['emoji--size-16'],\n  '20': styles['emoji--size-20'],\n  '24': styles['emoji--size-24'],\n  '28': styles['emoji--size-28'],\n  '32': styles['emoji--size-32'],\n  '40': styles['emoji--size-40'],\n  '52': styles['emoji--size-52'],\n  '64': styles['emoji--size-64'],\n  '104': styles['emoji--size-104'],\n};\n\n/**\n * Emoji is a compact, inline visual for conveying emotion, intent, or status — on messages,\n * in reactions, in pickers, or sprinkled through UI copy. The component standardises sizing\n * so native Unicode and custom workspace emoji render at a consistent footprint alongside\n * Icon.\n */\nexport default function Emoji({\n  className = '',\n  emoji,\n  size = '24',\n}: EmojiProps) {\n  const sizeClass = SIZE_CLASS_MAP[size];\n  const rootClass = [styles.emoji, sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={rootClass} role=\"img\" aria-hidden>\n      {emoji}\n    </span>\n  );\n}\n"],"names":["SIZE_CLASS_MAP","styles","Emoji","className","emoji","size","sizeClass","rootClass","jsx"],"mappings":";;AAwBA,MAAMA,IAA4C;AAAA,EAChD,IAAMC,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,KAAOA,EAAO,iBAAiB;AACjC;AAQA,SAAwBC,EAAM;AAAA,EAC5B,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,MAAAC,IAAO;AACT,GAAe;AACb,QAAMC,IAAYN,EAAeK,CAAI,GAC/BE,IAAY,CAACN,EAAO,OAAOK,GAAWH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAK,EAAC,UAAK,WAAWD,GAAW,MAAK,OAAM,eAAW,IAC/C,UAAAH,EAAA,CACH;AAEJ;"}

package/dist/components/emoji/Emoji.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Emoji.css');const e="_emoji_1pc05_2",i={emoji:e,"emoji--size-10":"_emoji--size-10_1pc05_10","emoji--size-12":"_emoji--size-12_1pc05_15","emoji--size-16":"_emoji--size-16_1pc05_20","emoji--size-20":"_emoji--size-20_1pc05_25","emoji--size-24":"_emoji--size-24_1pc05_30","emoji--size-28":"_emoji--size-28_1pc05_35","emoji--size-32":"_emoji--size-32_1pc05_40","emoji--size-40":"_emoji--size-40_1pc05_45","emoji--size-52":"_emoji--size-52_1pc05_50","emoji--size-64":"_emoji--size-64_1pc05_55","emoji--size-104":"_emoji--size-104_1pc05_60"};exports.default=i;exports.emoji=e;
+//# sourceMappingURL=Emoji.module.scss.cjs.map

package/dist/components/emoji/Emoji.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/emoji/Emoji.module.scss.js

@@ -0,0 +1,19 @@
+import './Emoji.css';const e = "_emoji_1pc05_2", i = {
+  emoji: e,
+  "emoji--size-10": "_emoji--size-10_1pc05_10",
+  "emoji--size-12": "_emoji--size-12_1pc05_15",
+  "emoji--size-16": "_emoji--size-16_1pc05_20",
+  "emoji--size-20": "_emoji--size-20_1pc05_25",
+  "emoji--size-24": "_emoji--size-24_1pc05_30",
+  "emoji--size-28": "_emoji--size-28_1pc05_35",
+  "emoji--size-32": "_emoji--size-32_1pc05_40",
+  "emoji--size-40": "_emoji--size-40_1pc05_45",
+  "emoji--size-52": "_emoji--size-52_1pc05_50",
+  "emoji--size-64": "_emoji--size-64_1pc05_55",
+  "emoji--size-104": "_emoji--size-104_1pc05_60"
+};
+export {
+  i as default,
+  e as emoji
+};
+//# sourceMappingURL=Emoji.module.scss.js.map

package/dist/components/emoji/Emoji.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/components/emoji/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Emoji.cjs");exports.Emoji=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/emoji/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/emoji/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/emoji/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/emoji/index.js

@@ -0,0 +1,5 @@
+import { default as e } from "./Emoji.js";
+export {
+  e as Emoji
+};
+//# sourceMappingURL=index.js.map

package/dist/components/emoji/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/emoji-button/EmojiButton.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),_=require("../../utils/string.cjs"),E=require("../emoji/Emoji.cjs"),t=require("./EmojiButton.module.scss.cjs"),a={"x-small":"12",small:"20",medium:"24",large:"28"};function p({className:i="",emoji:l,size:s="small",padding:u="default",active:n=!1,toggled:e,type:c="button",...d}){const r=t.default[`emoji-button--size-${_.toKebab(s)}`],m=u==="compact"?t.default["emoji-button--padding-compact"]:"",j=n?t.default["emoji-button--active"]:"",f=e?t.default["emoji-button--toggled"]:"",b=[t.default["emoji-button"],r,m,j,f,i].filter(Boolean).join(" ");return o.jsx("button",{type:c,className:b,"aria-pressed":e!==void 0?e:void 0,...d,children:o.jsx("span",{className:t.default["emoji-button__emoji"],children:o.jsx(E.default,{emoji:l,size:a[s]})})})}exports.EMOJI_BUTTON_EMOJI_SIZES=a;exports.default=p;
+//# sourceMappingURL=EmojiButton.cjs.map

package/dist/components/emoji-button/EmojiButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiButton.cjs","sources":["../../../src/components/emoji-button/EmojiButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react';\nimport { toKebab } from '@/utils/string';\nimport Emoji from '@/components/emoji/Emoji';\nimport type { EmojiSize } from '@/components/emoji/Emoji';\nimport styles from './EmojiButton.module.scss';\n\nexport type EmojiButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\n/** Emoji size (px string) per EmojiButton size. Use when you need to override the emoji independently. */\nexport const EMOJI_BUTTON_EMOJI_SIZES: Record<EmojiButtonSize, EmojiSize> = {\n  'x-small': '12',\n  small: '20',\n  medium: '24',\n  large: '28',\n};\n\nexport type EmojiButtonPadding = 'default' | 'compact';\n\nexport interface EmojiButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Emoji character(s) to display (e.g. \"👍\", \"🎉\"). */\n  emoji: string;\n  /** Size variant. Default: small. */\n  size?: EmojiButtonSize;\n  /** Reduces padding within each size tier, matching IconButton compact. Default: default. */\n  padding?: EmojiButtonPadding;\n  /** When true, forces the subtler pressed/active visual. */\n  active?: boolean;\n  /** When true, shows toggled/selected state. */\n  toggled?: boolean;\n}\n\n/**\n * EmojiButton is a compact, label-free button that renders an emoji as its visual — the\n * emoji-picker counterpart to IconButton. Use it for emoji selection grids, skin-tone\n * selectors, and any surface where an emoji character is the primary affordance.\n *\n * Every EmojiButton must pair with an `aria-label` that names the action or the emoji it\n * represents.\n */\nexport default function EmojiButton({\n  className = '',\n  emoji,\n  size = 'small',\n  padding = 'default',\n  active = false,\n  toggled,\n  type = 'button',\n  ...rest\n}: EmojiButtonProps) {\n  const sizeClass = styles[`emoji-button--size-${toKebab(size)}`];\n  const paddingClass =\n    padding === 'compact' ? styles['emoji-button--padding-compact'] : '';\n  const activeClass = active ? styles['emoji-button--active'] : '';\n  const toggledClass = toggled ? styles['emoji-button--toggled'] : '';\n\n  const rootClass = [\n    styles['emoji-button'],\n    sizeClass,\n    paddingClass,\n    activeClass,\n    toggledClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type={type}\n      className={rootClass}\n      aria-pressed={toggled !== undefined ? toggled : undefined}\n      {...rest}\n    >\n      <span className={styles['emoji-button__emoji']}>\n        <Emoji emoji={emoji} size={EMOJI_BUTTON_EMOJI_SIZES[size]} />\n      </span>\n    </button>\n  );\n}\n"],"names":["EMOJI_BUTTON_EMOJI_SIZES","EmojiButton","className","emoji","size","padding","active","toggled","type","rest","sizeClass","styles","toKebab","paddingClass","activeClass","toggledClass","rootClass","jsx","Emoji"],"mappings":"gQASaA,EAA+D,CAC1E,UAAW,KACX,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EA2BA,SAAwBC,EAAY,CAClC,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EAAO,QACP,QAAAC,EAAU,UACV,OAAAC,EAAS,GACT,QAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EAAqB,CACnB,MAAMC,EAAYC,EAAAA,QAAO,sBAAsBC,EAAAA,QAAQR,CAAI,CAAC,EAAE,EACxDS,EACJR,IAAY,UAAYM,EAAAA,QAAO,+BAA+B,EAAI,GAC9DG,EAAcR,EAASK,UAAO,sBAAsB,EAAI,GACxDI,EAAeR,EAAUI,UAAO,uBAAuB,EAAI,GAE3DK,EAAY,CAChBL,EAAAA,QAAO,cAAc,EACrBD,EACAG,EACAC,EACAC,EACAb,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEe,EAAAA,IAAC,SAAA,CACC,KAAAT,EACA,UAAWQ,EACX,eAAcT,IAAY,OAAYA,EAAU,OAC/C,GAAGE,EAEJ,SAAAQ,EAAAA,IAAC,OAAA,CAAK,UAAWN,EAAAA,QAAO,qBAAqB,EAC3C,SAAAM,EAAAA,IAACC,EAAAA,QAAA,CAAM,MAAAf,EAAc,KAAMH,EAAyBI,CAAI,EAAG,CAAA,CAC7D,CAAA,CAAA,CAGN"}

package/dist/components/emoji-button/EmojiButton.css

@@ -0,0 +1 @@
+._emoji-button_s9fno_2{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-family-body);border-radius:var(--radius-s);border:0;cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);background-color:transparent;outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._emoji-button_s9fno_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._emoji-button_s9fno_2:disabled{cursor:not-allowed;opacity:.5}._emoji-button_s9fno_2:hover:not(:disabled):not(:active):not(._emoji-button--active_s9fno_24):not(._emoji-button--toggled_s9fno_24){background-color:rgba(var(--center-channel-color-rgb),.08)}._emoji-button__emoji_s9fno_27{display:inline-flex;transition:transform var(--duration-quick) var(--ease-transition)}._emoji-button_s9fno_2:hover:not(:disabled) ._emoji-button__emoji_s9fno_27{transform:scale(1.2)}._emoji-button_s9fno_2:active:not(:disabled):not(._emoji-button--toggled_s9fno_24){background-color:rgba(var(--button-bg-rgb),.08)}._emoji-button--size-x-small_s9fno_37{width:24px;height:24px;padding:var(--spacing-xxxs)}._emoji-button--size-x-small_s9fno_37._emoji-button--padding-compact_s9fno_42{width:20px;height:20px;padding:2px}._emoji-button--size-small_s9fno_47{width:32px;height:32px;padding:var(--spacing-xxs)}._emoji-button--size-small_s9fno_47._emoji-button--padding-compact_s9fno_42{width:28px;height:28px;padding:var(--spacing-xxxs)}._emoji-button--size-medium_s9fno_57{width:40px;height:40px;padding:var(--spacing-xs)}._emoji-button--size-medium_s9fno_57._emoji-button--padding-compact_s9fno_42{width:36px;height:36px;padding:var(--spacing-xxs)}._emoji-button--size-large_s9fno_67{width:48px;height:48px;padding:var(--spacing-s)}._emoji-button--size-large_s9fno_67._emoji-button--padding-compact_s9fno_42{width:44px;height:44px;padding:var(--spacing-xs)}._emoji-button--active_s9fno_24:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._emoji-button--active_s9fno_24:not(:disabled):hover:not(:disabled):not(:active){background-color:rgba(var(--button-bg-rgb),.12)}._emoji-button--active_s9fno_24:not(:disabled):active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16)}._emoji-button--toggled_s9fno_24{background-color:var(--button-bg)}._emoji-button--toggled_s9fno_24:hover:not(:disabled):not(:active){background-color:color-mix(in srgb,black 8%,var(--button-bg))}._emoji-button--toggled_s9fno_24:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--button-bg))}