se-design 1.0.3 → 1.0.8-5.dev.1

package/dist/index22.js

@@ -1,26 +1,69 @@
-import e from "react";
-import { Badge as c } from "./index8.js";
-const m = (t) => {
-  const {
-    label: a,
-    color: l,
-    onClick: r = () => {
-    },
-    tag: o
-  } = t;
-  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: {
-      backgroundColor: l
+import t, { useRef as i, useEffect as L } from "react";
+import { TableContentLoader as O } from "./index27.js";
+import { announce as b } from "./index75.js";
+function f() {
+  return f = Object.assign ? Object.assign.bind() : function(r) {
+    for (var l = 1; l < arguments.length; l++) {
+      var e = arguments[l];
+      for (var a in e) ({}).hasOwnProperty.call(e, a) && (r[a] = e[a]);
     }
-  }), /* @__PURE__ */ e.createElement("div", null, a), o && /* @__PURE__ */ e.createElement(c, {
-    label: o
-  }));
+    return r;
+  }, f.apply(null, arguments);
+}
+const _ = ({
+  className: r = "",
+  automationId: l = "",
+  loading: e,
+  headerColSpan: a = [],
+  headerData: c,
+  tableData: o,
+  renderTableContentLoader: R,
+  getTableHeaders: m,
+  getTableBody: p,
+  getTableFooter: v,
+  onSortUiUpdate: d,
+  onRowClick: h,
+  tableId: E,
+  ariaDescribedBy: x,
+  ariaLabel: w,
+  loadingAnnouncement: s,
+  loadedAnnouncement: n,
+  ...y
+}) => {
+  const g = i(null), u = i(!1);
+  return L(() => {
+    e !== u.current && (u.current = e, e && s ? b(s) : !e && n && b(n));
+  }, [e, s, n]), /* @__PURE__ */ t.createElement("div", f({
+    className: "se-design-table-layout-wrapper flex flex-col flex-1 min-h-0" + (r.length > 0 ? ` ${r}` : "") + (e ? " table-data-loading" : "")
+  }, y), /* @__PURE__ */ t.createElement("div", {
+    className: "se-design-table-scroll-area flex-1 min-h-0 overflow-y-auto"
+  }, /* @__PURE__ */ t.createElement("table", {
+    className: "se-design-table w-full bg-[var(--color-white)] border-collapse table-fixed",
+    ref: g,
+    "data-automation-id": l,
+    id: E,
+    "aria-describedby": x,
+    "aria-label": w
+  }, /* @__PURE__ */ t.createElement("thead", null, /* @__PURE__ */ t.createElement("tr", null, m({
+    headerData: c,
+    sortData: {},
+    onSortUiUpdate: d,
+    loading: e
+  }))), /* @__PURE__ */ t.createElement("tbody", null, e ? /* @__PURE__ */ t.createElement(O, {
+    noOfColumns: c?.length,
+    colSpan: a
+  }) : p({
+    tableData: o,
+    onRowClick: h,
+    loading: e
+  })))), /* @__PURE__ */ t.createElement("div", {
+    className: "se-design-table-footer w-full bg-[var(--color-white)] flex-shrink-0"
+  }, v({
+    tableData: o,
+    loading: e
+  })));
 };
 export {
-  m as ColorCodedLabel
+  _ as TableLayout
 };
 //# sourceMappingURL=index22.js.map

package/dist/index22.js.map

@@ -1 +1 @@
-{"version":3,"file":"index22.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,CAAUA,MAAA;AAC5D,QAAA;AAAA,IAAEC,OAAAA;AAAAA,IAAOC,OAAAA;AAAAA,IAAOC,SAAAA,IAAUA,MAAM;AAAA,IAAC;AAAA,IAAGC,KAAAA;AAAAA,EAAQJ,IAAAA;AAEhDK,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAU;AAAA,IACVJ,SAAAA;AAAAA,EAECD,GAAAA,KAASI,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,IAA+CC,OAAO;AAAA,MAAEC,iBAAiBP;AAAAA,IAAM;AAAA,EAAS,CAAA,GAClHG,gBAAAA,EAAAC,cAAML,OAAAA,MAAAA,CAAW,GAChBG,KAAOE,gBAAAA,EAAAA,cAACR,GAAK;AAAA,IAACG,OAAOG;AAAAA,EAAM,CAAA,CACzB;AAET;"}
+{"version":3,"file":"index22.js","sources":["../src/components/TableLayout/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useEffect, useRef } from 'react';\nimport { TableContentLoader } from 'components/TableContentLoader';\nimport { announce } from 'src/utils/a11y/liveAnnouncer/LiveAnnouncer';\n\nexport interface TableLayoutProps {\n  className?: string;\n  automationId?: string;\n  loading: boolean;\n  headerData: any[];\n  tableData: any[];\n  headerColSpan?: number[];\n  renderTableContentLoader?: (noOfColumns: number) => ReactNode;\n  getTableHeaders: (props: { headerData: any[]; sortData: any; onSortUiUpdate: any; loading: boolean }) => ReactNode;\n  getTableBody: (props: { tableData: any[]; onRowClick: any; loading: boolean }) => ReactNode;\n  getTableFooter: (props: { tableData: any[]; loading: boolean }) => ReactNode;\n  onSortUiUpdate: (newSortData: any) => void;\n  onRowClick: (rowData: any) => void;\n  tableId: string;\n  /**\n   * ID of element that describes the table (e.g., sort instructions for screen readers)\n   */\n  ariaDescribedBy?: string;\n  /**\n   * Accessible name for the table element\n   */\n  ariaLabel?: string;\n  /**\n   * Announced to screen readers when loading begins.\n   * Pass a translated string from the consumer (e.g. \"Loading documents\").\n   */\n  loadingAnnouncement?: string;\n  /**\n   * Announced to screen readers when loading completes.\n   * Pass a translated string from the consumer (e.g. \"Documents loaded\").\n   */\n  loadedAnnouncement?: string;\n}\n\nexport const TableLayout: FC<TableLayoutProps> = ({\n  className = '',\n  automationId = '',\n  loading,\n  headerColSpan = [],\n  headerData,\n  tableData,\n  renderTableContentLoader,\n  getTableHeaders,\n  getTableBody,\n  getTableFooter,\n  onSortUiUpdate,\n  onRowClick,\n  tableId,\n  ariaDescribedBy,\n  ariaLabel,\n  loadingAnnouncement,\n  loadedAnnouncement,\n  ...props\n}) => {\n  const tableRef = useRef<HTMLTableElement>(null);\n  const prevLoadingRef = useRef(false);\n\n  useEffect(() => {\n    if (loading === prevLoadingRef.current) return;\n    prevLoadingRef.current = loading;\n    if (loading && loadingAnnouncement) {\n      announce(loadingAnnouncement);\n    } else if (!loading && loadedAnnouncement) {\n      announce(loadedAnnouncement);\n    }\n  }, [loading, loadingAnnouncement, loadedAnnouncement]);\n\n  return (\n    <div className={'se-design-table-layout-wrapper flex flex-col flex-1 min-h-0' + (className.length > 0 ? ` ${className}` : '') + (loading? ' table-data-loading' : '')} {...props}>\n      <div className=\"se-design-table-scroll-area flex-1 min-h-0 overflow-y-auto\">\n        <table\n          className={'se-design-table w-full bg-[var(--color-white)] border-collapse table-fixed'}\n          ref={tableRef}\n          data-automation-id={automationId}\n          id={tableId}\n          aria-describedby={ariaDescribedBy}\n          aria-label={ariaLabel}\n        >\n          <thead>\n            <tr>{getTableHeaders({ headerData, sortData: {}, onSortUiUpdate, loading })}</tr>\n          </thead>\n          <tbody>\n            {loading ? (\n              <TableContentLoader noOfColumns={headerData?.length} colSpan={headerColSpan} />\n            ) : (\n              getTableBody({ tableData, onRowClick, loading })\n            )}\n          </tbody>\n        </table>\n      </div>\n      <div className=\"se-design-table-footer w-full bg-[var(--color-white)] flex-shrink-0\">\n        {getTableFooter({ tableData, loading })}\n      </div>\n    </div>\n  );\n};\n"],"names":["TableLayout","className","automationId","loading","headerColSpan","headerData","tableData","renderTableContentLoader","getTableHeaders","getTableBody","getTableFooter","onSortUiUpdate","onRowClick","tableId","ariaDescribedBy","ariaLabel","loadingAnnouncement","loadedAnnouncement","props","tableRef","useRef","prevLoadingRef","useEffect","current","announce","React","createElement","_extends","length","ref","id","sortData","TableContentLoader","noOfColumns","colSpan"],"mappings":";;;;;;;;;;;;AAsCO,MAAMA,IAAoCA,CAAC;AAAA,EAChDC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,SAAAA;AAAAA,EACAC,eAAAA,IAAgB,CAAA;AAAA,EAChBC,YAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,0BAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,qBAAAA;AAAAA,EACAC,oBAAAA;AAAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAWC,EAAyB,IAAI,GACxCC,IAAiBD,EAAO,EAAK;AAEnCE,SAAAA,EAAU,MAAM;AACd,IAAInB,MAAYkB,EAAeE,YAC/BF,EAAeE,UAAUpB,GACrBA,KAAWa,IACbQ,EAASR,CAAmB,IACnB,CAACb,KAAWc,KACrBO,EAASP,CAAkB;AAAA,EAE/B,GAAG,CAACd,GAASa,GAAqBC,CAAkB,CAAC,GAGnDQ,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IAAK1B,WAAW,iEAAiEA,EAAU2B,SAAS,IAAI,IAAI3B,CAAS,KAAK,OAAOE,IAAS,wBAAwB;AAAA,EAAA,GAASe,CAAK,GAC9KO,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKzB,WAAU;AAAA,EAAA,GACbwB,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEzB,WAAW;AAAA,IACX4B,KAAKV;AAAAA,IACL,sBAAoBjB;AAAAA,IACpB4B,IAAIjB;AAAAA,IACJ,oBAAkBC;AAAAA,IAClB,cAAYC;AAAAA,EAAAA,qBAEZW,cAAA,SAAA,MACED,gBAAAA,EAAAC,cAAA,MAAA,MAAKlB,EAAgB;AAAA,IAAEH,YAAAA;AAAAA,IAAY0B,UAAU,CAAA;AAAA,IAAIpB,gBAAAA;AAAAA,IAAgBR,SAAAA;AAAAA,EAAAA,CAAS,CAAM,CAC3E,GACPsB,gBAAAA,EAAAC,cAAA,SAAA,MACGvB,IACCsB,gBAAAA,EAAAC,cAACM,GAAkB;AAAA,IAACC,aAAa5B,GAAYuB;AAAAA,IAAQM,SAAS9B;AAAAA,EAAAA,CAAgB,IAE9EK,EAAa;AAAA,IAAEH,WAAAA;AAAAA,IAAWM,YAAAA;AAAAA,IAAYT,SAAAA;AAAAA,EAAAA,CAAS,CAE5C,CACF,CACJ,GACLsB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKzB,WAAU;AAAA,EAAA,GACZS,EAAe;AAAA,IAAEJ,WAAAA;AAAAA,IAAWH,SAAAA;AAAAA,EAAAA,CAAS,CACnC,CACF;AAET;"}

package/dist/index224.js

@@ -0,0 +1,15 @@
+function n(o, u) {
+  let e;
+  const t = (...c) => {
+    e && clearTimeout(e), e = setTimeout(() => {
+      o(...c);
+    }, u);
+  };
+  return t.cancel = () => {
+    e && clearTimeout(e), e = null;
+  }, t;
+}
+export {
+  n as debounce
+};
+//# sourceMappingURL=index224.js.map

package/dist/index224.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index224.js","sources":["../src/utils/debounce.ts"],"sourcesContent":["export function debounce<T extends (...args: any[]) => void>(func: T, wait: number) {\n    let timeout: ReturnType<typeof setTimeout> | null;\n    const debounced = (...args: Parameters<T>) => {\n      if (timeout) clearTimeout(timeout);\n      timeout = setTimeout(() => {\n        func(...args);\n      }, wait);\n    };\n    debounced.cancel = () => {\n      if (timeout) clearTimeout(timeout);\n      timeout = null;\n    };\n    return debounced as T & { cancel: () => void };\n  }"],"names":["debounce","func","wait","timeout","debounced","args","setTimeout","cancel"],"mappings":"AAAO,SAASA,EAA6CC,GAASC,GAAc;AAChF,MAAIC;AACJ,QAAMC,IAAYA,IAAIC,MAAwB;AAC5C,IAAIF,kBAAsBA,CAAO,GACjCA,IAAUG,WAAW,MAAM;AACzBL,MAAAA,EAAK,GAAGI,CAAI;AAAA,IACd,GAAGH,CAAI;AAAA,EACT;AACAE,SAAAA,EAAUG,SAAS,MAAM;AACvB,IAAIJ,kBAAsBA,CAAO,GACjCA,IAAU;AAAA,EACZ,GACOC;AACT;"}

package/dist/index23.js

@@ -1,193 +1,90 @@
-import t, { useState as w, useRef as H, useEffect as $ } from "react";
-import { Popover as Y } from "./index17.js";
-import { Icon as A } from "./index5.js";
-import { Checkbox as Z } from "./index21.js";
-import { Button as B } from "./index3.js";
-import { InputWithIcon as ee } from "./index50.js";
-const ce = (o) => {
-  const [i, P] = w(!1), [f, x] = w(""), [a, d] = w(() => o?.defaultSelectedValue ? Array.isArray(o?.defaultSelectedValue) ? o?.defaultSelectedValue : [o.defaultSelectedValue] : []), p = H(null), {
-    selectBy: s = "",
-    optionsUniqueBy: n = "",
-    displaySelected: L = !1,
-    dropDownOptions: h,
-    defaultText: m = "Select",
-    iconColor: g = "var(--color-gray-700)",
-    disabled: y = !1,
-    dropdownClassName: M = "",
-    hasError: S = !1,
-    errorMessage: O = "",
-    customDropdownContent: E = null,
-    isBorderless: U = !1,
-    shouldShowSearch: D = !1,
-    searchPlaceholder: R = "Search...",
-    searchResultEmptyMessage: C = "No results found",
-    ariaLabel: j = ""
-  } = o;
-  $(() => {
-    const e = o?.defaultSelectedValue ? Array.isArray(o?.defaultSelectedValue) ? o?.defaultSelectedValue : [o.defaultSelectedValue] : [];
-    d(e);
-  }, [o?.defaultSelectedValue]), $(() => {
-    i || x("");
-  }, [i]);
-  const v = o?.type === "multi-select", N = () => f.trim() ? (h || []).filter((e) => (e?.[s]?.toString().toLowerCase() || "").includes(f.toLowerCase())) : h || [], k = (e) => {
-    d([e]), p.current?.togglePopover(), o?.onOptionClick?.(e);
-  }, T = (e) => v ? m : e?.[s] || m, q = () => {
-    d([]);
-  }, V = (e, r = !1) => {
-    if (o?.renderOptionChip)
-      return o?.renderOptionChip(e, r);
-    if (v && a?.length > 0) {
-      const l = a[0]?.[s] || "", c = a.length - 1;
-      return /* @__PURE__ */ t.createElement("div", {
-        className: "option-chip flex items-center w-full"
-      }, /* @__PURE__ */ t.createElement("div", {
-        className: `${c > 0 ? "w-full" : "flex-1"} truncate`
-      }, `${m}: ${l}`), c > 0 && /* @__PURE__ */ t.createElement("div", {
-        className: "flex-shrink-0"
-      }, "+", c));
+import s, { useState as j, useEffect as B } from "react";
+import { useStableId as K } from "./index205.js";
+import { getA11yNameAttributes as L } from "./index81.js";
+import "./index72.js";
+import { mergeIds as q } from "./index206.js";
+/* empty css         */
+function h() {
+  return h = Object.assign ? Object.assign.bind() : function(l) {
+    for (var i = 1; i < arguments.length; i++) {
+      var r = arguments[i];
+      for (var e in r) ({}).hasOwnProperty.call(r, e) && (l[e] = r[e]);
     }
-    return /* @__PURE__ */ t.createElement("p", {
-      className: "option-chip flex flex-1 items-center justify-between"
-    }, T(e));
-  }, I = () => /* @__PURE__ */ t.createElement("div", {
-    className: " w-full relative flex items-center border-b border-[var(--color-gray-300)]"
-  }, /* @__PURE__ */ t.createElement(ee, {
-    leftIcon: {
-      name: "search",
-      position: "left",
-      style: {
-        color: "var(--color-gray-500)"
-      }
-    },
-    value: f,
-    onChange: (e) => x(e),
-    placeholder: R,
-    style: {
-      margin: 0,
-      gap: 0
-    },
-    inputStyle: {
-      width: "100%",
-      border: "none",
-      outline: "none"
+    return l;
+  }, h.apply(null, arguments);
+}
+const Q = ({
+  className: l = "",
+  automationId: i = "",
+  defaultChecked: r = !1,
+  checked: e,
+  disabled: n = !1,
+  onChange: x,
+  checkMarkType: c = "",
+  label: u = "",
+  disabledLabel: g = "",
+  containerAutomationId: E = "",
+  ariaLabel: y,
+  ariaLabelledBy: C,
+  ariaDescribedBy: N,
+  ariaControls: I,
+  tabIndex: k,
+  ariaHidden: w = !1
+}) => {
+  const o = e !== void 0, [t, m] = j(o ? e : r);
+  B(() => {
+    m(o ? e : r);
+  }, [e, r]);
+  const A = (a) => {
+    n || (o || m((b) => !b), x?.(o ? !e : !t, a));
+  }, $ = (a) => {
+    if (!n && (a.key === "Enter" || a.key === " ")) {
+      a.preventDefault(), a.stopPropagation();
+      const b = o ? !e : !t;
+      o || m(b);
+      const d = a.currentTarget.closest("label")?.querySelector("input");
+      d && x?.(b, {
+        target: d,
+        currentTarget: d
+      });
     }
-  })), z = (e, r) => {
-    const l = e[s], c = a[0]?.[s] || m, G = n?.length ? e[n] == a[0]?.[n] : !0, u = L && l === c && G;
-    return /* @__PURE__ */ t.createElement("div", {
-      key: `$drop-option-${crypto.randomUUID()}`,
-      className: `option break-words px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${u ? "selected" : ""}`,
-      onClick: () => k(e),
-      onKeyDown: (b) => {
-        (b.key === "Enter" || b.key === " ") && (b.preventDefault(), k(e));
-      },
-      role: "option",
-      "aria-selected": u ? "true" : "false",
-      tabIndex: 0,
-      "data-automation-id": `dropdown-option-${e?.automationId || r}`
-    }, V({
-      ...e,
-      isOptionSelected: u
-    }, !1), u && /* @__PURE__ */ t.createElement(A, {
-      name: "checkmark",
-      stroke: g
-    }));
-  }, J = () => {
-    const e = N();
-    return /* @__PURE__ */ t.createElement("div", {
-      className: "dropdown-content dropdown-options",
-      role: "listbox",
-      "aria-label": "Dropdown options"
-    }, D && I(), /* @__PURE__ */ t.createElement("div", {
-      className: "flex flex-col max-h-80 overflow-y-auto"
-    }, e.length > 0 ? e.map((r, l) => z(r, l)) : /* @__PURE__ */ t.createElement("div", {
-      className: "px-3 py-4 text-center text-[var(--color-gray-500)] text-sm",
-      role: "status",
-      "aria-live": "polite"
-    }, C)));
-  }, Q = (e, r) => {
-    let l = [];
-    e ? l = [...a, r] : l = a?.filter((c) => c[n] !== r[n]), d(l);
-  }, W = () => {
-    p.current?.togglePopover(), o?.onApply?.(a);
-  }, _ = (e) => {
-    const r = a.some((l) => l[n] === e[n]);
-    return /* @__PURE__ */ t.createElement("div", {
-      key: `$drop-option-${crypto.randomUUID()}`,
-      className: "option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between"
-    }, /* @__PURE__ */ t.createElement(Z, {
-      automationId: "checkbox",
-      className: "checkbox",
-      defaultChecked: r,
-      onChange: (l) => Q(l, e),
-      label: e?.label
-    }));
-  }, F = () => {
-    const e = N();
-    return /* @__PURE__ */ t.createElement("div", {
-      className: "dropdown-content dropdown-options",
-      role: "listbox",
-      "aria-label": "Multi-select dropdown options",
-      "aria-multiselectable": "true"
-    }, D && I(), /* @__PURE__ */ t.createElement("div", {
-      className: "flex flex-col max-h-80 overflow-y-auto"
-    }, e.length > 0 ? e.map((r) => _(r)) : /* @__PURE__ */ t.createElement("div", {
-      className: "px-3 py-4 text-center text-[var(--color-gray-500)] text-sm",
-      role: "status",
-      "aria-live": "polite"
-    }, C)), /* @__PURE__ */ t.createElement("div", {
-      className: "flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]"
-    }, /* @__PURE__ */ t.createElement(B, {
-      label: "Clear",
-      type: "link",
-      size: "sm",
-      onClick: q
-    }), /* @__PURE__ */ t.createElement(B, {
-      label: "Apply",
-      type: "primary",
-      size: "sm",
-      onClick: W
-    })));
-  }, K = () => {
-    const e = i ? "border-[var(--color-blue-500)]" : y ? "border-[var(--color-gray-300)]" : "border-[var(--color-gray-600)]", r = S ? "border-[var(--color-red-500)]" : "", l = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 ${U ? "border-0" : `border rounded-md ${r || e}`} flex items-center ${M}`;
-    return /* @__PURE__ */ t.createElement("div", {
-      className: l
-    }, /* @__PURE__ */ t.createElement("div", {
-      className: "flex-1 min-w-0",
-      "data-automation-id": o?.dropDownSelectAutomationId || "selected-dropdown-value"
-    }, V(a[0], !0)), /* @__PURE__ */ t.createElement("div", {
-      className: "flex-shrink-0 ml-2",
-      "aria-hidden": "true"
-    }, /* @__PURE__ */ t.createElement(A, {
-      name: "chevron",
-      rotation: i ? "180" : "0",
-      className: "transition-transform",
-      stroke: g
-    })));
-  }, X = () => j || "Select option";
-  return /* @__PURE__ */ t.createElement("div", {
-    className: `se-design-dropdown-container${o?.className ? ` ${o?.className}` : ""}`,
-    style: o?.style
-  }, o?.label && /* @__PURE__ */ t.createElement("div", {
-    className: "se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm"
-  }, o?.label), /* @__PURE__ */ t.createElement("div", {
-    style: o?.style,
-    className: `${y ? "bg-[var(--color-gray-50)] rounded-md cursor-not-allowed" : ""}`
-  }, /* @__PURE__ */ t.createElement(Y, {
-    ref: p,
-    renderPopoverContents: E || (v ? F : J),
-    contentWidth: "full",
-    renderPopoverSrcElement: K,
-    onPopoverToggle: (e) => P(e),
-    disabled: y,
-    automationId: o?.dropDownSrcAutomationId,
-    popoverContentAutomationId: o?.dropDownContentAutomationId,
-    ariaLabel: X(),
-    sourceRole: "combobox"
-  })), S && /* @__PURE__ */ t.createElement("div", {
-    className: "text-[var(--color-red-500)] text-sm"
-  }, O));
+  }, D = () => n ? t && c === "tick" ? "disabled-tick" : t && c === "minus-checkbox" ? "disabled-minus-checkbox" : t && !c ? "disabled-tick" : "disabled-default" : c === "minus-checkbox" && t ? "minus-checkbox" : t ? "checked" : "unchecked", O = () => n ? "checkbox-label-disabled" : "checkbox-label", p = () => n && g ? g : u, f = K(void 0, "checkbox-input"), v = u ? `${f}-label` : void 0, S = L({
+    ariaLabelledBy: q(v, C),
+    ariaLabel: y,
+    ariaDescribedBy: N
+  }), _ = () => c === "minus-checkbox" && t ? "mixed" : t ? "true" : "false";
+  return /* @__PURE__ */ s.createElement("div", {
+    className: "se-design-checkbox-ctn",
+    "aria-hidden": w ? "true" : void 0
+  }, /* @__PURE__ */ s.createElement("label", h({
+    role: "checkbox",
+    htmlFor: f,
+    className: `se-design-checkbox ${l} ${D()}`,
+    "data-automation-id": E || "checkbox-container",
+    tabIndex: k !== void 0 ? k : n ? -1 : 0,
+    "aria-checked": _(),
+    "aria-disabled": n ? "true" : "false",
+    "aria-controls": I
+  }, S, {
+    onKeyDown: $
+  }), /* @__PURE__ */ s.createElement("input", {
+    id: f,
+    type: "checkbox",
+    checked: t,
+    onChange: A,
+    disabled: n,
+    tabIndex: -1,
+    "aria-hidden": "true"
+  }), /* @__PURE__ */ s.createElement("span", {
+    className: "checkbox-item",
+    "data-automation-id": i
+  }), p()?.length > 0 && /* @__PURE__ */ s.createElement("span", {
+    id: v,
+    className: O(),
+    "data-automation-id": i || (u ? `checkbox-label-${u}` : "checkbox-label")
+  }, p())));
 };
 export {
-  ce as Dropdown
+  Q as Checkbox
 };
 //# sourceMappingURL=index23.js.map

package/dist/index23.js.map

@@ -1 +1 @@
-{"version":3,"file":"index23.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef, useEffect } 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';\n\ntype DropdownValue = {\n  [key: string]: any;\n};\n\ntype DropdownProps = {\n  label?: string;\n  ariaLabel?: 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  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  customDropdownContent?: () => React.ReactNode;\n  isBorderless?: boolean;\n  dropDownSrcAutomationId?: string;\n  dropDownSelectAutomationId?: string;\n  dropDownContentAutomationId?: string;\n  shouldShowSearch?: boolean;\n  searchPlaceholder?: string;\n  searchResultEmptyMessage?: string;\n};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n  const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [selectedDropDownValues, setSelectedDropDownValues] = 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\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    searchPlaceholder = 'Search...',\n    searchResultEmptyMessage = 'No results found',\n    ariaLabel = ''\n  } = props;\n\n  useEffect(() => {\n    const newValues = props?.defaultSelectedValue\n      ? Array.isArray(props?.defaultSelectedValue)\n        ? props?.defaultSelectedValue\n        : [props.defaultSelectedValue]\n      : [];\n    setSelectedDropDownValues(newValues);\n  }, [props?.defaultSelectedValue]);\n\n  useEffect(() => {\n    if (!isDropDownOpen) {\n      setSearchQuery('');\n    }\n  }, [isDropDownOpen]);\n\n  const isMultiSelect = props?.type === 'multi-select';\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    popoverRef.current?.togglePopover();\n    props?.onOptionClick?.(dropDownOption);\n  };\n\n  const getSelectedDropDownValue = (option: DropdownValue) => {\n    if (isMultiSelect) {\n      return defaultText;\n    }\n    return option?.[selectBy] || defaultText;\n  };\n\n  const clearSelectedDropDownValues = () => {\n    setSelectedDropDownValues([]);\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    return <p className={`option-chip flex flex-1 items-center justify-between`}>{getSelectedDropDownValue(option)}</p>;\n  };\n\n  const renderSearchBar = () => {\n    return (\n      <div className=\" w-full relative flex items-center border-b border-[var(--color-gray-300)]\">\n        <InputWithIcon\n          leftIcon={{ name: 'search', position: 'left', style: { color: 'var(--color-gray-500)' } }}\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        />\n      </div>\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    return (\n      <div\n        key={`$drop-option-${crypto.randomUUID()}`}\n        className={`option break-words px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${\n          isOptionSelected ? 'selected' : ''\n        }`}\n        onClick={() => handleDropDownOptionClick(dropDownOption)}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            handleDropDownOptionClick(dropDownOption);\n          }\n        }}\n        role=\"option\"\n        aria-selected={isOptionSelected ? 'true' : 'false'}\n        tabIndex={0}\n        data-automation-id={`dropdown-option-${dropDownOption?.automationId || index}`}\n      >\n        {optionChip({ ...dropDownOption, isOptionSelected }, false)}\n        {isOptionSelected && <Icon name=\"checkmark\" stroke={iconColor} />}\n      </div>\n    );\n  };\n\n  const renderDropdownContents = () => {\n    const filteredOptions = getFilteredOptions();\n    return (\n      <div className=\"dropdown-content dropdown-options\" role=\"listbox\" aria-label=\"Dropdown options\">\n        {shouldShowSearch && renderSearchBar()}\n        <div className=\"flex flex-col max-h-80 overflow-y-auto\">\n          {filteredOptions.length > 0 ? (\n            filteredOptions.map((dropDownOption, index) => dropDownOptionJsx(dropDownOption, index))\n          ) : (\n            <div className=\"px-3 py-4 text-center text-[var(--color-gray-500)] text-sm\" role=\"status\" aria-live=\"polite\">{searchResultEmptyMessage}</div>\n          )}\n        </div>\n      </div>\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    props?.onApply?.(selectedDropDownValues);\n  };\n\n  const multiSelectDropdownOptionJSX = (dropDownOption: DropdownValue) => {\n    const isOptionSelected = selectedDropDownValues.some(\n      (option) => option[optionsUniqueBy] === dropDownOption[optionsUniqueBy]\n    );\n    return (\n      <div\n        key={`$drop-option-${crypto.randomUUID()}`}\n        className=\"option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between\"\n      >\n        <Checkbox\n          automationId=\"checkbox\"\n          className=\"checkbox\"\n          defaultChecked={isOptionSelected}\n          onChange={(value) => handleMultiSelectDropdownOptionClick(value, dropDownOption)}\n          label={dropDownOption?.label}\n        />\n      </div>\n    );\n  };\n\n  const renderMultiSelectDropdownContents = () => {\n    const filteredOptions = getFilteredOptions();\n    return (\n      <div className=\"dropdown-content dropdown-options\" role=\"listbox\" aria-label=\"Multi-select dropdown options\" aria-multiselectable=\"true\">\n        {shouldShowSearch && renderSearchBar()}\n        <div className=\"flex flex-col max-h-80 overflow-y-auto\">\n          {filteredOptions.length > 0 ? (\n            filteredOptions.map((dropDownOption) => multiSelectDropdownOptionJSX(dropDownOption))\n          ) : (\n            <div className=\"px-3 py-4 text-center text-[var(--color-gray-500)] text-sm\" role=\"status\" aria-live=\"polite\">{searchResultEmptyMessage}</div>\n          )}\n        </div>\n        <div className=\"flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]\">\n          <Button label=\"Clear\" type=\"link\" size=\"sm\" onClick={clearSelectedDropDownValues} />\n          <Button label=\"Apply\" type=\"primary\" size=\"sm\" onClick={handleApplySelectedDropDownValues} />\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          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    return ariaLabel || `Select option`;\n  };\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 className=\"se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm\">{props?.label}</div>\n      )}\n      <div\n        style={props?.style}\n        className={`${disabled ? 'bg-[var(--color-gray-50)] rounded-md cursor-not-allowed' : ''}`}\n      >\n        <Popover\n          ref={popoverRef}\n          renderPopoverContents={\n            customDropdownContent\n              ? customDropdownContent\n              : isMultiSelect\n              ? renderMultiSelectDropdownContents\n              : renderDropdownContents\n          }\n          contentWidth={'full'}\n          renderPopoverSrcElement={renderDropdownSelect}\n          onPopoverToggle={(value) => setIsDropDownOpen(value)}\n          disabled={disabled}\n          automationId={props?.dropDownSrcAutomationId}\n          popoverContentAutomationId={props?.dropDownContentAutomationId}\n          ariaLabel={getDropdownAriaLabel()}\n          sourceRole=\"combobox\"\n        />\n      </div>\n      {hasError && <div className=\"text-[var(--color-red-500)] text-sm\">{errorMessage}</div>}\n    </div>\n  );\n};\n"],"names":["React__default","useState","useRef","useEffect","Popover","Icon","Checkbox","Button","InputWithIcon","Dropdown","props","isDropDownOpen","setIsDropDownOpen","searchQuery","setSearchQuery","selectedDropDownValues","setSelectedDropDownValues","defaultSelectedValue","Array","isArray","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","iconColor","disabled","dropdownClassName","hasError","errorMessage","customDropdownContent","isBorderless","shouldShowSearch","searchPlaceholder","searchResultEmptyMessage","ariaLabel","newValues","isMultiSelect","type","getFilteredOptions","trim","filter","option","toString","toLowerCase","includes","handleDropDownOptionClick","dropDownOption","current","togglePopover","onOptionClick","getSelectedDropDownValue","clearSelectedDropDownValues","optionChip","srcOption","renderOptionChip","length","firstSelectedLabel","remainingCount","React","createElement","className","renderSearchBar","leftIcon","name","position","style","color","value","onChange","placeholder","margin","gap","inputStyle","width","border","outline","dropDownOptionJsx","index","optionTxt","dropDownSelectedValue","selectByUniqueId","isOptionSelected","key","crypto","randomUUID","onClick","onKeyDown","e","preventDefault","role","tabIndex","automationId","stroke","renderDropdownContents","filteredOptions","map","handleMultiSelectDropdownOptionClick","isSelected","newSelectedDropDownValues","handleApplySelectedDropDownValues","onApply","multiSelectDropdownOptionJSX","some","defaultChecked","label","renderMultiSelectDropdownContents","size","renderDropdownSelect","borderColor","errorBorderColor","dropDownSelectClass","dropDownSelectAutomationId","rotation","getDropdownAriaLabel","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle","dropDownSrcAutomationId","popoverContentAutomationId","dropDownContentAutomationId","sourceRole"],"mappings":"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"}
+{"version":3,"file":"index23.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 { mergeIds } from '../../utils/mergeIds';\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: mergeIds(labelId, ariaLabelledBy),\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","mergeIds","getAriaChecked","React","createElement","_extends","role","htmlFor","onKeyDown","id","type","length"],"mappings":"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"}