se-design 1.0.90-dev.0 → 1.0.91-r-dev.1

package/dist/index24.js.map

@@ -1 +1 @@
-{"version":3,"file":"index24.js","sources":["../src/components/ColorCodedLabel/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Badge } from 'src/components/Badge';\n\nexport type ColorCodedLabelProps = {\n  label: string;\n  tag?: string;\n  color?: string;\n  onClick?: () => void;\n};\n\nexport const ColorCodedLabel: FC<ColorCodedLabelProps> = (props) => {\n  const { label, color, onClick = () => {}, tag } = props;\n  return (\n    <div\n      className=\"se-design-color-coded-label flex items-center gap-2\"\n      onClick={onClick}\n    >\n      {color && <span className=\"w-[15px] h-[15px] rounded-[3px] inline-block\" style={{ backgroundColor: color }}></span>}\n      <div>{label}</div>\n      {tag && <Badge label={tag} />}\n    </div>\n  );\n};\n"],"names":["React__default","Badge","ColorCodedLabel","props","label","color","onClick","tag","React","createElement","className","style","backgroundColor"],"mappings":"AAUO,OAAAA,OAAA;AAAA,SAAA,SAAAC,SAAA;AAAA,MAAMC,IAA6CC,CAAAA,MAAU;AAClE,QAAM;AAAA,IAAEC,OAAAA;AAAAA,IAAOC,OAAAA;AAAAA,IAAOC,SAAAA,IAAUA,MAAM;AAAA,IAAC;AAAA,IAAGC,KAAAA;AAAAA,EAAAA,IAAQJ;AAClD,SACEK,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAU;AAAA,IACVJ,SAAAA;AAAAA,EAAAA,GAECD,KAASG,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,IAA+CC,OAAO;AAAA,MAAEC,iBAAiBP;AAAAA,IAAAA;AAAAA,EAAM,CAAS,GAClHG,gBAAAA,EAAAC,cAAA,OAAA,MAAML,CAAW,GAChBG,KAAOC,gBAAAA,EAAAC,cAACR,GAAK;AAAA,IAACG,OAAOG;AAAAA,EAAAA,CAAM,CACzB;AAET;"}
+{"version":3,"file":"index24.js","sources":["../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { FC, useState, useEffect } from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport './style.scss';\n\nexport interface CheckboxProps {\n  className?: string;\n  automationId?: string;\n  defaultChecked?: boolean;\n  /**\n   * Controlled checked value. When provided, the checkbox is controlled by the parent\n   * and its visual state always reflects this prop. Use `onChange` to update the parent state.\n   */\n  checked?: boolean;\n  onChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;\n  disabled?: boolean;\n  checkMarkType?: 'tick' | 'minus-checkbox' | '';\n  label?: string;\n  disabledLabel?: string;\n  containerAutomationId?: string;\n  /**\n   * Explicit accessible name for the checkbox.\n   * Used as fallback when ariaLabelledBy is not provided and no internal label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this checkbox (for screen reader association).\n   * Typically used when checkbox is part of a larger labelled context.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this checkbox (provides additional context).\n   * Often used for help text or instructions.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * ID of the element controlled by this checkbox (e.g. an expandable region).\n   */\n  ariaControls?: string;\n  /**\n   * Override the default tabIndex. Pass -1 when the checkbox is used as a\n   * visual-only indicator inside a composite widget (e.g. listbox option).\n   */\n  tabIndex?: number;\n  /**\n   * When true, sets aria-hidden=\"true\" on the checkbox container so the\n   * checkbox role and state are hidden from assistive technology. Use when\n   * the checkbox is purely visual (e.g. inside a role=\"option\" that already\n   * conveys selection state via aria-selected).\n   */\n  ariaHidden?: boolean;\n}\n\nexport const Checkbox: FC<CheckboxProps> = ({\n  className = '',\n  automationId = '',\n  defaultChecked = false,\n  checked,\n  disabled = false,\n  onChange,\n  checkMarkType = '',\n  label = '',\n  disabledLabel = '',\n  containerAutomationId = '',\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy,\n  ariaControls,\n  tabIndex: tabIndexProp,\n  ariaHidden = false\n}) => {\n  const isControlled = checked !== undefined;\n  const [isChecked, setIsChecked] = useState(isControlled ? checked : defaultChecked);\n\n  useEffect(() => {\n    if (isControlled) {\n      setIsChecked(checked!);\n    } else {\n      setIsChecked(defaultChecked);\n    }\n  }, [checked, defaultChecked]);\n\n  const handleClick = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (disabled) return;\n    if (!isControlled) {\n      setIsChecked((prev) => !prev);\n    }\n    onChange?.(isControlled ? !checked : !isChecked, e);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLLabelElement | HTMLSpanElement>) => {\n    if (disabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      e.stopPropagation();\n      const newChecked = isControlled ? !checked : !isChecked;\n      if (!isControlled) {\n        setIsChecked(newChecked);\n      }\n\n      // Create a proper synthetic event for the onChange callback\n      const inputElement = e.currentTarget.closest('label')?.querySelector('input');\n      if (inputElement) {\n        const syntheticEvent = {\n          target: inputElement,\n          currentTarget: inputElement\n        } as React.ChangeEvent<HTMLInputElement>;\n        onChange?.(newChecked, syntheticEvent);\n      }\n    }\n  };\n\n  const getCheckBoxClassName = () => {\n    // Handle disabled states with proper checked status\n    if (disabled) {\n      if (isChecked && checkMarkType === 'tick') return 'disabled-tick';\n      if (isChecked && checkMarkType === 'minus-checkbox') return 'disabled-minus-checkbox';\n      if (isChecked && !checkMarkType) return 'disabled-tick'; // Default to tick for checked disabled\n      return 'disabled-default'; // Unchecked disabled\n    }\n\n    // Handle enabled states\n    if (checkMarkType === 'minus-checkbox' && isChecked) return 'minus-checkbox';\n    return isChecked ? 'checked' : 'unchecked';\n  };\n\n  const getLabelClassName = () => {\n    return disabled ? 'checkbox-label-disabled' : 'checkbox-label';\n  };\n\n  const getLabelText = () => {\n    if (disabled && disabledLabel) {\n      return disabledLabel;\n    }\n    return label;\n  };\n\n  // Generate stable IDs (persists across renders)\n  const inputId = useStableId(undefined, 'checkbox-input');\n  const labelId = label ? `${inputId}-label` : undefined;\n\n  const a11yNameAttributes = getA11yNameAttributes({\n    ariaLabelledBy,\n    internalLabelId: labelId,\n    ariaLabel,\n    ariaDescribedBy\n  });\n\n  // Determine aria-checked value: \"mixed\" for indeterminate, \"true\" for checked, \"false\" for unchecked\n  const getAriaChecked = () => {\n    if (checkMarkType === 'minus-checkbox' && isChecked) {\n      return 'mixed'; // Indeterminate/half-checked state\n    }\n    return isChecked ? 'true' : 'false';\n  };\n\n  return (\n    <div className=\"se-design-checkbox-ctn\" aria-hidden={ariaHidden ? 'true' : undefined}>\n      <label\n        role=\"checkbox\"\n        htmlFor={inputId}\n        className={`se-design-checkbox ${className} ${getCheckBoxClassName()}`}\n        data-automation-id={containerAutomationId || 'checkbox-container'}\n        tabIndex={tabIndexProp !== undefined ? tabIndexProp : disabled ? -1 : 0}\n        aria-checked={getAriaChecked()}\n        aria-disabled={disabled ? 'true' : 'false'}\n        aria-controls={ariaControls}\n        {...a11yNameAttributes}\n        onKeyDown={handleKeyDown}\n      >\n        <input\n          id={inputId}\n          type=\"checkbox\"\n          checked={isChecked}\n          onChange={handleClick}\n          disabled={disabled}\n          tabIndex={-1}\n          aria-hidden=\"true\"\n        />\n        <span className=\"checkbox-item\" data-automation-id={automationId}></span>\n        {getLabelText()?.length > 0 && (\n          <span\n            id={labelId}\n            className={getLabelClassName()}\n            data-automation-id={automationId || (label ? `checkbox-label-${label}` : 'checkbox-label')}\n          >\n            {getLabelText()}\n          </span>\n        )}\n      </label>\n    </div>\n  );\n};\n"],"names":["Checkbox","className","automationId","defaultChecked","checked","disabled","onChange","checkMarkType","label","disabledLabel","containerAutomationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaControls","tabIndex","tabIndexProp","ariaHidden","isControlled","undefined","isChecked","setIsChecked","useState","useEffect","handleClick","e","prev","handleKeyDown","key","preventDefault","stopPropagation","newChecked","inputElement","currentTarget","closest","querySelector","target","getCheckBoxClassName","getLabelClassName","getLabelText","inputId","useStableId","labelId","a11yNameAttributes","getA11yNameAttributes","internalLabelId","getAriaChecked","React","createElement","_extends","role","htmlFor","onKeyDown","id","type","length"],"mappings":"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"}

package/dist/{index236.js → index241.js}

@@ -43,4 +43,4 @@ g.displayName = "TabButton";
 export {
   g as TabButton
 };
-//# sourceMappingURL=index236.js.map
+//# sourceMappingURL=index241.js.map

package/dist/{index236.js.map → index241.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index236.js","sources":["../src/components/NavigationBar/TabButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button } from '../Button';\n\nexport interface TabButtonProps {\n  id: string;\n  label: string;\n  isSelected: boolean;\n  isDisabled?: boolean;\n  panelId?: string;\n  tabIndex: number;\n  className?: string;\n  automationId?: string;\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  onFocus: () => void;\n  onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n}\n\n/**\n * Internal TabButton component for NavigationBar.\n * Uses Button (unstyled) internally for consistent activation handling.\n * Supports forwardRef for focus management (roving tabindex).\n */\nexport const TabButton = forwardRef<HTMLButtonElement, TabButtonProps>(\n  (\n    {\n      id,\n      label,\n      isSelected,\n      isDisabled = false,\n      panelId,\n      tabIndex,\n      className = '',\n      automationId,\n      onClick,\n      onFocus,\n      onKeyDown\n    },\n    ref\n  ) => {\n    return (\n      <Button\n        ref={ref}\n        type=\"unstyled\"\n        label={label}\n        disabled={isDisabled}\n        onClick={onClick}\n        className={className}\n        automationId={automationId}\n        role=\"tab\"\n        id={id}\n        aria-selected={isSelected}\n        {...(panelId ? { 'aria-controls': panelId } : {})}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n      />\n    );\n  }\n);\n\nTabButton.displayName = 'TabButton';\n"],"names":["TabButton","id","label","isSelected","isDisabled","panelId","tabIndex","className","automationId","onClick","onFocus","onKeyDown","ref","React","createElement","Button","_extends","type","disabled","role","displayName"],"mappings":";;;;;;;;;;;AAsBO,MAAMA,sBACX,CACE;AAAA,EACEC,IAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,cAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,WAAAA;AACF,GACAC,MAGEC,gBAAAA,EAAAC,cAACC,GAAMC,EAAA;AAAA,EACLJ,KAAAA;AAAAA,EACAK,MAAK;AAAA,EACLf,OAAAA;AAAAA,EACAgB,UAAUd;AAAAA,EACVK,SAAAA;AAAAA,EACAF,WAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAW,MAAK;AAAA,EACLlB,IAAAA;AAAAA,EACA,iBAAeE;AAAAA,GACVE,IAAU;AAAA,EAAE,iBAAiBA;AAAAA,IAAY,IAAE;AAAA,EAChDC,UAAAA;AAAAA,EACAI,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,CAAqB,CACtB,CAGP;AAEAX,EAAUoB,cAAc;"}
+{"version":3,"file":"index241.js","sources":["../src/components/NavigationBar/TabButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button } from '../Button';\n\nexport interface TabButtonProps {\n  id: string;\n  label: string;\n  isSelected: boolean;\n  isDisabled?: boolean;\n  panelId?: string;\n  tabIndex: number;\n  className?: string;\n  automationId?: string;\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  onFocus: () => void;\n  onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n}\n\n/**\n * Internal TabButton component for NavigationBar.\n * Uses Button (unstyled) internally for consistent activation handling.\n * Supports forwardRef for focus management (roving tabindex).\n */\nexport const TabButton = forwardRef<HTMLButtonElement, TabButtonProps>(\n  (\n    {\n      id,\n      label,\n      isSelected,\n      isDisabled = false,\n      panelId,\n      tabIndex,\n      className = '',\n      automationId,\n      onClick,\n      onFocus,\n      onKeyDown\n    },\n    ref\n  ) => {\n    return (\n      <Button\n        ref={ref}\n        type=\"unstyled\"\n        label={label}\n        disabled={isDisabled}\n        onClick={onClick}\n        className={className}\n        automationId={automationId}\n        role=\"tab\"\n        id={id}\n        aria-selected={isSelected}\n        {...(panelId ? { 'aria-controls': panelId } : {})}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n      />\n    );\n  }\n);\n\nTabButton.displayName = 'TabButton';\n"],"names":["TabButton","id","label","isSelected","isDisabled","panelId","tabIndex","className","automationId","onClick","onFocus","onKeyDown","ref","React","createElement","Button","_extends","type","disabled","role","displayName"],"mappings":";;;;;;;;;;;AAsBO,MAAMA,sBACX,CACE;AAAA,EACEC,IAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,cAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,WAAAA;AACF,GACAC,MAGEC,gBAAAA,EAAAC,cAACC,GAAMC,EAAA;AAAA,EACLJ,KAAAA;AAAAA,EACAK,MAAK;AAAA,EACLf,OAAAA;AAAAA,EACAgB,UAAUd;AAAAA,EACVK,SAAAA;AAAAA,EACAF,WAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAW,MAAK;AAAA,EACLlB,IAAAA;AAAAA,EACA,iBAAeE;AAAAA,GACVE,IAAU;AAAA,EAAE,iBAAiBA;AAAAA,IAAY,IAAE;AAAA,EAChDC,UAAAA;AAAAA,EACAI,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,CAAqB,CACtB,CAGP;AAEAX,EAAUoB,cAAc;"}

package/dist/index25.js

@@ -1,408 +1,26 @@
-import n, { useState as Q, useRef as ve, useEffect as _, useLayoutEffect as Re } from "react";
-import { Popover as qe } from "./index19.js";
-import { Icon as we } from "./index6.js";
-import { Checkbox as He } from "./index23.js";
-import { Button as Se } from "./index4.js";
-import { InputWithIcon as Me } from "./index52.js";
-import { useStableId as X } from "./index206.js";
-import { useCombobox as xe } from "./index68.js";
-import { getFocusableElements as Ue } from "./index71.js";
-import "./index72.js";
-import { announce as je } from "./index75.js";
-function y() {
-  return y = Object.assign ? Object.assign.bind() : function(t) {
-    for (var h = 1; h < arguments.length; h++) {
-      var x = arguments[h];
-      for (var I in x) ({}).hasOwnProperty.call(x, I) && (t[I] = x[I]);
-    }
-    return t;
-  }, y.apply(null, arguments);
-}
-const rt = (t) => {
-  const h = t.selectedValue !== void 0, x = t.isOpen !== void 0, [I, Ee] = Q(!1), [E, G] = Q(""), [Ie, Y] = Q(() => t?.defaultSelectedValue ? Array.isArray(t?.defaultSelectedValue) ? t?.defaultSelectedValue : [t.defaultSelectedValue] : []), d = ve(null), C = ve(null), T = X(void 0, "dropdown-label"), Z = X(void 0, "dropdown-value"), D = X(void 0, "dropdown-listbox"), a = x ? t.isOpen : I, s = h ? Array.isArray(t.selectedValue) ? t.selectedValue : t.selectedValue ? [t.selectedValue] : [] : Ie, V = (e) => {
-    x || Ee(e), t.onOpenChange?.(e);
-  }, B = (e) => {
-    h || Y(e);
-  }, {
-    selectBy: p = "",
-    optionsUniqueBy: u = "",
-    displaySelected: Ce = !1,
-    dropDownOptions: k,
-    defaultText: g = "Select",
-    iconColor: ee = "var(--color-gray-700)",
-    disabled: A = !1,
-    dropdownClassName: De = "",
-    hasError: te = !1,
-    errorMessage: ke = "",
-    customDropdownContent: oe = null,
-    isBorderless: Pe = !1,
-    shouldShowSearch: c = !1,
-    showSearchIcon: Ne = !0,
-    searchPlaceholder: ne = "Search...",
-    searchResultEmptyMessage: re = "No results found",
-    ariaLabel: v = "",
-    customSelectedValue: R = "",
-    isWithPortal: q = !1,
-    firstOptionAsHeading: le = !1
+import e from "react";
+import { Badge as c } from "./index10.js";
+const m = (t) => {
+  const {
+    label: a,
+    color: l,
+    onClick: r = () => {
+    },
+    tag: o
   } = t;
-  _(() => {
-    if (!h) {
-      const e = t?.defaultSelectedValue ? Array.isArray(t?.defaultSelectedValue) ? t?.defaultSelectedValue : [t.defaultSelectedValue] : [];
-      Y(e);
-    }
-  }, [t?.defaultSelectedValue, h]), _(() => {
-    a || G("");
-  }, [a]), _(() => {
-    a && c && C.current && requestAnimationFrame(() => C.current?.focus());
-  }, [a, c]), Re(() => {
-    t.popoverElementRef && (t.popoverElementRef.current = d.current?.element ?? null);
-  });
-  const i = t?.type === "multi-select", ae = {
-    __noResults: !0,
-    id: "__no_results__",
-    value: "__no_results__"
-  }, se = (e) => !!e?.__noResults, $e = () => E.trim() ? (k || []).filter((e) => (e?.[p]?.toString().toLowerCase() || "").includes(E.toLowerCase())) : k || [], K = (e) => {
-    B([e]), V(!1), t?.onOptionClick?.(e), requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        d.current?.focusTrigger();
-      });
-    });
-  }, l = $e(), ie = l.length === 0 && (E.trim() || k?.length === 0), H = i ? [] : l.length > 0 ? l : ie ? [ae] : [], M = i ? l.length > 0 ? l : ie ? [ae] : [] : [], {
-    listboxProps: U,
-    getOptionProps: ce,
-    highlightedIndex: w,
-    setHighlightedIndex: de,
-    containerProps: j,
-    inputProps: L,
-    isKeyboardFocused: W
-  } = xe({
-    items: H,
-    isOpen: a && !i,
-    onOpenChange: V,
-    onSelect: (e) => {
-      K(e);
-    },
-    listboxId: D,
-    disabled: i || A,
-    hasItems: H.length > 0,
-    isItemDisabled: se
-  }), {
-    inputProps: z,
-    listboxProps: P,
-    containerProps: N,
-    highlightedIndex: S,
-    setHighlightedIndex: Ve,
-    isKeyboardFocused: J
-  } = xe({
-    items: M,
-    isOpen: a && i,
-    onOpenChange: V,
-    onSelect: () => {
-    },
-    listboxId: D,
-    disabled: !i,
-    loop: !1,
-    hasItems: M.length > 0,
-    closeOnTab: !1,
-    isItemDisabled: se
-  }), ue = i ? S : w;
-  _(() => {
-    a && l.length === 0 && (E.trim() || k?.length === 0) && ue === -1 && je(re, {
-      assertiveness: "polite",
-      batchId: "dropdown-empty-state",
-      delay: 300
-    });
-  }, [l.length, a, E, k?.length, ue]);
-  const Ae = (e, o = !1) => i ? g : o && R ? R : e?.[p] || g, Ke = () => {
-    B([]), t?.onClear?.();
-  }, me = (e, o = !1) => {
-    if (t?.renderOptionChip)
-      return t?.renderOptionChip(e, o);
-    if (i && s?.length > 0) {
-      const f = s[0]?.[p] || "", $ = s.length - 1;
-      return /* @__PURE__ */ n.createElement("div", {
-        className: "option-chip flex items-center w-full"
-      }, /* @__PURE__ */ n.createElement("div", {
-        className: `${$ > 0 ? "w-full" : "flex-1"} truncate`
-      }, `${g}: ${f}`), $ > 0 && /* @__PURE__ */ n.createElement("div", {
-        className: "flex-shrink-0"
-      }, "+", $));
-    }
-    const r = Ae(e, o), m = !!t?.label || !!t?.ariaLabelledBy, b = o && g && e?.[p] && !R && !m;
-    return /* @__PURE__ */ n.createElement("p", {
-      className: "option-chip flex flex-1 items-center justify-between"
-    }, b ? `${g}: ${r}` : r);
-  }, fe = (e) => /* @__PURE__ */ n.createElement("div", {
-    className: " w-full relative flex items-center border-b border-[var(--color-gray-300)]"
-  }, /* @__PURE__ */ n.createElement(Me, {
-    leftIcon: Ne ? {
-      name: "search",
-      position: "left",
-      style: {
-        color: "var(--color-gray-500)"
-      }
-    } : void 0,
-    value: E,
-    onChange: (o) => G(o),
-    placeholder: ne,
-    style: {
-      margin: 0,
-      gap: 0
-    },
-    inputStyle: {
-      width: "100%",
-      border: "none",
-      outline: "none"
-    },
-    automationId: "se-design-dropdown-search",
-    ariaLabel: ne,
-    inputRef: C,
-    inputProps: e
-  })), ge = () => fe(i ? {
-    ...z,
-    onKeyDown: (e) => be(e, !0)
-  } : {
-    ...L,
-    onKeyDown: (e) => {
-      L.onKeyDown(e), e.key === "Escape" && requestAnimationFrame(() => d.current?.focusTrigger());
-    }
-  }), ye = (e, o) => {
-    const r = e[p], m = s[0]?.[p] || g, b = u?.length ? e[u] == s[0]?.[u] : !0, f = Ce && r === m && b, $ = w === o, Be = i ? {} : ce(o, f);
-    return /* @__PURE__ */ n.createElement("div", y({
-      key: e.id || e.value,
-      className: `option break-words px-3 py-2 hover:bg-[var(--color-gray-100)] cursor-pointer select-none flex items-center justify-between ${f ? "selected" : ""} ${$ ? `bg-[var(--color-gray-100)]${W ? " outline outline-[length:var(--focus-width)] -outline-offset-2 outline-[var(--focus-color)]" : ""}` : ""}`,
-      onClick: () => K(e),
-      onKeyDown: (F) => {
-        F.key === "Enter" || F.key === " " ? (F.preventDefault(), K(e)) : F.key === "Escape" && requestAnimationFrame(() => d.current?.focusTrigger());
-      },
-      tabIndex: -1,
-      "data-automation-id": `dropdown-option-${e?.automationId || o}`
-    }, Be, {
-      "aria-selected": f ? "true" : "false"
-    }), me({
-      ...e,
-      isOptionSelected: f
-    }, !1), f && /* @__PURE__ */ n.createElement(we, {
-      name: "checkmark",
-      stroke: ee
-    }));
-  }, O = (e, o, r) => /* @__PURE__ */ n.createElement("div", y({}, r ? {
-    id: `${D}-option-0`,
-    role: "option",
-    "aria-disabled": !0
-  } : ce(0, !1), {
-    className: `px-3 py-4 text-center text-[var(--color-gray-700)] text-sm${e === 0 ? ` bg-[var(--color-gray-100)]${o ? " outline outline-[length:var(--focus-width)] -outline-offset-2 outline-[var(--focus-color)]" : ""}` : ""}`
-  }), re), Le = () => /* @__PURE__ */ n.createElement(n.Fragment, null, t?.label && le && /* @__PURE__ */ n.createElement("div", {
-    "aria-hidden": "true",
-    className: "px-3 pt-2 pb-1 text-[var(--color-gray-650)] text-xs cursor-default select-none"
-  }, t.label), c && ge(), /* @__PURE__ */ n.createElement("div", y({
-    className: `dropdown-content dropdown-options${c ? "" : " flex flex-col max-h-80 overflow-y-auto"}`
-  }, c ? {} : {
-    ...U,
-    "aria-label": `${g} options`,
-    style: {
-      outline: "none"
-    },
-    tabIndex: -1,
-    "aria-activedescendant": L["aria-activedescendant"],
-    onKeyDown: (e) => {
-      if (j.onKeyDownCapture?.(e), e.key === " ") {
-        e.preventDefault(), w >= 0 && l[w] && K(l[w]);
-        return;
-      }
-      L.onKeyDown(e);
-    },
-    onFocus: () => {
-      w === -1 && H.length > 0 && de(0);
-    }
-  }), c ? /* @__PURE__ */ n.createElement("div", y({
-    className: "flex flex-col max-h-80 overflow-y-auto",
-    "aria-label": `${g} options`
-  }, U), l.length > 0 ? l.map((e, o) => ye(e, o)) : O(w, W, !1)) : l.length > 0 ? l.map((e, o) => ye(e, o)) : O(w, W, !1))), pe = (e, o) => {
-    let r = [];
-    e ? r = [...s, o] : r = s?.filter((m) => m[u] !== o[u]), B(r);
-  }, Oe = () => {
-    d.current?.togglePopover(), d.current?.focusTrigger(), t?.onApply?.(s);
-  }, be = (e, o = !1) => {
-    if (!(o && e.key === " ")) {
-      if (e.key === "Enter" || e.key === " ") {
-        if (e.preventDefault(), S >= 0 && S < l.length) {
-          const r = l[S], m = s.some((b) => b[u] === r[u]);
-          pe(!m, r);
-        }
-        return;
-      }
-      z.onKeyDown(e), e.key === "Escape" && (e.stopPropagation(), requestAnimationFrame(() => d.current?.focusTrigger()));
-    }
-  }, he = (e, o) => {
-    const r = s.some((f) => f[u] === e[u]), m = `${D}-option-${o}`, b = S === o;
-    return /* @__PURE__ */ n.createElement("div", {
-      key: e.id || e.value,
-      id: m,
-      role: "option",
-      "aria-selected": r,
-      className: `option px-3 py-2 hover:bg-[var(--color-gray-100)] cursor-pointer select-none flex items-center gap-2 ${b ? `bg-[var(--color-gray-100)]${J ? " outline outline-[length:var(--focus-width)] -outline-offset-2 outline-[var(--focus-color)]" : ""}` : ""}`,
-      tabIndex: -1,
-      onClick: () => pe(!r, e),
-      "data-automation-id": `dropdown-option-${e?.automationId || o}`
-    }, /* @__PURE__ */ n.createElement(He, {
-      tabIndex: -1,
-      ariaHidden: !0,
-      checked: r,
-      onChange: () => {
-      },
-      className: "pointer-events-none"
-    }), /* @__PURE__ */ n.createElement("span", {
-      className: "checkbox-label"
-    }, e?.label));
-  }, Fe = () => /* @__PURE__ */ n.createElement("div", {
-    onKeyDown: (e) => {
-      e.key === "Tab" && e.stopPropagation();
-    }
-  }, c && ge(), /* @__PURE__ */ n.createElement("div", y({
-    className: `dropdown-content dropdown-options${c ? "" : " flex flex-col max-h-80 overflow-y-auto"}`
-  }, c ? {} : {
-    ...P,
-    "aria-label": `${g} options`,
-    "aria-multiselectable": "true",
+  return /* @__PURE__ */ e.createElement("div", {
+    className: "se-design-color-coded-label flex items-center gap-2",
+    onClick: r
+  }, l && /* @__PURE__ */ e.createElement("span", {
+    className: "w-[15px] h-[15px] rounded-[3px] inline-block",
     style: {
-      outline: "none"
-    },
-    tabIndex: -1,
-    "aria-activedescendant": z["aria-activedescendant"],
-    onKeyDown: (e) => be(e, !1),
-    onFocus: () => {
-      S === -1 && M.length > 0 && Ve(0);
-    }
-  }), c ? /* @__PURE__ */ n.createElement("div", y({
-    className: "flex flex-col max-h-80 overflow-y-auto"
-  }, P, {
-    "aria-label": `${g} options`,
-    "aria-multiselectable": "true"
-  }), l.length > 0 ? l.map((e, o) => he(e, o)) : O(S, J, !0)) : l.length > 0 ? l.map((e, o) => he(e, o)) : O(S, J, !0)), /* @__PURE__ */ n.createElement("div", {
-    className: "flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]",
-    onKeyDown: (e) => {
-      if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End") {
-        e.stopPropagation();
-        return;
-      }
-      if (e.key === "Tab" && !e.shiftKey) {
-        const o = e.currentTarget.querySelector('[data-automation-id="se-design-dropdown-apply-button"]');
-        if (document.activeElement === o && (e.stopPropagation(), d.current?.togglePopover(), q)) {
-          e.preventDefault();
-          const r = d.current?.element, m = Ue({
-            container: document.body,
-            filterHidden: !0
-          }), b = r ? m.indexOf(r) : -1, f = m[b + 1];
-          f ? f.focus() : r?.focus();
-        }
-      } else e.key === "Tab" && e.shiftKey && (e.preventDefault(), e.stopPropagation(), c ? C.current?.focus() : P.ref.current?.focus());
-    }
-  }, /* @__PURE__ */ n.createElement(Se, {
-    label: "Clear",
-    type: "link",
-    size: "sm",
-    onClick: Ke,
-    automationId: "se-design-dropdown-clear-button"
-  }), /* @__PURE__ */ n.createElement(Se, {
-    label: "Apply",
-    type: "primary",
-    size: "sm",
-    onClick: Oe,
-    automationId: "se-design-dropdown-apply-button"
-  }))), _e = () => {
-    const e = a ? "border-[var(--color-blue-500)]" : A ? "border-[var(--color-gray-300)]" : "border-[var(--color-gray-600)]", o = te ? "border-[var(--color-red-500)]" : "", r = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 ${Pe ? "border-0" : `border rounded-md ${o || e}`} flex items-center ${De}`;
-    return /* @__PURE__ */ n.createElement("div", {
-      className: r
-    }, /* @__PURE__ */ n.createElement("div", {
-      id: Z,
-      className: "flex-1 min-w-0",
-      "data-automation-id": t?.dropDownSelectAutomationId || "selected-dropdown-value"
-    }, me(s[0], !0)), /* @__PURE__ */ n.createElement("div", {
-      className: "flex-shrink-0 ml-2",
-      "aria-hidden": "true"
-    }, /* @__PURE__ */ n.createElement(we, {
-      name: "chevron",
-      rotation: a ? "180" : "0",
-      className: "transition-transform",
-      stroke: ee
-    })));
-  }, Te = () => {
-    const e = s[0]?.[p];
-    return v && e ? `${v}, ${e}` : v || g || "Select option";
-  };
-  return /* @__PURE__ */ n.createElement("div", {
-    className: `se-design-dropdown-container${t?.className ? ` ${t?.className}` : ""}`,
-    style: t?.style
-  }, t?.label ? /* @__PURE__ */ n.createElement("div", {
-    id: T,
-    className: `se-design-dropdown-label ${le ? "sr-only" : "mb-[3px] text-[var(--color-gray-700)] text-sm"}`
-  }, t?.label) : !t?.ariaLabelledBy && v ? /* @__PURE__ */ n.createElement("span", {
-    id: T,
-    className: "sr-only"
-  }, v) : null, /* @__PURE__ */ n.createElement("div", y({
-    style: t?.style,
-    className: `${A ? "bg-[var(--color-gray-50)] rounded-md cursor-not-allowed" : ""}`
-  }, i ? {
-    // Multi-select: only spread focus-tracking handlers for isKeyboardFocused.
-    // Dismiss is handled by Popover — don't spread onBlurCapture.
-    onPointerMove: N.onPointerMove,
-    onPointerDown: N.onPointerDown,
-    onPointerUp: N.onPointerUp,
-    onFocusCapture: N.onFocusCapture,
-    onKeyDownCapture: (e) => {
-      if (e.key === "Escape" && a && (e.stopPropagation(), d.current?.focusTrigger()), (e.key === "ArrowDown" || e.key === "ArrowUp") && a) {
-        const o = c ? C.current : P.ref.current;
-        o && document.activeElement !== o && !o.contains(document.activeElement) && o.focus();
-      }
-      N.onKeyDownCapture?.(e);
+      backgroundColor: l
     }
-  } : {
-    ...j,
-    onKeyDownCapture: (e) => {
-      (e.key === "Escape" || e.key === "Tab") && a && (e.stopPropagation(), d.current?.focusTrigger()), j.onKeyDownCapture?.(e);
-    },
-    // Portal content lives in document.body — focus moving into it looks like "focus out" to
-    // the container's blur handler, causing immediate close. Suppress it; the Popover's own
-    // onBlur handler checks both source and portal content and handles dismissal correctly.
-    ...q ? {
-      onBlurCapture: void 0
-    } : {}
-  }), /* @__PURE__ */ n.createElement(qe, y({
-    ref: d,
-    isPopoverOpen: a,
-    isWithPortal: q,
-    renderPopoverContents: oe || (i ? Fe : Le),
-    contentWidth: "full",
-    popoverContentStyleProperty: t.popoverContentStyleProperty,
-    renderPopoverSrcElement: t.renderSrcElement ? () => t.renderSrcElement({
-      isOpen: a,
-      selectedValue: s
-    }) : _e,
-    onPopoverToggle: (e) => {
-      if (V(e), e && !i && s.length > 0) {
-        const o = l.findIndex((r) => u ? r[u] === s[0]?.[u] : r[p] === s[0]?.[p]);
-        o >= 0 && de(o);
-      }
-      if (e && !c) {
-        const o = i ? P.ref : U.ref;
-        requestAnimationFrame(() => requestAnimationFrame(() => o.current?.focus()));
-      }
-    },
-    disabled: A,
-    automationId: t?.dropDownSrcAutomationId,
-    popoverContentAutomationId: t?.dropDownContentAutomationId,
-    ariaLabelledBy: t?.label || t?.ariaLabelledBy || v ? [t?.label || !t?.ariaLabelledBy && v ? T : t?.ariaLabelledBy, Z].filter(Boolean).join(" ") : void 0,
-    ariaLabel: !t?.label && !v && !t?.ariaLabelledBy ? Te() : void 0,
-    sourceRole: "button",
-    "aria-haspopup": "listbox"
-  }, a ? {
-    "aria-controls": D
-  } : {}))), te && /* @__PURE__ */ n.createElement("div", {
-    className: "text-[var(--color-red-500)] text-sm"
-  }, ke));
+  }), /* @__PURE__ */ e.createElement("div", null, a), o && /* @__PURE__ */ e.createElement(c, {
+    label: o
+  }));
 };
 export {
-  rt as Dropdown
+  m as ColorCodedLabel
 };
 //# sourceMappingURL=index25.js.map

package/dist/index25.js.map

@@ -1 +1 @@
-{"version":3,"file":"index25.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef, useEffect, useLayoutEffect } from 'react';\n\nimport { Popover, PopoverHandle } from 'src/components/Popover';\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from '../Checkbox';\nimport { Button } from '../Button';\nimport { InputWithIcon } from '../InputWithIcon';\nimport { useStableId } from '../../utils/useStableId';\nimport { useCombobox } from '../../utils/a11y/useCombobox';\nimport { getFocusableElements } from '../../utils/a11y';\nimport { announce } from '../../utils/a11y/liveAnnouncer/LiveAnnouncer';\n\ntype DropdownValue = {\n  [key: string]: any;\n};\n\ntype DropdownProps = {\n  label?: string;\n  firstOptionAsHeading?: boolean;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  type: 'select' | 'multi-select';\n  dropDownOptions?: DropdownValue[];\n  defaultText?: string;\n  selectBy?: string;\n  optionsUniqueBy?: string;\n  displaySelected?: boolean;\n  defaultSelectedValue?: DropdownValue | DropdownValue[];\n  customSelectedValue?: string;\n  onOptionClick?: (selectedValue: DropdownValue) => void;\n  style?: React.CSSProperties;\n  renderOptionChip?: (option: DropdownValue, srcOption: boolean) => React.ReactNode;\n  className?: string;\n  iconColor?: string;\n  disabled?: boolean;\n  dropdownClassName?: string;\n  hasError?: boolean;\n  errorMessage?: string;\n  onApply?: (selectedValue: DropdownValue[]) => void;\n  onClear?: () => void;\n  customDropdownContent?: () => React.ReactNode;\n  isBorderless?: boolean;\n  dropDownSrcAutomationId?: string;\n  dropDownSelectAutomationId?: string;\n  dropDownContentAutomationId?: string;\n  shouldShowSearch?: boolean;\n  showSearchIcon?: boolean;\n  searchPlaceholder?: string;\n  searchResultEmptyMessage?: string;\n  /** Controlled selection — when provided, Dropdown won't manage internal selected state */\n  selectedValue?: DropdownValue | DropdownValue[];\n  /** Controlled open state — when provided, Dropdown won't manage internal open/close */\n  isOpen?: boolean;\n  /** Callback when open state changes (fires in both controlled and uncontrolled modes) */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Custom trigger element — replaces the default bordered div + chevron */\n  renderSrcElement?: (props: { isOpen: boolean; selectedValue: DropdownValue[] }) => React.ReactNode;\n  /** Render the dropdown panel in a portal (document.body) to escape overflow:hidden containers */\n  isWithPortal?: boolean;\n  /** Optional ref that will be populated with the Popover wrapper element on mount.\n   *  Use with setFocusAnchor() to return focus to the dropdown trigger after a modal closes. */\n  popoverElementRef?: React.RefObject<HTMLElement | null>;\n  /** Inline styles forwarded to the Popover content (portal or inline). Useful for min-width overrides. */\n  popoverContentStyleProperty?: React.CSSProperties;\n};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n  const isControlledSelection = props.selectedValue !== undefined;\n  const isControlledOpen = props.isOpen !== undefined;\n\n  const [internalIsOpen, setInternalIsOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [internalSelectedValues, setInternalSelectedValues] = useState<DropdownValue[]>(() =>\n    props?.defaultSelectedValue\n      ? Array.isArray(props?.defaultSelectedValue)\n        ? props?.defaultSelectedValue\n        : [props.defaultSelectedValue]\n      : []\n  );\n  const popoverRef = useRef<HTMLDivElement & PopoverHandle>(null);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const labelId = useStableId(undefined, 'dropdown-label');\n  const valueId = useStableId(undefined, 'dropdown-value');\n  const listboxId = useStableId(undefined, 'dropdown-listbox');\n\n  // Derived state: controlled props take precedence over internal state\n  const isDropDownOpen = isControlledOpen ? props.isOpen! : internalIsOpen;\n  const selectedDropDownValues = isControlledSelection\n    ? (Array.isArray(props.selectedValue) ? props.selectedValue : props.selectedValue ? [props.selectedValue] : [])\n    : internalSelectedValues;\n\n  const setIsDropDownOpen = (value: boolean) => {\n    if (!isControlledOpen) {\n      setInternalIsOpen(value);\n    }\n    props.onOpenChange?.(value);\n  };\n\n  const setSelectedDropDownValues = (values: DropdownValue[]) => {\n    if (!isControlledSelection) {\n      setInternalSelectedValues(values);\n    }\n  };\n\n  const {\n    selectBy = '',\n    optionsUniqueBy = '',\n    displaySelected = false,\n    dropDownOptions,\n    defaultText = 'Select',\n    iconColor = 'var(--color-gray-700)',\n    disabled = false,\n    dropdownClassName = '',\n    hasError = false,\n    errorMessage = '',\n    customDropdownContent = null,\n    isBorderless = false,\n    shouldShowSearch = false,\n    showSearchIcon = true,\n    searchPlaceholder = 'Search...',\n    searchResultEmptyMessage = 'No results found',\n    ariaLabel = '',\n    customSelectedValue = '',\n    isWithPortal = false,\n    firstOptionAsHeading = false\n  } = props;\n\n  useEffect(() => {\n    if (!isControlledSelection) {\n      const newValues = props?.defaultSelectedValue\n        ? Array.isArray(props?.defaultSelectedValue)\n          ? props?.defaultSelectedValue\n          : [props.defaultSelectedValue]\n        : [];\n      setInternalSelectedValues(newValues);\n    }\n  }, [props?.defaultSelectedValue, isControlledSelection]);\n\n  useEffect(() => {\n    if (!isDropDownOpen) {\n      setSearchQuery('');\n    }\n  }, [isDropDownOpen]);\n\n  // Focus search input when dropdown opens with search enabled\n  useEffect(() => {\n    if (isDropDownOpen && shouldShowSearch && searchInputRef.current) {\n      requestAnimationFrame(() => searchInputRef.current?.focus());\n    }\n  }, [isDropDownOpen, shouldShowSearch]);\n\n  // Populate caller's popoverElementRef with the Popover wrapper element.\n  // Runs after mount so popoverRef.current is set.\n  useLayoutEffect(() => {\n    if (props.popoverElementRef) {\n      props.popoverElementRef.current = popoverRef.current?.element ?? null;\n    }\n  });\n\n  const isMultiSelect = props?.type === 'multi-select';\n\n  // Sentinel item for empty state — enables keyboard navigation to \"No results found\"\n  const NO_RESULTS_SENTINEL: DropdownValue = { __noResults: true, id: '__no_results__', value: '__no_results__' };\n  const isNoResultsSentinel = (item: DropdownValue) => !!item?.__noResults;\n\n  const getFilteredOptions = () => {\n    if (!searchQuery.trim()) {\n      return dropDownOptions || [];\n    }\n    return (dropDownOptions || []).filter((option) => {\n      const optionValue = option?.[selectBy]?.toString().toLowerCase() || '';\n      return optionValue.includes(searchQuery.toLowerCase());\n    });\n  };\n\n  const handleDropDownOptionClick = (dropDownOption: any) => {\n    setSelectedDropDownValues([dropDownOption]);\n    setIsDropDownOpen(false);\n    props?.onOptionClick?.(dropDownOption);\n    // Restore focus to the trigger after portal unmounts.\n    // Double rAF ensures this runs after React re-renders AND the focus trap safety net,\n    // getting the final say on focus.\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        popoverRef.current?.focusTrigger();\n      });\n    });\n  };\n\n  // Use useCombobox hook for keyboard navigation (only for single-select)\n  const filteredOptions = getFilteredOptions();\n  const showEmptyState = filteredOptions.length === 0 && (searchQuery.trim() || dropDownOptions?.length === 0);\n  // Inject sentinel so arrow keys can reach \"No results found\"\n  const singleSelectItems = !isMultiSelect\n    ? (filteredOptions.length > 0 ? filteredOptions : (showEmptyState ? [NO_RESULTS_SENTINEL] : []))\n    : [];\n  const multiSelectItems = isMultiSelect\n    ? (filteredOptions.length > 0 ? filteredOptions : (showEmptyState ? [NO_RESULTS_SENTINEL] : []))\n    : [];\n\n  const {\n    listboxProps,\n    getOptionProps,\n    highlightedIndex,\n    setHighlightedIndex,\n    containerProps: comboboxContainerProps,\n    inputProps: comboboxInputProps,\n    isKeyboardFocused: isSingleSelectKeyboardFocused\n  } = useCombobox({\n    items: singleSelectItems,\n    isOpen: isDropDownOpen && !isMultiSelect,\n    onOpenChange: setIsDropDownOpen,\n    onSelect: (item: DropdownValue) => {\n      handleDropDownOptionClick(item);\n    },\n    listboxId,\n    disabled: isMultiSelect || disabled,\n    hasItems: singleSelectItems.length > 0,\n    isItemDisabled: isNoResultsSentinel\n  });\n\n  // Second useCombobox for multi-select: provides ARIA props, keyboard navigation, and auto-scroll.\n  // Enter/Space are intercepted in multiSelectOnKeyDown to avoid the hook's highlight reset after select.\n  const {\n    inputProps: multiSelectComboboxInputProps,\n    listboxProps: multiSelectListboxProps,\n    containerProps: multiSelectContainerProps,\n    highlightedIndex: highlightedMultiSelectIndex,\n    setHighlightedIndex: setHighlightedMultiSelectIndex,\n    isKeyboardFocused: isMultiSelectKeyboardFocused\n  } = useCombobox({\n    items: multiSelectItems,\n    isOpen: isDropDownOpen && isMultiSelect,\n    onOpenChange: setIsDropDownOpen,\n    onSelect: () => {},\n    listboxId,\n    disabled: !isMultiSelect,\n    loop: false,\n    hasItems: multiSelectItems.length > 0,\n    closeOnTab: false,\n    isItemDisabled: isNoResultsSentinel\n  });\n\n  // Announce empty state for screen readers — only when arrow keys haven't reached it yet.\n  // Once highlighted (aria-activedescendant), the screen reader reads it directly.\n  const activeHighlight = isMultiSelect ? highlightedMultiSelectIndex : highlightedIndex;\n  useEffect(() => {\n    if (isDropDownOpen && filteredOptions.length === 0 && (searchQuery.trim() || dropDownOptions?.length === 0) && activeHighlight === -1) {\n      announce(searchResultEmptyMessage, { assertiveness: 'polite', batchId: 'dropdown-empty-state', delay: 300 });\n    }\n  }, [filteredOptions.length, isDropDownOpen, searchQuery, dropDownOptions?.length, activeHighlight]);\n\n  const getSelectedDropDownValue = (option: DropdownValue, isSrcOption: boolean = false) => {\n    if (isMultiSelect) {\n      return defaultText;\n    }\n\n    // if custom selected value is provided, use it instead of the option value\n    if (isSrcOption && customSelectedValue) {\n      return customSelectedValue;\n    }\n\n    return option?.[selectBy] || defaultText;\n  };\n\n  const clearSelectedDropDownValues = () => {\n    setSelectedDropDownValues([]);\n    props?.onClear?.();\n  };\n\n  const optionChip = (option: DropdownValue, srcOption: boolean = false) => {\n    if (props?.renderOptionChip) {\n      return props?.renderOptionChip(option, srcOption);\n    }\n\n    if (isMultiSelect && selectedDropDownValues?.length > 0) {\n      const firstSelectedLabel = selectedDropDownValues[0]?.[selectBy] || '';\n      const remainingCount = selectedDropDownValues.length - 1;\n\n      // For multiple selections: text takes remaining space, count takes minimum space needed\n      return (\n        <div className={`option-chip flex items-center w-full`}>\n          <div\n            className={`${remainingCount > 0 ? 'w-full' : 'flex-1'} truncate`}\n          >{`${defaultText}: ${firstSelectedLabel}`}</div>\n          {remainingCount > 0 && <div className=\"flex-shrink-0\">+{remainingCount}</div>}\n        </div>\n      );\n    }\n\n    const selectedLabel = getSelectedDropDownValue(option, srcOption);\n    const hasVisibleLabel = !!props?.label || !!props?.ariaLabelledBy;\n    const showPrefix = srcOption && defaultText && option?.[selectBy] && !customSelectedValue && !hasVisibleLabel;\n\n    return (\n      <p className={`option-chip flex flex-1 items-center justify-between`}>\n        {showPrefix ? `${defaultText}: ${selectedLabel}` : selectedLabel}\n      </p>\n    );\n  };\n\n  const renderSearchInput = (extraInputProps: Record<string, any>) => (\n    <div className=\" w-full relative flex items-center border-b border-[var(--color-gray-300)]\">\n      <InputWithIcon\n        leftIcon={showSearchIcon ? { name: 'search', position: 'left', style: { color: 'var(--color-gray-500)' } } : undefined}\n        value={searchQuery}\n        onChange={(value) => setSearchQuery(value)}\n        placeholder={searchPlaceholder}\n        style={{ margin: 0, gap: 0 }}\n        inputStyle={{ width: '100%', border: 'none', outline: 'none' }}\n        automationId=\"se-design-dropdown-search\"\n        ariaLabel={searchPlaceholder}\n        inputRef={searchInputRef}\n        inputProps={extraInputProps}\n      />\n    </div>\n  );\n\n  const renderSearchBar = () => {\n    if (isMultiSelect) {\n      return renderSearchInput({\n        ...multiSelectComboboxInputProps,\n        onKeyDown: (e: React.KeyboardEvent) => multiSelectOnKeyDown(e, true)\n      });\n    }\n\n    // Single-select: wrap onKeyDown to add Escape → focusTrigger (portal-safe)\n    return renderSearchInput({\n      ...comboboxInputProps,\n      onKeyDown: (e: React.KeyboardEvent) => {\n        comboboxInputProps.onKeyDown(e);\n        if (e.key === 'Escape') {\n          requestAnimationFrame(() => popoverRef.current?.focusTrigger());\n        }\n      }\n    });\n  };\n\n  const dropDownOptionJsx = (dropDownOption: DropdownValue, index: number) => {\n    const optionTxt = dropDownOption[selectBy];\n    const dropDownSelectedValue = selectedDropDownValues[0]?.[selectBy] || defaultText;\n    const selectByUniqueId = optionsUniqueBy?.length\n      ? dropDownOption[optionsUniqueBy] == selectedDropDownValues[0]?.[optionsUniqueBy]\n      : true;\n    const isOptionSelected = displaySelected && optionTxt === dropDownSelectedValue && selectByUniqueId;\n    const isHighlighted = highlightedIndex === index;\n    const optionProps = !isMultiSelect ? getOptionProps(index, isOptionSelected) : {};\n\n    return (\n      <div\n        key={dropDownOption.id || dropDownOption.value}\n        className={`option break-words px-3 py-2 hover:bg-[var(--color-gray-100)] cursor-pointer select-none flex items-center justify-between ${\n          isOptionSelected ? 'selected' : ''\n        } ${isHighlighted ? `bg-[var(--color-gray-100)]${isSingleSelectKeyboardFocused ? ' outline outline-[length:var(--focus-width)] -outline-offset-2 outline-[var(--focus-color)]' : ''}` : ''}`}\n        onClick={() => handleDropDownOptionClick(dropDownOption)}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            handleDropDownOptionClick(dropDownOption);\n          } else if (e.key === 'Escape') {\n            requestAnimationFrame(() => popoverRef.current?.focusTrigger());\n          }\n        }}\n        tabIndex={-1}\n        data-automation-id={`dropdown-option-${dropDownOption?.automationId || index}`}\n        {...optionProps}\n        aria-selected={isOptionSelected ? 'true' : 'false'}\n      >\n        {optionChip({ ...dropDownOption, isOptionSelected }, false)}\n        {isOptionSelected && <Icon name=\"checkmark\" stroke={iconColor} />}\n      </div>\n    );\n  };\n\n  const emptyStateOption = (currentHighlightedIndex: number, keyboardFocused: boolean, isMulti: boolean) => (\n    <div\n      {...(!isMulti ? getOptionProps(0, false) : { id: `${listboxId}-option-0`, role: 'option', 'aria-disabled': true })}\n      className={`px-3 py-4 text-center text-[var(--color-gray-700)] text-sm${currentHighlightedIndex === 0 ? ` bg-[var(--color-gray-100)]${keyboardFocused ? ' outline outline-[length:var(--focus-width)] -outline-offset-2 outline-[var(--focus-color)]' : ''}` : ''}`}\n    >\n      {searchResultEmptyMessage}\n    </div>\n  );\n\n  const renderDropdownContents = () => {\n    return (\n      <>\n        {props?.label && firstOptionAsHeading && (\n          <div\n            aria-hidden=\"true\"\n            className=\"px-3 pt-2 pb-1 text-[var(--color-gray-650)] text-xs cursor-default select-none\"\n          >\n            {props.label}\n          </div>\n        )}\n        {shouldShowSearch && renderSearchBar()}\n        <div\n          className={`dropdown-content dropdown-options${shouldShowSearch ? '' : ' flex flex-col max-h-80 overflow-y-auto'}`}\n          {...(shouldShowSearch ? {} : {\n            ...listboxProps,\n            'aria-label': `${defaultText} options`,\n            style: { outline: 'none' },\n            tabIndex: -1,\n            'aria-activedescendant': comboboxInputProps['aria-activedescendant'],\n            onKeyDown: (e: React.KeyboardEvent) => {\n              comboboxContainerProps.onKeyDownCapture?.(e as React.KeyboardEvent<HTMLElement>);\n              if (e.key === ' ') {\n                e.preventDefault();\n                if (highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {\n                  handleDropDownOptionClick(filteredOptions[highlightedIndex]);\n                }\n                return;\n              }\n              comboboxInputProps.onKeyDown(e);\n            },\n            onFocus: () => {\n              if (highlightedIndex === -1 && singleSelectItems.length > 0) {\n                setHighlightedIndex(0);\n              }\n            }\n          })}\n        >\n        {shouldShowSearch ? (\n          <div\n            className=\"flex flex-col max-h-80 overflow-y-auto\"\n            aria-label={`${defaultText} options`}\n            {...listboxProps}\n          >\n            {filteredOptions.length > 0 ? (\n              filteredOptions.map((dropDownOption, index) => dropDownOptionJsx(dropDownOption, index))\n            ) : (\n              emptyStateOption(highlightedIndex, isSingleSelectKeyboardFocused, false)\n            )}\n          </div>\n        ) : (\n          filteredOptions.length > 0 ? (\n            filteredOptions.map((dropDownOption, index) => dropDownOptionJsx(dropDownOption, index))\n          ) : (\n            emptyStateOption(highlightedIndex, isSingleSelectKeyboardFocused, false)\n          )\n        )}\n        </div>\n      </>\n    );\n  };\n\n  const handleMultiSelectDropdownOptionClick = (isSelected: boolean, dropDownOption: DropdownValue) => {\n    let newSelectedDropDownValues: DropdownValue[] = [];\n    if (isSelected) {\n      newSelectedDropDownValues = [...selectedDropDownValues, dropDownOption];\n    } else {\n      newSelectedDropDownValues = selectedDropDownValues?.filter(\n        (option) => option[optionsUniqueBy] !== dropDownOption[optionsUniqueBy]\n      );\n    }\n    setSelectedDropDownValues(newSelectedDropDownValues);\n  };\n\n  const handleApplySelectedDropDownValues = () => {\n    popoverRef.current?.togglePopover();\n    popoverRef.current?.focusTrigger();\n    props?.onApply?.(selectedDropDownValues);\n  };\n\n  // Wraps the multi-select useCombobox's onKeyDown.\n  // - Intercepts Enter/Space to toggle selection without resetting the highlight\n  //   (the hook resets highlightedIndex to -1 after onSelect, which is wrong for multi-select).\n  // - When isSearchInput is true, Space is left for typing.\n  // - Adds focusTrigger on Escape (Popover's handler is unreliable for portals).\n  const multiSelectOnKeyDown = (e: React.KeyboardEvent, isSearchInput: boolean = false) => {\n    if (isSearchInput && e.key === ' ') return;\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if (highlightedMultiSelectIndex >= 0 && highlightedMultiSelectIndex < filteredOptions.length) {\n        const option = filteredOptions[highlightedMultiSelectIndex];\n        const isSelected = selectedDropDownValues.some(\n          (v) => v[optionsUniqueBy] === option[optionsUniqueBy]\n        );\n        handleMultiSelectDropdownOptionClick(!isSelected, option);\n      }\n      return;\n    }\n\n    multiSelectComboboxInputProps.onKeyDown(e);\n\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      requestAnimationFrame(() => popoverRef.current?.focusTrigger());\n    }\n  };\n\n  const multiSelectDropdownOptionJSX = (dropDownOption: DropdownValue, index: number) => {\n    const isOptionSelected = selectedDropDownValues.some(\n      (option) => option[optionsUniqueBy] === dropDownOption[optionsUniqueBy]\n    );\n    const optionId = `${listboxId}-option-${index}`;\n    const isHighlighted = highlightedMultiSelectIndex === index;\n\n    return (\n      <div\n        key={dropDownOption.id || dropDownOption.value}\n        id={optionId}\n        role=\"option\"\n        aria-selected={isOptionSelected}\n        className={`option px-3 py-2 hover:bg-[var(--color-gray-100)] cursor-pointer select-none flex items-center gap-2 ${\n          isHighlighted ? `bg-[var(--color-gray-100)]${isMultiSelectKeyboardFocused ? ' outline outline-[length:var(--focus-width)] -outline-offset-2 outline-[var(--focus-color)]' : ''}` : ''\n        }`}\n        tabIndex={-1}\n        onClick={() => handleMultiSelectDropdownOptionClick(!isOptionSelected, dropDownOption)}\n        data-automation-id={`dropdown-option-${dropDownOption?.automationId || index}`}\n      >\n        <Checkbox\n          tabIndex={-1}\n          ariaHidden\n          checked={isOptionSelected}\n          onChange={() => {}}\n          className=\"pointer-events-none\"\n        />\n        <span className=\"checkbox-label\">{dropDownOption?.label}</span>\n      </div>\n    );\n  };\n\n  const renderMultiSelectDropdownContents = () => {\n    return (\n      <div\n        onKeyDown={(e) => {\n          // Stop all Tab events from reaching Popover's handlePopoverContentKeyDown (which closes on Tab).\n          // Tab flow is managed by the footer onKeyDown: forward Tab from Apply closes and advances\n          // focus past trigger; Shift+Tab returns to search/listbox.\n          if (e.key === 'Tab') {\n            e.stopPropagation();\n          }\n        }}\n      >\n        {shouldShowSearch && renderSearchBar()}\n        <div\n          className={`dropdown-content dropdown-options${shouldShowSearch ? '' : ' flex flex-col max-h-80 overflow-y-auto'}`}\n          {...(shouldShowSearch ? {} : {\n            ...multiSelectListboxProps,\n            'aria-label': `${defaultText} options`,\n            'aria-multiselectable': 'true',\n            style: { outline: 'none' },\n            tabIndex: -1,\n            'aria-activedescendant': multiSelectComboboxInputProps['aria-activedescendant'],\n            onKeyDown: (e: React.KeyboardEvent) => multiSelectOnKeyDown(e, false),\n            onFocus: () => {\n              if (highlightedMultiSelectIndex === -1 && multiSelectItems.length > 0) {\n                setHighlightedMultiSelectIndex(0);\n              }\n            }\n          })}\n        >\n        {shouldShowSearch ? (\n          <div\n            className=\"flex flex-col max-h-80 overflow-y-auto\"\n            {...multiSelectListboxProps}\n            aria-label={`${defaultText} options`}\n            aria-multiselectable=\"true\"\n          >\n            {filteredOptions.length > 0 ? (\n              filteredOptions.map((dropDownOption, index) => multiSelectDropdownOptionJSX(dropDownOption, index))\n            ) : (\n              emptyStateOption(highlightedMultiSelectIndex, isMultiSelectKeyboardFocused, true)\n            )}\n          </div>\n        ) : (\n          filteredOptions.length > 0 ? (\n            filteredOptions.map((dropDownOption, index) => multiSelectDropdownOptionJSX(dropDownOption, index))\n          ) : (\n            emptyStateOption(highlightedMultiSelectIndex, isMultiSelectKeyboardFocused, true)\n          )\n        )}\n        </div>\n        <div\n          className=\"flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]\"\n          onKeyDown={(e) => {\n            if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {\n              // Stop arrow keys from reaching Popover's handleArrowKeyNavigation\n              // which would move focus out of the CTA buttons back into options\n              e.stopPropagation();\n              return;\n            }\n            if (e.key === 'Tab' && !e.shiftKey) {\n              // Forward Tab from Apply — close dropdown and advance focus past trigger.\n              // The wrapper stopPropagation blocks Popover's Tab handler, so we replicate\n              // its portal-safe focus advance here (Popover lines 559-569).\n              const applyEl = e.currentTarget.querySelector('[data-automation-id=\"se-design-dropdown-apply-button\"]');\n              if (document.activeElement === applyEl) {\n                e.stopPropagation();\n                popoverRef.current?.togglePopover();\n                if (isWithPortal) {\n                  // Portal: manually advance focus past trigger (portal Tab order is wrong)\n                  e.preventDefault();\n                  const srcEl = popoverRef.current?.element;\n                  const focusables = getFocusableElements({ container: document.body, filterHidden: true });\n                  const idx = srcEl ? focusables.indexOf(srcEl) : -1;\n                  const next = focusables[idx + 1];\n                  if (next) (next as HTMLElement).focus();\n                  else (srcEl as HTMLElement)?.focus();\n                }\n                // Non-portal: togglePopover closes, browser Tab naturally advances focus\n              }\n            } else if (e.key === 'Tab' && e.shiftKey) {\n              e.preventDefault();\n              e.stopPropagation();\n              if (shouldShowSearch) {\n                searchInputRef.current?.focus();\n              } else {\n                multiSelectListboxProps.ref.current?.focus();\n              }\n            }\n          }}\n        >\n          <Button label=\"Clear\" type=\"link\" size=\"sm\" onClick={clearSelectedDropDownValues} automationId=\"se-design-dropdown-clear-button\" />\n          <Button label=\"Apply\" type=\"primary\" size=\"sm\" onClick={handleApplySelectedDropDownValues} automationId=\"se-design-dropdown-apply-button\" />\n        </div>\n      </div>\n    );\n  };\n\n  const renderDropdownSelect = () => {\n    const borderColor = isDropDownOpen\n      ? 'border-[var(--color-blue-500)]'\n      : disabled\n      ? 'border-[var(--color-gray-300)]'\n      : 'border-[var(--color-gray-600)]';\n    const errorBorderColor = hasError ? 'border-[var(--color-red-500)]' : '';\n    const dropDownSelectClass = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 ${\n      isBorderless ? 'border-0' : `border rounded-md ${errorBorderColor ? errorBorderColor : borderColor}`\n    } flex items-center ${dropdownClassName}`;\n\n    return (\n      <div className={dropDownSelectClass}>\n        <div\n          id={valueId}\n          className=\"flex-1 min-w-0\"\n          data-automation-id={props?.dropDownSelectAutomationId || 'selected-dropdown-value'}\n        >\n          {optionChip(selectedDropDownValues[0], true)}\n        </div>\n        <div className=\"flex-shrink-0 ml-2\" aria-hidden=\"true\">\n          <Icon\n            name={'chevron'}\n            rotation={isDropDownOpen ? '180' : '0'}\n            className={`transition-transform`}\n            stroke={iconColor}\n          />\n        </div>\n      </div>\n    );\n  };\n\n  const getDropdownAriaLabel = () => {\n    const selectedLabel = selectedDropDownValues[0]?.[selectBy];\n    if (ariaLabel && selectedLabel) {\n      return `${ariaLabel}, ${selectedLabel}`;\n    }\n    return ariaLabel || defaultText || 'Select option';\n  };\n\n  // Trigger is always a button that reveals a listbox popup (Select/Listbox pattern).\n  // For search-enabled dropdowns, the combobox role lives on the search input inside the popup.\n  // This matches React Aria (useSelect), Radix (Select), and Headless UI (Listbox) — all use\n  // role=\"button\" with real focus on options, separate from their Combobox components.\n  const triggerSourceRole = 'button';\n\n  // Trigger is always role=\"button\" — combobox ARIA (aria-activedescendant etc.)\n  // lives on the search input inside the popup, not on the trigger.\n  // Trigger only needs aria-haspopup + aria-expanded (Popover handles) + aria-controls.\n\n  return (\n    <div\n      className={`se-design-dropdown-container${props?.className ? ` ${props?.className}` : ''}`}\n      style={props?.style}\n    >\n      {props?.label ? (\n        <div id={labelId} className={`se-design-dropdown-label ${firstOptionAsHeading ? 'sr-only' : 'mb-[3px] text-[var(--color-gray-700)] text-sm'}`}>\n          {props?.label}\n        </div>\n      ) : !props?.ariaLabelledBy && ariaLabel ? (\n        <span id={labelId} className=\"sr-only\">{ariaLabel}</span>\n      ) : null}\n      <div\n        style={props?.style}\n        className={`${disabled ? 'bg-[var(--color-gray-50)] rounded-md cursor-not-allowed' : ''}`}\n        {...(!isMultiSelect ? {\n          ...comboboxContainerProps,\n          onKeyDownCapture: (e: React.KeyboardEvent<HTMLElement>) => {\n            // Handle Escape/Tab BEFORE dismiss — React unmounts the popup after\n            // dismiss's setState, so bubble-phase handlers never fire.\n            if ((e.key === 'Escape' || e.key === 'Tab') && isDropDownOpen) {\n              e.stopPropagation(); // prevent Popover wrapper + parent sidebar from seeing Escape\n              popoverRef.current?.focusTrigger();\n            }\n            comboboxContainerProps.onKeyDownCapture?.(e);\n          },\n          // Portal content lives in document.body — focus moving into it looks like \"focus out\" to\n          // the container's blur handler, causing immediate close. Suppress it; the Popover's own\n          // onBlur handler checks both source and portal content and handles dismissal correctly.\n          ...(isWithPortal ? { onBlurCapture: undefined } : {})\n        } : {\n          // Multi-select: only spread focus-tracking handlers for isKeyboardFocused.\n          // Dismiss is handled by Popover — don't spread onBlurCapture.\n          onPointerMove: multiSelectContainerProps.onPointerMove,\n          onPointerDown: multiSelectContainerProps.onPointerDown,\n          onPointerUp: multiSelectContainerProps.onPointerUp,\n          onFocusCapture: multiSelectContainerProps.onFocusCapture,\n          onKeyDownCapture: (e: React.KeyboardEvent<HTMLElement>) => {\n            if (e.key === 'Escape' && isDropDownOpen) {\n              e.stopPropagation();\n              popoverRef.current?.focusTrigger();\n            }\n            // When arrow keys are pressed while focus is still on the wrapper (before\n            // focus-on-open completes), redirect focus into the content so the arrow\n            // key handler on the listbox/search can process it.\n            if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && isDropDownOpen) {\n              const target = shouldShowSearch\n                ? searchInputRef.current\n                : multiSelectListboxProps.ref.current;\n              if (target && document.activeElement !== target && !target.contains(document.activeElement as Node)) {\n                target.focus();\n              }\n            }\n            multiSelectContainerProps.onKeyDownCapture?.(e);\n          }\n        })}\n      >\n        <Popover\n          ref={popoverRef}\n          isPopoverOpen={isDropDownOpen}\n          isWithPortal={isWithPortal}\n          renderPopoverContents={\n            customDropdownContent\n              ? customDropdownContent\n              : isMultiSelect\n              ? renderMultiSelectDropdownContents\n              : renderDropdownContents\n          }\n          contentWidth={'full'}\n          popoverContentStyleProperty={props.popoverContentStyleProperty}\n          renderPopoverSrcElement={\n            props.renderSrcElement\n              ? () => props.renderSrcElement!({ isOpen: isDropDownOpen, selectedValue: selectedDropDownValues })\n              : renderDropdownSelect\n          }\n          onPopoverToggle={(value) => {\n            setIsDropDownOpen(value);\n            if (value && !isMultiSelect && selectedDropDownValues.length > 0) {\n              // Highlight the currently selected option when the dropdown opens (APG Select pattern)\n              const selectedIndex = filteredOptions.findIndex(\n                (option) => optionsUniqueBy\n                  ? option[optionsUniqueBy] === selectedDropDownValues[0]?.[optionsUniqueBy]\n                  : option[selectBy] === selectedDropDownValues[0]?.[selectBy]\n              );\n              if (selectedIndex >= 0) {\n                setHighlightedIndex(selectedIndex);\n              }\n            }\n            if (value && !shouldShowSearch) {\n              // Focus listbox after portal mounts and browser paints.\n              // Double rAF ensures the portal DOM is ready. Also acts as fallback\n              // if the arrow-key redirect in onKeyDownCapture fires first.\n              const ref = isMultiSelect ? multiSelectListboxProps.ref : listboxProps.ref;\n              requestAnimationFrame(() => requestAnimationFrame(() => ref.current?.focus()));\n            }\n            // When search is enabled, the useEffect at line 145 focuses the search input via rAF.\n          }}\n          disabled={disabled}\n          automationId={props?.dropDownSrcAutomationId}\n          popoverContentAutomationId={props?.dropDownContentAutomationId}\n          ariaLabelledBy={\n            props?.label || props?.ariaLabelledBy || ariaLabel\n              ? [props?.label || (!props?.ariaLabelledBy && ariaLabel) ? labelId : props?.ariaLabelledBy, valueId].filter(Boolean).join(' ')\n              : undefined\n          }\n          ariaLabel={!props?.label && !ariaLabel && !props?.ariaLabelledBy ? getDropdownAriaLabel() : undefined}\n          sourceRole={triggerSourceRole}\n          {...{ 'aria-haspopup': 'listbox' }}\n          {...(isDropDownOpen ? { 'aria-controls': listboxId } : {})}\n        />\n      </div>\n      {hasError && <div className=\"text-[var(--color-red-500)] text-sm\">{errorMessage}</div>}\n    </div>\n  );\n};\n"],"names":["Dropdown","props","isControlledSelection","selectedValue","undefined","isControlledOpen","isOpen","internalIsOpen","setInternalIsOpen","useState","searchQuery","setSearchQuery","internalSelectedValues","setInternalSelectedValues","defaultSelectedValue","Array","isArray","popoverRef","useRef","searchInputRef","labelId","useStableId","valueId","listboxId","isDropDownOpen","selectedDropDownValues","setIsDropDownOpen","value","onOpenChange","setSelectedDropDownValues","values","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","iconColor","disabled","dropdownClassName","hasError","errorMessage","customDropdownContent","isBorderless","shouldShowSearch","showSearchIcon","searchPlaceholder","searchResultEmptyMessage","ariaLabel","customSelectedValue","isWithPortal","firstOptionAsHeading","useEffect","newValues","current","requestAnimationFrame","focus","useLayoutEffect","popoverElementRef","element","isMultiSelect","type","NO_RESULTS_SENTINEL","__noResults","id","isNoResultsSentinel","item","getFilteredOptions","trim","filter","option","toString","toLowerCase","includes","handleDropDownOptionClick","dropDownOption","onOptionClick","focusTrigger","filteredOptions","showEmptyState","length","singleSelectItems","multiSelectItems","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","containerProps","comboboxContainerProps","inputProps","comboboxInputProps","isKeyboardFocused","isSingleSelectKeyboardFocused","useCombobox","items","onSelect","hasItems","isItemDisabled","multiSelectComboboxInputProps","multiSelectListboxProps","multiSelectContainerProps","highlightedMultiSelectIndex","setHighlightedMultiSelectIndex","isMultiSelectKeyboardFocused","loop","closeOnTab","activeHighlight","announce","assertiveness","batchId","delay","getSelectedDropDownValue","isSrcOption","clearSelectedDropDownValues","onClear","optionChip","srcOption","renderOptionChip","firstSelectedLabel","remainingCount","React","createElement","className","selectedLabel","hasVisibleLabel","label","ariaLabelledBy","showPrefix","renderSearchInput","extraInputProps","InputWithIcon","leftIcon","name","position","style","color","onChange","placeholder","margin","gap","inputStyle","width","border","outline","automationId","inputRef","renderSearchBar","onKeyDown","e","multiSelectOnKeyDown","key","dropDownOptionJsx","index","optionTxt","dropDownSelectedValue","selectByUniqueId","isOptionSelected","isHighlighted","optionProps","_extends","onClick","preventDefault","tabIndex","Icon","stroke","emptyStateOption","currentHighlightedIndex","keyboardFocused","isMulti","role","renderDropdownContents","Fragment","onKeyDownCapture","onFocus","map","handleMultiSelectDropdownOptionClick","isSelected","newSelectedDropDownValues","handleApplySelectedDropDownValues","togglePopover","onApply","isSearchInput","some","v","stopPropagation","multiSelectDropdownOptionJSX","optionId","Checkbox","ariaHidden","checked","renderMultiSelectDropdownContents","shiftKey","applyEl","currentTarget","querySelector","document","activeElement","srcEl","focusables","getFocusableElements","container","body","filterHidden","idx","indexOf","next","ref","Button","size","renderDropdownSelect","borderColor","errorBorderColor","dropDownSelectClass","dropDownSelectAutomationId","rotation","getDropdownAriaLabel","onPointerMove","onPointerDown","onPointerUp","onFocusCapture","target","contains","onBlurCapture","Popover","isPopoverOpen","renderPopoverContents","contentWidth","popoverContentStyleProperty","renderPopoverSrcElement","renderSrcElement","onPopoverToggle","selectedIndex","findIndex","dropDownSrcAutomationId","popoverContentAutomationId","dropDownContentAutomationId","Boolean","join","sourceRole"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkEO,MAAMA,KAA+BC,CAAAA,MAAU;AACpD,QAAMC,IAAwBD,EAAME,kBAAkBC,QAChDC,IAAmBJ,EAAMK,WAAWF,QAEpC,CAACG,GAAgBC,EAAiB,IAAIC,EAAS,EAAK,GACpD,CAACC,GAAaC,CAAc,IAAIF,EAAS,EAAE,GAC3C,CAACG,IAAwBC,CAAyB,IAAIJ,EAA0B,MACpFR,GAAOa,uBACHC,MAAMC,QAAQf,GAAOa,oBAAoB,IACvCb,GAAOa,uBACP,CAACb,EAAMa,oBAAoB,IAC7B,EACN,GACMG,IAAaC,GAAuC,IAAI,GACxDC,IAAiBD,GAAyB,IAAI,GAC9CE,IAAUC,EAAYjB,QAAW,gBAAgB,GACjDkB,IAAUD,EAAYjB,QAAW,gBAAgB,GACjDmB,IAAYF,EAAYjB,QAAW,kBAAkB,GAGrDoB,IAAiBnB,IAAmBJ,EAAMK,SAAUC,GACpDkB,IAAyBvB,IAC1Ba,MAAMC,QAAQf,EAAME,aAAa,IAAIF,EAAME,gBAAgBF,EAAME,gBAAgB,CAACF,EAAME,aAAa,IAAI,CAAA,IAC1GS,IAEEc,IAAoBA,CAACC,MAAmB;AAC5C,IAAKtB,KACHG,GAAkBmB,CAAK,GAEzB1B,EAAM2B,eAAeD,CAAK;AAAA,EAC5B,GAEME,IAA4BA,CAACC,MAA4B;AAC7D,IAAK5B,KACHW,EAA0BiB,CAAM;AAAA,EAEpC,GAEM;AAAA,IACJC,UAAAA,IAAW;AAAA,IACXC,iBAAAA,IAAkB;AAAA,IAClBC,iBAAAA,KAAkB;AAAA,IAClBC,iBAAAA;AAAAA,IACAC,aAAAA,IAAc;AAAA,IACdC,WAAAA,KAAY;AAAA,IACZC,UAAAA,IAAW;AAAA,IACXC,mBAAAA,KAAoB;AAAA,IACpBC,UAAAA,KAAW;AAAA,IACXC,cAAAA,KAAe;AAAA,IACfC,uBAAAA,KAAwB;AAAA,IACxBC,cAAAA,KAAe;AAAA,IACfC,kBAAAA,IAAmB;AAAA,IACnBC,gBAAAA,KAAiB;AAAA,IACjBC,mBAAAA,KAAoB;AAAA,IACpBC,0BAAAA,KAA2B;AAAA,IAC3BC,WAAAA,IAAY;AAAA,IACZC,qBAAAA,IAAsB;AAAA,IACtBC,cAAAA,IAAe;AAAA,IACfC,sBAAAA,KAAuB;AAAA,EAAA,IACrBjD;AAEJkD,EAAAA,EAAU,MAAM;AACd,QAAI,CAACjD,GAAuB;AAC1B,YAAMkD,IAAYnD,GAAOa,uBACrBC,MAAMC,QAAQf,GAAOa,oBAAoB,IACvCb,GAAOa,uBACP,CAACb,EAAMa,oBAAoB,IAC7B,CAAA;AACJD,MAAAA,EAA0BuC,CAAS;AAAA,IACrC;AAAA,EACF,GAAG,CAACnD,GAAOa,sBAAsBZ,CAAqB,CAAC,GAEvDiD,EAAU,MAAM;AACd,IAAK3B,KACHb,EAAe,EAAE;AAAA,EAErB,GAAG,CAACa,CAAc,CAAC,GAGnB2B,EAAU,MAAM;AACd,IAAI3B,KAAkBmB,KAAoBxB,EAAekC,WACvDC,sBAAsB,MAAMnC,EAAekC,SAASE,MAAAA,CAAO;AAAA,EAE/D,GAAG,CAAC/B,GAAgBmB,CAAgB,CAAC,GAIrCa,GAAgB,MAAM;AACpB,IAAIvD,EAAMwD,sBACRxD,EAAMwD,kBAAkBJ,UAAUpC,EAAWoC,SAASK,WAAW;AAAA,EAErE,CAAC;AAED,QAAMC,IAAgB1D,GAAO2D,SAAS,gBAGhCC,KAAqC;AAAA,IAAEC,aAAa;AAAA,IAAMC,IAAI;AAAA,IAAkBpC,OAAO;AAAA,EAAA,GACvFqC,KAAsBA,CAACC,MAAwB,CAAC,CAACA,GAAMH,aAEvDI,KAAqBA,MACpBxD,EAAYyD,UAGTjC,KAAmB,CAAA,GAAIkC,OAAQC,CAAAA,OACjBA,IAAStC,CAAQ,GAAGuC,SAAAA,EAAWC,iBAAiB,IACjDC,SAAS9D,EAAY6D,YAAAA,CAAa,CACtD,IALQrC,KAAmB,CAAA,GAQxBuC,IAA4BA,CAACC,MAAwB;AACzD7C,IAAAA,EAA0B,CAAC6C,CAAc,CAAC,GAC1ChD,EAAkB,EAAK,GACvBzB,GAAO0E,gBAAgBD,CAAc,GAIrCpB,sBAAsB,MAAM;AAC1BA,4BAAsB,MAAM;AAC1BrC,QAAAA,EAAWoC,SAASuB,aAAAA;AAAAA,MACtB,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAGMC,IAAkBX,GAAAA,GAClBY,KAAiBD,EAAgBE,WAAW,MAAMrE,EAAYyD,UAAUjC,GAAiB6C,WAAW,IAEpGC,IAAqBrB,IAEvB,CAAA,IADCkB,EAAgBE,SAAS,IAAIF,IAAmBC,KAAiB,CAACjB,EAAmB,IAAI,CAAA,GAExFoB,IAAmBtB,IACpBkB,EAAgBE,SAAS,IAAIF,IAAmBC,KAAiB,CAACjB,EAAmB,IAAI,CAAA,IAC1F,CAAA,GAEE;AAAA,IACJqB,cAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,kBAAAA;AAAAA,IACAC,qBAAAA;AAAAA,IACAC,gBAAgBC;AAAAA,IAChBC,YAAYC;AAAAA,IACZC,mBAAmBC;AAAAA,EAAAA,IACjBC,GAAY;AAAA,IACdC,OAAOb;AAAAA,IACP1E,QAAQkB,KAAkB,CAACmC;AAAAA,IAC3B/B,cAAcF;AAAAA,IACdoE,UAAUA,CAAC7B,MAAwB;AACjCQ,MAAAA,EAA0BR,CAAI;AAAA,IAChC;AAAA,IACA1C,WAAAA;AAAAA,IACAc,UAAUsB,KAAiBtB;AAAAA,IAC3B0D,UAAUf,EAAkBD,SAAS;AAAA,IACrCiB,gBAAgBhC;AAAAA,EAAAA,CACjB,GAIK;AAAA,IACJwB,YAAYS;AAAAA,IACZf,cAAcgB;AAAAA,IACdZ,gBAAgBa;AAAAA,IAChBf,kBAAkBgB;AAAAA,IAClBf,qBAAqBgB;AAAAA,IACrBX,mBAAmBY;AAAAA,EAAAA,IACjBV,GAAY;AAAA,IACdC,OAAOZ;AAAAA,IACP3E,QAAQkB,KAAkBmC;AAAAA,IAC1B/B,cAAcF;AAAAA,IACdoE,UAAUA,MAAM;AAAA,IAAC;AAAA,IACjBvE,WAAAA;AAAAA,IACAc,UAAU,CAACsB;AAAAA,IACX4C,MAAM;AAAA,IACNR,UAAUd,EAAiBF,SAAS;AAAA,IACpCyB,YAAY;AAAA,IACZR,gBAAgBhC;AAAAA,EAAAA,CACjB,GAIKyC,KAAkB9C,IAAgByC,IAA8BhB;AACtEjC,EAAAA,EAAU,MAAM;AACd,IAAI3B,KAAkBqD,EAAgBE,WAAW,MAAMrE,EAAYyD,UAAUjC,GAAiB6C,WAAW,MAAM0B,OAAoB,MACjIC,GAAS5D,IAA0B;AAAA,MAAE6D,eAAe;AAAA,MAAUC,SAAS;AAAA,MAAwBC,OAAO;AAAA,IAAA,CAAK;AAAA,EAE/G,GAAG,CAAChC,EAAgBE,QAAQvD,GAAgBd,GAAawB,GAAiB6C,QAAQ0B,EAAe,CAAC;AAElG,QAAMK,KAA2BA,CAACzC,GAAuB0C,IAAuB,OAC1EpD,IACKxB,IAIL4E,KAAe/D,IACVA,IAGFqB,IAAStC,CAAQ,KAAKI,GAGzB6E,KAA8BA,MAAM;AACxCnF,IAAAA,EAA0B,CAAA,CAAE,GAC5B5B,GAAOgH,UAAAA;AAAAA,EACT,GAEMC,KAAaA,CAAC7C,GAAuB8C,IAAqB,OAAU;AACxE,QAAIlH,GAAOmH;AACT,aAAOnH,GAAOmH,iBAAiB/C,GAAQ8C,CAAS;AAGlD,QAAIxD,KAAiBlC,GAAwBsD,SAAS,GAAG;AACvD,YAAMsC,IAAqB5F,EAAuB,CAAC,IAAIM,CAAQ,KAAK,IAC9DuF,IAAiB7F,EAAuBsD,SAAS;AAGvD,aACEwC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,QAAKC,WAAW;AAAA,MAAA,GACdF,gBAAAA,EAAAC,cAAA,OAAA;AAAA,QACEC,WAAW,GAAGH,IAAiB,IAAI,WAAW,QAAQ;AAAA,MAAA,GACtD,GAAGnF,CAAW,KAAKkF,CAAkB,EAAQ,GAC9CC,IAAiB,KAAKC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,QAAKC,WAAU;AAAA,MAAA,GAAgB,KAAEH,CAAoB,CACzE;AAAA,IAET;AAEA,UAAMI,IAAgBZ,GAAyBzC,GAAQ8C,CAAS,GAC1DQ,IAAkB,CAAC,CAAC1H,GAAO2H,SAAS,CAAC,CAAC3H,GAAO4H,gBAC7CC,IAAaX,KAAahF,KAAekC,IAAStC,CAAQ,KAAK,CAACiB,KAAuB,CAAC2E;AAE9F,WACEJ,gBAAAA,EAAAC,cAAA,KAAA;AAAA,MAAGC,WAAW;AAAA,IAAA,GACXK,IAAa,GAAG3F,CAAW,KAAKuF,CAAa,KAAKA,CAClD;AAAA,EAEP,GAEMK,KAAoBA,CAACC,MACzBT,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbF,gBAAAA,EAAAC,cAACS,IAAa;AAAA,IACZC,UAAUtF,KAAiB;AAAA,MAAEuF,MAAM;AAAA,MAAUC,UAAU;AAAA,MAAQC,OAAO;AAAA,QAAEC,OAAO;AAAA,MAAA;AAAA,IAAwB,IAAMlI;AAAAA,IAC7GuB,OAAOjB;AAAAA,IACP6H,UAAW5G,CAAAA,MAAUhB,EAAegB,CAAK;AAAA,IACzC6G,aAAa3F;AAAAA,IACbwF,OAAO;AAAA,MAAEI,QAAQ;AAAA,MAAGC,KAAK;AAAA,IAAA;AAAA,IACzBC,YAAY;AAAA,MAAEC,OAAO;AAAA,MAAQC,QAAQ;AAAA,MAAQC,SAAS;AAAA,IAAA;AAAA,IACtDC,cAAa;AAAA,IACbhG,WAAWF;AAAAA,IACXmG,UAAU7H;AAAAA,IACVqE,YAAYwC;AAAAA,EAAAA,CACb,CACE,GAGDiB,KAAkBA,MAEblB,GADLpE,IACuB;AAAA,IACvB,GAAGsC;AAAAA,IACHiD,WAAWA,CAACC,MAA2BC,GAAqBD,GAAG,EAAI;AAAA,EAAA,IAK9C;AAAA,IACvB,GAAG1D;AAAAA,IACHyD,WAAWA,CAACC,MAA2B;AACrC1D,MAAAA,EAAmByD,UAAUC,CAAC,GAC1BA,EAAEE,QAAQ,YACZ/F,sBAAsB,MAAMrC,EAAWoC,SAASuB,aAAAA,CAAc;AAAA,IAElE;AAAA,EAAA,CAXC,GAeC0E,KAAoBA,CAAC5E,GAA+B6E,MAAkB;AAC1E,UAAMC,IAAY9E,EAAe3C,CAAQ,GACnC0H,IAAwBhI,EAAuB,CAAC,IAAIM,CAAQ,KAAKI,GACjEuH,IAAmB1H,GAAiB+C,SACtCL,EAAe1C,CAAe,KAAKP,EAAuB,CAAC,IAAIO,CAAe,IAC9E,IACE2H,IAAmB1H,MAAmBuH,MAAcC,KAAyBC,GAC7EE,IAAgBxE,MAAqBmE,GACrCM,KAAelG,IAA0D,CAAA,IAA1CwB,GAAeoE,GAAOI,CAAgB;AAE3E,WACEpC,gBAAAA,EAAAC,cAAA,OAAAsC,EAAA;AAAA,MACET,KAAK3E,EAAeX,MAAMW,EAAe/C;AAAAA,MACzC8F,WAAW,8HACTkC,IAAmB,aAAa,EAAE,IAChCC,IAAgB,6BAA6BjE,IAAgC,gGAAgG,EAAE,KAAK,EAAE;AAAA,MAC1LoE,SAASA,MAAMtF,EAA0BC,CAAc;AAAA,MACvDwE,WAAYC,CAAAA,MAAM;AAChB,QAAIA,EAAEE,QAAQ,WAAWF,EAAEE,QAAQ,OACjCF,EAAEa,eAAAA,GACFvF,EAA0BC,CAAc,KAC/ByE,EAAEE,QAAQ,YACnB/F,sBAAsB,MAAMrC,EAAWoC,SAASuB,aAAAA,CAAc;AAAA,MAElE;AAAA,MACAqF,UAAU;AAAA,MACV,sBAAoB,mBAAmBvF,GAAgBqE,gBAAgBQ,CAAK;AAAA,IAAA,GACxEM,IAAW;AAAA,MACf,iBAAeF,IAAmB,SAAS;AAAA,IAAA,CAAQ,GAElDzC,GAAW;AAAA,MAAE,GAAGxC;AAAAA,MAAgBiF,kBAAAA;AAAAA,IAAAA,GAAoB,EAAK,GACzDA,KAAoBpC,gBAAAA,EAAAC,cAAC0C,IAAI;AAAA,MAAC/B,MAAK;AAAA,MAAYgC,QAAQ/H;AAAAA,IAAAA,CAAY,CAC7D;AAAA,EAET,GAEMgI,IAAmBA,CAACC,GAAiCC,GAA0BC,wBACnF/C,cAAA,OAAAsC,EAAA,CAAA,GACQS,IAAqC;AAAA,IAAExG,IAAI,GAAGxC,CAAS;AAAA,IAAaiJ,MAAM;AAAA,IAAU,iBAAiB;AAAA,EAAA,IAA3FrF,GAAe,GAAG,EAAK,GAA0E;AAAA,IACjHsC,WAAW,6DAA6D4C,MAA4B,IAAI,8BAA8BC,IAAkB,gGAAgG,EAAE,KAAK,EAAE;AAAA,EAAA,CAAG,GAEnQxH,EACE,GAGD2H,KAAyBA,MAE3BlD,gBAAAA,EAAAC,cAAAD,EAAAmD,UAAA,MACGzK,GAAO2H,SAAS1E,MACfqE,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACE,eAAY;AAAA,IACZC,WAAU;AAAA,EAAA,GAETxH,EAAM2H,KACJ,GAENjF,KAAoBsG,MACrB1B,gBAAAA,EAAAC,qBAAAsC,EAAA;AAAA,IACErC,WAAW,oCAAoC9E,IAAmB,KAAK,yCAAyC;AAAA,EAAA,GAC3GA,IAAmB,CAAA,IAAK;AAAA,IAC3B,GAAGuC;AAAAA,IACH,cAAc,GAAG/C,CAAW;AAAA,IAC5BkG,OAAO;AAAA,MAAES,SAAS;AAAA,IAAA;AAAA,IAClBmB,UAAU;AAAA,IACV,yBAAyBxE,EAAmB,uBAAuB;AAAA,IACnEyD,WAAWA,CAACC,MAA2B;AAErC,UADA5D,EAAuBoF,mBAAmBxB,CAAqC,GAC3EA,EAAEE,QAAQ,KAAK;AACjBF,UAAEa,eAAAA,GACE5E,KAAoB,KAAKP,EAAgBO,CAAgB,KAC3DX,EAA0BI,EAAgBO,CAAgB,CAAC;AAE7D;AAAA,MACF;AACAK,MAAAA,EAAmByD,UAAUC,CAAC;AAAA,IAChC;AAAA,IACAyB,SAASA,MAAM;AACb,MAAIxF,MAAqB,MAAMJ,EAAkBD,SAAS,KACxDM,GAAoB,CAAC;AAAA,IAEzB;AAAA,EAAA,CACD,GAEF1C,IACC4E,gBAAAA,EAAAC,qBAAAsC,EAAA;AAAA,IACErC,WAAU;AAAA,IACV,cAAY,GAAGtF,CAAW;AAAA,EAAA,GACtB+C,CAAY,GAEfL,EAAgBE,SAAS,IACxBF,EAAgBgG,IAAI,CAACnG,GAAgB6E,MAAUD,GAAkB5E,GAAgB6E,CAAK,CAAC,IAEvFa,EAAiBhF,GAAkBO,GAA+B,EAAK,CAEtE,IAELd,EAAgBE,SAAS,IACvBF,EAAgBgG,IAAI,CAACnG,GAAgB6E,MAAUD,GAAkB5E,GAAgB6E,CAAK,CAAC,IAEvFa,EAAiBhF,GAAkBO,GAA+B,EAAK,CAGtE,CACL,GAIAmF,KAAuCA,CAACC,GAAqBrG,MAAkC;AACnG,QAAIsG,IAA6C,CAAA;AACjD,IAAID,IACFC,IAA4B,CAAC,GAAGvJ,GAAwBiD,CAAc,IAEtEsG,IAA4BvJ,GAAwB2C,OACjDC,CAAAA,MAAWA,EAAOrC,CAAe,MAAM0C,EAAe1C,CAAe,CACxE,GAEFH,EAA0BmJ,CAAyB;AAAA,EACrD,GAEMC,KAAoCA,MAAM;AAC9ChK,IAAAA,EAAWoC,SAAS6H,cAAAA,GACpBjK,EAAWoC,SAASuB,aAAAA,GACpB3E,GAAOkL,UAAU1J,CAAsB;AAAA,EACzC,GAOM2H,KAAuBA,CAACD,GAAwBiC,IAAyB,OAAU;AACvF,QAAIA,EAAAA,KAAiBjC,EAAEE,QAAQ,MAE/B;AAAA,UAAIF,EAAEE,QAAQ,WAAWF,EAAEE,QAAQ,KAAK;AAEtC,YADAF,EAAEa,eAAAA,GACE5D,KAA+B,KAAKA,IAA8BvB,EAAgBE,QAAQ;AAC5F,gBAAMV,IAASQ,EAAgBuB,CAA2B,GACpD2E,IAAatJ,EAAuB4J,KACvCC,CAAAA,MAAMA,EAAEtJ,CAAe,MAAMqC,EAAOrC,CAAe,CACtD;AACA8I,UAAAA,GAAqC,CAACC,GAAY1G,CAAM;AAAA,QAC1D;AACA;AAAA,MACF;AAEA4B,MAAAA,EAA8BiD,UAAUC,CAAC,GAErCA,EAAEE,QAAQ,aACZF,EAAEoC,gBAAAA,GACFjI,sBAAsB,MAAMrC,EAAWoC,SAASuB,aAAAA,CAAc;AAAA;AAAA,EAElE,GAEM4G,KAA+BA,CAAC9G,GAA+B6E,MAAkB;AACrF,UAAMI,IAAmBlI,EAAuB4J,KAC7ChH,CAAAA,MAAWA,EAAOrC,CAAe,MAAM0C,EAAe1C,CAAe,CACxE,GACMyJ,IAAW,GAAGlK,CAAS,WAAWgI,CAAK,IACvCK,IAAgBxD,MAAgCmD;AAEtD,WACEhC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MACE6B,KAAK3E,EAAeX,MAAMW,EAAe/C;AAAAA,MACzCoC,IAAI0H;AAAAA,MACJjB,MAAK;AAAA,MACL,iBAAeb;AAAAA,MACflC,WAAW,wGACTmC,IAAgB,6BAA6BtD,IAA+B,gGAAgG,EAAE,KAAK,EAAE;AAAA,MAEvL2D,UAAU;AAAA,MACVF,SAASA,MAAMe,GAAqC,CAACnB,GAAkBjF,CAAc;AAAA,MACrF,sBAAoB,mBAAmBA,GAAgBqE,gBAAgBQ,CAAK;AAAA,IAAA,GAE5EhC,gBAAAA,EAAAC,cAACkE,IAAQ;AAAA,MACPzB,UAAU;AAAA,MACV0B,YAAU;AAAA,MACVC,SAASjC;AAAAA,MACTpB,UAAUA,MAAM;AAAA,MAAC;AAAA,MACjBd,WAAU;AAAA,IAAA,CACX,GACDF,gBAAAA,EAAAC,cAAA,QAAA;AAAA,MAAMC,WAAU;AAAA,IAAA,GAAkB/C,GAAgBkD,KAAY,CAC3D;AAAA,EAET,GAEMiE,KAAoCA,MAEtCtE,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACE0B,WAAYC,CAAAA,MAAM;AAIhB,MAAIA,EAAEE,QAAQ,SACZF,EAAEoC,gBAAAA;AAAAA,IAEN;AAAA,EAAA,GAEC5I,KAAoBsG,GAAAA,GACrB1B,gBAAAA,EAAAC,cAAA,OAAAsC,EAAA;AAAA,IACErC,WAAW,oCAAoC9E,IAAmB,KAAK,yCAAyC;AAAA,EAAA,GAC3GA,IAAmB,CAAA,IAAK;AAAA,IAC3B,GAAGuD;AAAAA,IACH,cAAc,GAAG/D,CAAW;AAAA,IAC5B,wBAAwB;AAAA,IACxBkG,OAAO;AAAA,MAAES,SAAS;AAAA,IAAA;AAAA,IAClBmB,UAAU;AAAA,IACV,yBAAyBhE,EAA8B,uBAAuB;AAAA,IAC9EiD,WAAWA,CAACC,MAA2BC,GAAqBD,GAAG,EAAK;AAAA,IACpEyB,SAASA,MAAM;AACb,MAAIxE,MAAgC,MAAMnB,EAAiBF,SAAS,KAClEsB,GAA+B,CAAC;AAAA,IAEpC;AAAA,EAAA,CACD,GAEF1D,IACC4E,gBAAAA,EAAAC,qBAAAsC,EAAA;AAAA,IACErC,WAAU;AAAA,EAAA,GACNvB,GAAuB;AAAA,IAC3B,cAAY,GAAG/D,CAAW;AAAA,IAC1B,wBAAqB;AAAA,EAAA,CAAM,GAE1B0C,EAAgBE,SAAS,IACxBF,EAAgBgG,IAAI,CAACnG,GAAgB6E,MAAUiC,GAA6B9G,GAAgB6E,CAAK,CAAC,IAElGa,EAAiBhE,GAA6BE,GAA8B,EAAI,CAE/E,IAELzB,EAAgBE,SAAS,IACvBF,EAAgBgG,IAAI,CAACnG,GAAgB6E,MAAUiC,GAA6B9G,GAAgB6E,CAAK,CAAC,IAElGa,EAAiBhE,GAA6BE,GAA8B,EAAI,CAG/E,GACLiB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAU;AAAA,IACVyB,WAAYC,CAAAA,MAAM;AAChB,UAAIA,EAAEE,QAAQ,eAAeF,EAAEE,QAAQ,aAAaF,EAAEE,QAAQ,UAAUF,EAAEE,QAAQ,OAAO;AAGvFF,UAAEoC,gBAAAA;AACF;AAAA,MACF;AACA,UAAIpC,EAAEE,QAAQ,SAAS,CAACF,EAAE2C,UAAU;AAIlC,cAAMC,IAAU5C,EAAE6C,cAAcC,cAAc,wDAAwD;AACtG,YAAIC,SAASC,kBAAkBJ,MAC7B5C,EAAEoC,gBAAAA,GACFtK,EAAWoC,SAAS6H,cAAAA,GAChBjI,IAAc;AAEhBkG,YAAEa,eAAAA;AACF,gBAAMoC,IAAQnL,EAAWoC,SAASK,SAC5B2I,IAAaC,GAAqB;AAAA,YAAEC,WAAWL,SAASM;AAAAA,YAAMC,cAAc;AAAA,UAAA,CAAM,GAClFC,IAAMN,IAAQC,EAAWM,QAAQP,CAAK,IAAI,IAC1CQ,IAAOP,EAAWK,IAAM,CAAC;AAC/B,UAAIE,IAAOA,EAAqBrJ,MAAAA,IAC1B6I,GAAuB7I,MAAAA;AAAAA,QAC/B;AAAA,MAGJ,MAAA,CAAW4F,EAAEE,QAAQ,SAASF,EAAE2C,aAC9B3C,EAAEa,eAAAA,GACFb,EAAEoC,gBAAAA,GACE5I,IACFxB,EAAekC,SAASE,MAAAA,IAExB2C,EAAwB2G,IAAIxJ,SAASE,MAAAA;AAAAA,IAG3C;AAAA,EAAA,GAEAgE,gBAAAA,EAAAC,cAACsF,IAAM;AAAA,IAAClF,OAAM;AAAA,IAAQhE,MAAK;AAAA,IAAOmJ,MAAK;AAAA,IAAKhD,SAAS/C;AAAAA,IAA6B+B,cAAa;AAAA,EAAA,CAAmC,GAClIxB,gBAAAA,EAAAC,cAACsF,IAAM;AAAA,IAAClF,OAAM;AAAA,IAAQhE,MAAK;AAAA,IAAUmJ,MAAK;AAAA,IAAKhD,SAASkB;AAAAA,IAAmClC,cAAa;AAAA,EAAA,CAAmC,CACxI,CACF,GAIHiE,KAAuBA,MAAM;AACjC,UAAMC,IAAczL,IAChB,mCACAa,IACA,mCACA,kCACE6K,IAAmB3K,KAAW,kCAAkC,IAChE4K,IAAsB,+DAC1BzK,KAAe,aAAa,qBAAqBwK,KAAsCD,CAAW,EAAE,sBAChF3K,EAAiB;AAEvC,WACEiF,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MAAKC,WAAW0F;AAAAA,IAAAA,GACd5F,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MACEzD,IAAIzC;AAAAA,MACJmG,WAAU;AAAA,MACV,sBAAoBxH,GAAOmN,8BAA8B;AAAA,IAAA,GAExDlG,GAAWzF,EAAuB,CAAC,GAAG,EAAI,CACxC,GACL8F,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MAAKC,WAAU;AAAA,MAAqB,eAAY;AAAA,IAAA,GAC9CF,gBAAAA,EAAAC,cAAC0C,IAAI;AAAA,MACH/B,MAAM;AAAA,MACNkF,UAAU7L,IAAiB,QAAQ;AAAA,MACnCiG,WAAW;AAAA,MACX0C,QAAQ/H;AAAAA,IAAAA,CACT,CACE,CACF;AAAA,EAET,GAEMkL,KAAuBA,MAAM;AACjC,UAAM5F,IAAgBjG,EAAuB,CAAC,IAAIM,CAAQ;AAC1D,WAAIgB,KAAa2E,IACR,GAAG3E,CAAS,KAAK2E,CAAa,KAEhC3E,KAAaZ,KAAe;AAAA,EACrC;AAYA,SACEoF,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,+BAA+BxH,GAAOwH,YAAY,IAAIxH,GAAOwH,SAAS,KAAK,EAAE;AAAA,IACxFY,OAAOpI,GAAOoI;AAAAA,EAAAA,GAEbpI,GAAO2H,QACNL,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKzD,IAAI3C;AAAAA,IAASqG,WAAW,4BAA4BvE,KAAuB,YAAY,+CAA+C;AAAA,EAAA,GACxIjD,GAAO2H,KACL,IACH,CAAC3H,GAAO4H,kBAAkB9E,IAC5BwE,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMzD,IAAI3C;AAAAA,IAASqG,WAAU;AAAA,EAAA,GAAW1E,CAAgB,IACtD,MACJwE,gBAAAA,EAAAC,cAAA,OAAAsC,EAAA;AAAA,IACEzB,OAAOpI,GAAOoI;AAAAA,IACdZ,WAAW,GAAGpF,IAAW,4DAA4D,EAAE;AAAA,EAAA,GACjFsB,IAeF;AAAA;AAAA;AAAA,IAGF4J,eAAepH,EAA0BoH;AAAAA,IACzCC,eAAerH,EAA0BqH;AAAAA,IACzCC,aAAatH,EAA0BsH;AAAAA,IACvCC,gBAAgBvH,EAA0BuH;AAAAA,IAC1C/C,kBAAkBA,CAACxB,MAAwC;AAQzD,UAPIA,EAAEE,QAAQ,YAAY7H,MACxB2H,EAAEoC,gBAAAA,GACFtK,EAAWoC,SAASuB,aAAAA,KAKjBuE,EAAEE,QAAQ,eAAeF,EAAEE,QAAQ,cAAc7H,GAAgB;AACpE,cAAMmM,IAAShL,IACXxB,EAAekC,UACf6C,EAAwB2G,IAAIxJ;AAChC,QAAIsK,KAAUzB,SAASC,kBAAkBwB,KAAU,CAACA,EAAOC,SAAS1B,SAASC,aAAqB,KAChGwB,EAAOpK,MAAAA;AAAAA,MAEX;AACA4C,MAAAA,EAA0BwE,mBAAmBxB,CAAC;AAAA,IAChD;AAAA,EAAA,IAvCoB;AAAA,IACpB,GAAG5D;AAAAA,IACHoF,kBAAkBA,CAACxB,MAAwC;AAGzD,OAAKA,EAAEE,QAAQ,YAAYF,EAAEE,QAAQ,UAAU7H,MAC7C2H,EAAEoC,gBAAAA,GACFtK,EAAWoC,SAASuB,aAAAA,IAEtBW,EAAuBoF,mBAAmBxB,CAAC;AAAA,IAC7C;AAAA;AAAA;AAAA;AAAA,IAIA,GAAIlG,IAAe;AAAA,MAAE4K,eAAezN;AAAAA,IAAAA,IAAc,CAAA;AAAA,EAAC,CA0BpD,GAEDmH,gBAAAA,EAAAC,cAACsG,IAAOhE,EAAA;AAAA,IACN+C,KAAK5L;AAAAA,IACL8M,eAAevM;AAAAA,IACfyB,cAAAA;AAAAA,IACA+K,uBACEvL,OAEIkB,IACAkI,KACApB;AAAAA,IAENwD,cAAc;AAAA,IACdC,6BAA6BjO,EAAMiO;AAAAA,IACnCC,yBACElO,EAAMmO,mBACF,MAAMnO,EAAMmO,iBAAkB;AAAA,MAAE9N,QAAQkB;AAAAA,MAAgBrB,eAAesB;AAAAA,IAAAA,CAAwB,IAC/FuL;AAAAA,IAENqB,iBAAkB1M,CAAAA,MAAU;AAE1B,UADAD,EAAkBC,CAAK,GACnBA,KAAS,CAACgC,KAAiBlC,EAAuBsD,SAAS,GAAG;AAEhE,cAAMuJ,IAAgBzJ,EAAgB0J,UACnClK,CAAAA,MAAWrC,IACRqC,EAAOrC,CAAe,MAAMP,EAAuB,CAAC,IAAIO,CAAe,IACvEqC,EAAOtC,CAAQ,MAAMN,EAAuB,CAAC,IAAIM,CAAQ,CAC/D;AACA,QAAIuM,KAAiB,KACnBjJ,GAAoBiJ,CAAa;AAAA,MAErC;AACA,UAAI3M,KAAS,CAACgB,GAAkB;AAI9B,cAAMkK,IAAMlJ,IAAgBuC,EAAwB2G,MAAM3H,EAAa2H;AACvEvJ,8BAAsB,MAAMA,sBAAsB,MAAMuJ,EAAIxJ,SAASE,MAAAA,CAAO,CAAC;AAAA,MAC/E;AAAA,IAEF;AAAA,IACAlB,UAAAA;AAAAA,IACA0G,cAAc9I,GAAOuO;AAAAA,IACrBC,4BAA4BxO,GAAOyO;AAAAA,IACnC7G,gBACE5H,GAAO2H,SAAS3H,GAAO4H,kBAAkB9E,IACrC,CAAC9C,GAAO2H,SAAU,CAAC3H,GAAO4H,kBAAkB9E,IAAa3B,IAAUnB,GAAO4H,gBAAgBvG,CAAO,EAAE8C,OAAOuK,OAAO,EAAEC,KAAK,GAAG,IAC3HxO;AAAAA,IAEN2C,WAAW,CAAC9C,GAAO2H,SAAS,CAAC7E,KAAa,CAAC9C,GAAO4H,iBAAiByF,GAAAA,IAAyBlN;AAAAA,IAC5FyO,YAhHkB;AAAA,IAiHZ,iBAAiB;AAAA,EAAA,GAClBrN,IAAiB;AAAA,IAAE,iBAAiBD;AAAAA,EAAAA,IAAc,CAAA,CAAE,CAC1D,CACE,GACJgB,MAAYgF,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAAuCjF,EAAkB,CAClF;AAET;"}
+{"version":3,"file":"index25.js","sources":["../src/components/ColorCodedLabel/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Badge } from 'src/components/Badge';\n\nexport type ColorCodedLabelProps = {\n  label: string;\n  tag?: string;\n  color?: string;\n  onClick?: () => void;\n};\n\nexport const ColorCodedLabel: FC<ColorCodedLabelProps> = (props) => {\n  const { label, color, onClick = () => {}, tag } = props;\n  return (\n    <div\n      className=\"se-design-color-coded-label flex items-center gap-2\"\n      onClick={onClick}\n    >\n      {color && <span className=\"w-[15px] h-[15px] rounded-[3px] inline-block\" style={{ backgroundColor: color }}></span>}\n      <div>{label}</div>\n      {tag && <Badge label={tag} />}\n    </div>\n  );\n};\n"],"names":["React__default","Badge","ColorCodedLabel","props","label","color","onClick","tag","React","createElement","className","style","backgroundColor"],"mappings":"AAUO,OAAAA,OAAA;AAAA,SAAA,SAAAC,SAAA;AAAA,MAAMC,IAA6CC,CAAAA,MAAU;AAClE,QAAM;AAAA,IAAEC,OAAAA;AAAAA,IAAOC,OAAAA;AAAAA,IAAOC,SAAAA,IAAUA,MAAM;AAAA,IAAC;AAAA,IAAGC,KAAAA;AAAAA,EAAAA,IAAQJ;AAClD,SACEK,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAU;AAAA,IACVJ,SAAAA;AAAAA,EAAAA,GAECD,KAASG,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,IAA+CC,OAAO;AAAA,MAAEC,iBAAiBP;AAAAA,IAAAA;AAAAA,EAAM,CAAS,GAClHG,gBAAAA,EAAAC,cAAA,OAAA,MAAML,CAAW,GAChBG,KAAOC,gBAAAA,EAAAC,cAACR,GAAK;AAAA,IAACG,OAAOG;AAAAA,EAAAA,CAAM,CACzB;AAET;"}