npm - @lax-wp/design-system - Versions diffs - 0.13.33-beta.6 → 0.13.33 - Mend

@lax-wp/design-system 0.13.33-beta.6 → 0.13.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

package/dist/components/forms/toggle/Toggle.es.js CHANGED Viewed

@@ -1,63 +1,63 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import r from "../../../_virtual/index.es.js";
+import a from "../../../_virtual/index.es.js";
 import { forwardRef as ie, useState as oe } from "react";
 import { AnimatePresence as ne, motion as se } from "framer-motion";
 import { Tooltip as ce } from "antd";
 import { useTranslation as de } from "react-i18next";
 import { Typography as p } from "../../data-display/typography/Typography.es.js";
-import { TOGGLE_LABEL_DIRECTION as x } from "../../../constants/toggle.es.js";
+import { TOGGLE_LABEL_DIRECTION as b } from "../../../constants/toggle.es.js";
 import { BoltOutlined as me, NoteAddOutlined as fe } from "@mui/icons-material";
 import { AIExtractedIndicator as pe } from "../../icons/AIExtractedIndicator.es.js";
 import { AIStarIcon as ue } from "../../icons/AIStarIcon.es.js";
 import { Label as ge } from "../../data-display/label/Label.es.js";
 import L from "../../tooltip/Tooltip.es.js";
-import { HelpIcon as he } from "../../icons/HelpIcon.es.js";
-import { InputLabel as be } from "../shared/InputLabel.es.js";
-import { shouldShowConfidenceScore as O, getConfidenceScoreBadgeFill as xe, getConfidenceScoreBadgeColor as ve, getConfidenceScoreBadgeTextColor as ke, getConfidenceScoreBadgeClass as ye } from "../../../utils/confidenceScoreUtils.es.js";
-const we = (a, t, o, u = "medium") => {
+import { HelpIcon as xe } from "../../icons/HelpIcon.es.js";
+import { InputLabel as he } from "../shared/InputLabel.es.js";
+import { shouldShowConfidenceScore as O, getConfidenceScoreBadgeFill as be, getConfidenceScoreBadgeColor as ve, getConfidenceScoreBadgeTextColor as ke, getConfidenceScoreBadgeClass as ye } from "../../../utils/confidenceScoreUtils.es.js";
+const we = (t, r, o, u = "medium") => {
   const n = {
     small: "w-7 h-4 after:h-3 after:w-3 after:top-0.5 after:left-0.5",
-    medium: "w-10 h-[1.375rem] after:h-[1.125rem] after:w-[1.125rem] after:top-0.5 after:left-0.5",
+    medium: "w-9 h-5 after:h-4 after:w-4 after:top-0.5 after:left-0.5",
     large: "w-11 h-6 after:h-5 after:w-5 after:top-0.5 after:left-0.5"
   }, g = {
     small: "peer-checked:after:translate-x-3",
     medium: "peer-checked:after:translate-x-full",
     large: "peer-checked:after:translate-x-5"
   };
-  return r(
+  return a(
     "p-0.5 rounded-full peer after:content-[''] after:absolute after:rounded-full after:transition-all bg-gray-200 dark:bg-black-400 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white dark:peer-focus-visible:ring-primary-400 dark:peer-focus-visible:ring-offset-black-900 peer-focus-visible:shadow-[0_0_0_3px_var(--color-primary-100)] dark:peer-focus-visible:shadow-[0_0_0_3px_var(--color-primary-950)]",
     n[u],
     g[u],
     {
-      "peer-checked:bg-primary-600 dark:peer-checked:bg-primary-700 peer-checked:after:translate-x-full after:bg-white dark:after:bg-primary-500": a,
-      "after:bg-white dark:after:bg-black-500": !a,
-      "text-white dark:text-black-900": t,
+      "peer-checked:bg-primary-600 dark:peer-checked:bg-primary-700 peer-checked:after:translate-x-full after:bg-white dark:after:bg-primary-500": t,
+      "after:bg-white dark:after:bg-black-500": !t,
+      "text-white dark:text-black-900": r,
       "cursor-not-allowed opacity-70": o
     }
   );
-}, Ne = ({ size: a = 18, fill: t = "#016DCF" }) => /* @__PURE__ */ e("svg", { width: a, height: a, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ e(
+}, Ne = ({ size: t = 18, fill: r = "#016DCF" }) => /* @__PURE__ */ e("svg", { width: t, height: t, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ e(
   "path",
   {
     d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
-    fill: t
+    fill: r
   }
-) }), Ce = ({ size: a = 18, fill: t = "#101828" }) => /* @__PURE__ */ e("svg", { width: a, height: a, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ e(
+) }), Fe = ({ size: t = 18, fill: r = "#101828" }) => /* @__PURE__ */ e("svg", { width: t, height: t, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ e(
   "path",
   {
     d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z",
-    fill: t
+    fill: r
   }
-) }), Fe = ie(
+) }), Ce = ie(
   ({
-    isGTN: a = !1,
-    isChecked: t,
+    isGTN: t = !1,
+    isChecked: r,
     id: o,
     onChange: u,
     label: n,
     required: g,
     isRequiredConditional: z = !1,
     hideStatus: R = !1,
-    labelDirection: v = x.TOP,
+    labelDirection: v = b.TOP,
     statusText: k,
     withIcon: S = !1,
     tags: j,
@@ -71,7 +71,7 @@ const we = (a, t, o, u = "medium") => {
     className: V = "",
     disabled: W,
     isDisabled: Y = !1,
-    icon: h,
+    icon: x,
     stopClickPropagation: G = !0,
     gtnName: J,
     variant: Ie = "primary",
@@ -85,20 +85,20 @@ const we = (a, t, o, u = "medium") => {
     size: i = "medium",
     renderGTNAddButton: B,
     onAddGTNToDocument: D,
-    inputEmphasis: C = "default"
+    inputEmphasis: F = "default"
   }, U) => {
-    const { t: X } = de(), Z = C === "modified", ee = C === "deleted", re = C === "success", F = W ?? Y, b = !!F, E = typeof F == "string" ? F : void 0, ae = v === x.TOP, te = v === x.LEFT, A = v === x.RIGHT, [I, P] = oe(!1), M = () => {
+    const { t: X } = de(), Z = F === "modified", ee = F === "deleted", re = F === "success", C = W ?? Y, h = !!C, E = typeof C == "string" ? C : void 0, ae = v === b.TOP, te = v === b.LEFT, A = v === b.RIGHT, [I, P] = oe(!1), M = () => {
       D && D({
         key: J,
-        value: t ? "Yes" : "No"
+        value: r ? "Yes" : "No"
       });
     }, le = () => m === "error" ? "text-red-500 dark:text-red-400" : m === "success" ? "text-green-500 dark:text-green-400" : m === "info" ? "text-primary-500 dark:text-primary-400" : "text-neutral-500 dark:text-neutral-400";
     return /* @__PURE__ */ l(
       "div",
       {
-        className: r(
+        className: a(
           "flex gap-0.5",
-          I && a ? "border rounded-lg border-primary-100 bg-primary-50 p-1" : "",
+          I && t ? "border rounded-lg border-primary-100 bg-primary-50 p-1" : "",
           Q
         ),
         onMouseEnter: () => P(!0),
@@ -107,8 +107,8 @@ const we = (a, t, o, u = "medium") => {
           G && s.stopPropagation();
         },
         children: [
-          a && !I ? /* @__PURE__ */ e("div", { className: "w-1 h-1 bg-primary-600 rounded-full animate-pulse mt-1.5" }) : null,
-          /* @__PURE__ */ l("div", { className: r(
+          t && !I ? /* @__PURE__ */ e("div", { className: "w-1 h-1 bg-primary-600 rounded-full animate-pulse mt-1.5" }) : null,
+          /* @__PURE__ */ l("div", { className: a(
             "w-full flex flex-col",
             Z && "rounded-lg border border-solid border-[var(--Warning-200,#FEDF89)] bg-[var(--Warning-50,#FFFAEB)] px-2 py-1.5",
             ee && "rounded-lg border border-solid border-[var(--Error-200,#FECACA)] bg-[var(--Error-50,#FEF2F2)] px-2 py-1.5",
@@ -118,16 +118,16 @@ const we = (a, t, o, u = "medium") => {
               /* @__PURE__ */ l(
                 "h1",
                 {
-                  className: r(
+                  className: a(
                     "mb-1 min-w-0 font-inter text-neutral-600 font-medium text-xs flex items-center gap-0.5 flex-wrap",
                     N
                   ),
                   children: [
-                    /* @__PURE__ */ e(be, { label: n || "", required: g || !1, isRequiredConditional: z || !1 }),
+                    /* @__PURE__ */ e(he, { label: n || "", required: g || !1, isRequiredConditional: z || !1 }),
                     K && /* @__PURE__ */ e(me, { sx: { fontSize: 16, color: "var(--color-primary-600)", rotate: "15deg" } }),
                     H && !O(y) && /* @__PURE__ */ e(pe, {}),
                     /* @__PURE__ */ e(ge, { labels: j || [] }),
-                    _ && /* @__PURE__ */ e(L, { placement: "top", title: _, children: /* @__PURE__ */ e("div", { className: "cursor-pointer", children: /* @__PURE__ */ e(he, { className: "w-icon-sm h-icon-sm" }) }) }),
+                    _ && /* @__PURE__ */ e(L, { placement: "top", title: _, children: /* @__PURE__ */ e("div", { className: "cursor-pointer", children: /* @__PURE__ */ e(xe, {}) }) }),
                     T
                   ]
                 }
@@ -143,7 +143,7 @@ const we = (a, t, o, u = "medium") => {
                     children: /* @__PURE__ */ l(
                       "div",
                       {
-                        className: r(
+                        className: a(
                           "inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5",
                           ye(c)
                         ),
@@ -154,10 +154,10 @@ const we = (a, t, o, u = "medium") => {
                             {
                               size: 12,
                               fill: ve(c),
-                              fillSecondary: xe(c)
+                              fillSecondary: be(c)
                             }
                           ),
-                          /* @__PURE__ */ l("span", { className: r("text-xs font-medium leading-4", ke(c)), children: [
+                          /* @__PURE__ */ l("span", { className: a("text-xs font-medium leading-4", ke(c)), children: [
                             y,
                             "%"
                           ] })
@@ -166,7 +166,7 @@ const we = (a, t, o, u = "medium") => {
                     )
                   }
                 ) : null,
-                a && I ? B ? B(M) : /* @__PURE__ */ e(
+                t && I ? B ? B(M) : /* @__PURE__ */ e(
                   "button",
                   {
                     id: "btn-toggle-add-to-document",
@@ -194,7 +194,7 @@ const we = (a, t, o, u = "medium") => {
                 {
                   size: "small",
                   variant: "medium",
-                  className: r("mr-2 text-neutral-700 dark:text-black-200", N),
+                  className: a("mr-2 text-neutral-700 dark:text-black-200", N),
                   appearance: "custom",
                   children: n
                 }
@@ -202,10 +202,10 @@ const we = (a, t, o, u = "medium") => {
               /* @__PURE__ */ l(
                 "label",
                 {
-                  className: r(
+                  className: a(
                     "relative inline-flex items-center",
                     A || k ? "" : "w-min",
-                    b ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+                    h ? "cursor-not-allowed opacity-50" : "cursor-pointer"
                   ),
                   onClick: (s) => s.stopPropagation(),
                   children: [
@@ -215,35 +215,29 @@ const we = (a, t, o, u = "medium") => {
                         ref: U,
                         type: "checkbox",
                         id: o,
-                        onChange: (s) => !b && u(s.target.checked),
+                        onChange: (s) => !h && u(s.target.checked),
                         value: "",
-                        disabled: b,
-                        checked: t,
-                        className: r("sr-only peer w-full", V),
+                        disabled: h,
+                        checked: r,
+                        className: a("sr-only peer w-full", V),
                         "aria-required": g,
                         "aria-invalid": d && m === "error" ? "true" : "false",
                         "aria-describedby": d || f ? `${o}-description` : void 0
                       }
                     ),
-                    /* @__PURE__ */ e("div", { className: we(t, S, b, i), children: S ? (
-                      // Overlay the icon on the sliding knob using the knob's exact
-                      // geometry (same top/left, same size, same full-width slide) so
-                      // it stays perfectly centered in the circle for every size/state.
-                      /* @__PURE__ */ e(
-                        "div",
-                        {
-                          className: r(
-                            "pointer-events-none absolute top-0.5 left-0.5 z-10 flex items-center justify-center transition-transform",
-                            i === "small" && "h-3 w-3",
-                            i === "medium" && "h-[1.125rem] w-[1.125rem]",
-                            i === "large" && "h-5 w-5",
-                            t && "translate-x-full"
-                          ),
-                          children: t ? h?.checkedIcon ? h.checkedIcon : /* @__PURE__ */ e(Ne, { size: 18, fill: "#016DCF" }) : h?.uncheckedIcon ? h.uncheckedIcon : /* @__PURE__ */ e(Ce, { size: 18, fill: "#101828" })
-                        }
-                      )
-                    ) : null }),
-                    E && /* @__PURE__ */ e(L, { placement: "top", title: E, className: "-ml-2", children: /* @__PURE__ */ e("span", { className: r(
+                    /* @__PURE__ */ e("div", { className: we(r, S, h, i), children: S ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-full w-full", children: /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: a(
+                          "z-10 transition-all transform",
+                          i === "small" && (r ? "translate-x-2" : "translate-x-[-6px]"),
+                          i === "medium" && (r ? "translate-x-[8.5px]" : "translate-x-[-8px]"),
+                          i === "large" && (r ? "translate-x-2.5" : "translate-x-[-10px]")
+                        ),
+                        children: r ? x?.checkedIcon ? x.checkedIcon : /* @__PURE__ */ e(Ne, { size: 18, fill: "#016DCF" }) : x?.uncheckedIcon ? x.uncheckedIcon : /* @__PURE__ */ e(Fe, { size: 18, fill: "#101828" })
+                      }
+                    ) }) : null }),
+                    E && /* @__PURE__ */ e(L, { placement: "top", title: E, className: "-ml-2", children: /* @__PURE__ */ e("span", { className: a(
                       "absolute inset-y-0 left-0",
                       i === "small" && "w-7",
                       i === "medium" && "w-9",
@@ -254,7 +248,7 @@ const we = (a, t, o, u = "medium") => {
                       {
                         size: "small",
                         variant: "medium",
-                        className: r("ml-2 text-neutral-700 dark:text-black-300", N),
+                        className: a("ml-2 text-neutral-700 dark:text-black-300", N),
                         appearance: "custom",
                         children: n
                       }
@@ -266,7 +260,7 @@ const we = (a, t, o, u = "medium") => {
                         variant: "medium",
                         className: "ml-2 text-neutral-900 dark:text-black-100",
                         appearance: "custom",
-                        children: k || (t ? "Yes" : "No")
+                        children: k || (r ? "Yes" : "No")
                       }
                     )
                   ]
@@ -285,7 +279,7 @@ const we = (a, t, o, u = "medium") => {
                 children: /* @__PURE__ */ e(
                   p,
                   {
-                    className: r("mt-1", le()),
+                    className: a("mt-1", le()),
                     appearance: "custom",
                     size: "extra-small",
                     variant: "medium",
@@ -301,8 +295,8 @@ const we = (a, t, o, u = "medium") => {
     );
   }
 );
-Fe.displayName = "Toggle";
+Ce.displayName = "Toggle";
 export {
-  Fe as Toggle
+  Ce as Toggle
 };
 //# sourceMappingURL=Toggle.es.js.map

package/dist/components/forms/toggle/Toggle.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toggle.es.js","sources":["../../../../src/components/forms/toggle/Toggle.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type ReactNode, useState } from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { Tooltip as AntTooltip } from \"antd\";\nimport { useTranslation } from 'react-i18next';\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { TOGGLE_LABEL_DIRECTION } from \"../../../constants/toggle\";\nimport type { TToggleDirection } from \"../../../constants/toggle\";\nimport { BoltOutlined, NoteAddOutlined } from \"@mui/icons-material\";\nimport { AIExtractedIndicator } from \"../../icons/AIExtractedIndicator\";\nimport { AIStarIcon } from \"../../icons/AIStarIcon\";\nimport { Label, type LabelType } from \"../../data-display/label/Label\";\nimport Tooltip from \"../../tooltip/Tooltip\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport {\n getConfidenceScoreBadgeClass,\n getConfidenceScoreBadgeColor,\n getConfidenceScoreBadgeFill,\n getConfidenceScoreBadgeTextColor,\n shouldShowConfidenceScore,\n} from \"../../../utils/confidenceScoreUtils\";\n\n// Re-export LabelType from Label component for external use\nexport type { LabelType };\n\n/** Visual emphasis for the toggle container (background + border) /\nexport type ToggleEmphasis = \"default\" \| \"modified\" \| \"deleted\" \| \"success\";\n\n/\n Confidence score type\n /\nexport type ConfidenceScoreType = \"low\" \| \"medium\" \| \"high\";\n\nexport type SourceMetaBBox = {\n b: number;\n l: number;\n r: number;\n t: number;\n};\n\nexport type SourceMetaItem = {\n bbox: SourceMetaBBox;\n confidence_score?: number;\n is_primary?: boolean;\n match_score?: number;\n match_type?: string;\n page_height: number;\n page_width: number;\n source_page: number;\n source_text?: string;\n};\n\n/\n Props for the Toggle component\n /\nexport interface ToggleProps {\n /* Whether this is a GTN (Global Term Name) field /\n isGTN?: boolean;\n /* Unique identifier for the toggle /\n id?: string;\n /* Whether the toggle is checked /\n isChecked: boolean;\n /* Callback function called when toggle state changes /\n onChange: (val: boolean) => void;\n /* Label text or element to display /\n label?: ReactNode;\n /* Whether to preserve original case in the label /\n originalCase?: boolean;\n /* Whether the field is required /\n required?: boolean;\n /* Whether the required indicator shows as conditional (yellow instead of red) /\n isRequiredConditional?: boolean;\n /* Tags/labels to display next to the label /\n tags?: (string \| LabelType)[];\n /* Whether to hide the status text (Yes/No) /\n hideStatus?: boolean;\n /* Label direction relative to toggle /\n labelDirection?: TToggleDirection;\n /* Custom status text instead of Yes/No /\n statusText?: string;\n /* Whether to show icons in the toggle /\n withIcon?: boolean;\n /* Whether the value was AI extracted /\n isAiExtracted?: boolean;\n /* Confidence percentage shown as a badge /\n confidenceScore?: number;\n /* Confidence classification for badge styling /\n confidenceType?: ConfidenceScoreType;\n /* Optional tooltip content for confidence badge /\n confidenceTooltip?: ReactNode;\n /* Source meta for confidence score /\n sourceMeta?: SourceMetaItem[];\n /* Handler fired when confidence score badge is clicked /\n onConfidenceScoreClick?: (sourceMeta: SourceMetaItem[]) => void;\n /* Tooltip text to display /\n tooltip?: string;\n /* Additional CSS classes for the toggle input /\n className?: string;\n /* Whether the toggle is disabled. Pass a string to disable with a tooltip message. /\n disabled?: boolean \| string;\n /\n @deprecated Use `disabled` instead.\n /\n isDisabled?: boolean \| string;\n /* Custom icons for checked/unchecked states /\n icon?: {\n checkedIcon: ReactNode;\n uncheckedIcon: ReactNode;\n };\n /* Whether to stop click propagation /\n stopClickPropagation?: boolean;\n /* GTN field name for document integration /\n gtnName?: any;\n /* Visual variant for the toggle /\n variant?: 'primary' \| 'secondary';\n /* Additional CSS classes for the label /\n labelClassName?: string;\n /* Whether this is a live field /\n isLiveField?: boolean;\n /* Message to display below the toggle /\n message?: string;\n /* Type of message to display /\n messageType?: \"success\" \| \"error\" \| \"info\" \| \"default\";\n /* Additional CSS classes for the wrapper container /\n wrapperClassName?: string;\n /* Help text to display below the label /\n helpText?: string;\n /* Optional extra content in the label row (e.g. actions, badges) /\n labelExtra?: React.ReactNode;\n /* Size variant for the toggle /\n size?: \"small\" \| \"medium\" \| \"large\";\n /* Custom render function for GTN add to document button /\n renderGTNAddButton?: (onClick: () => void) => ReactNode;\n /* Handler for adding GTN to document /\n onAddGTNToDocument?: (keyValuePair: { key: string; value: string }) => void;\n /* Container surface style: `'modified'` — Warning-50/Warning-200; `'deleted'` — Error-50/Error-200; `'success'` — Success-50/Success-200 /\n inputEmphasis?: ToggleEmphasis;\n}\n\n/\n Get toggle class names based on state and options\n /\nconst getToggleClassNames = (\n isChecked: boolean,\n withIcon: boolean,\n isDisabled: boolean,\n size: \"small\" \| \"medium\" \| \"large\" = \"medium\"\n): string => {\n const sizeClasses = {\n small: \"w-7 h-4 after:h-3 after:w-3 after:top-0.5 after:left-0.5\",\n medium: \"w-10 h-[1.375rem] after:h-[1.125rem] after:w-[1.125rem] after:top-0.5 after:left-0.5\",\n large: \"w-11 h-6 after:h-5 after:w-5 after:top-0.5 after:left-0.5\",\n };\n\n const translateClasses = {\n small: \"peer-checked:after:translate-x-3\",\n medium: \"peer-checked:after:translate-x-full\",\n large: \"peer-checked:after:translate-x-5\",\n };\n\n return cn(\n \"p-0.5 rounded-full peer after:content-[''] after:absolute after:rounded-full after:transition-all bg-gray-200 dark:bg-black-400 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white dark:peer-focus-visible:ring-primary-400 dark:peer-focus-visible:ring-offset-black-900 peer-focus-visible:shadow-[0_0_0_3px_var(--color-primary-100)] dark:peer-focus-visible:shadow-[0_0_0_3px_var(--color-primary-950)]\",\n sizeClasses[size],\n translateClasses[size],\n {\n 'peer-checked:bg-primary-600 dark:peer-checked:bg-primary-700 peer-checked:after:translate-x-full after:bg-white dark:after:bg-primary-500':\n isChecked,\n 'after:bg-white dark:after:bg-black-500': !isChecked,\n 'text-white dark:text-black-900': withIcon,\n 'cursor-not-allowed opacity-70': isDisabled,\n }\n );\n};\n\n/\n Default Check icon component\n /\nconst CheckIcon = ({ size = 18, fill = '#016DCF' }: { size?: number; fill?: string }) => (\n <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z\"\n fill={fill}\n />\n </svg>\n);\n\n/\n Default Close icon component\n /\nconst CloseIcon = ({ size = 18, fill = '#101828' }: { size?: number; fill?: string }) => (\n <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"\n fill={fill}\n />\n </svg>\n);\n\n/\n A highly customizable toggle component with label, validation, and styling support.\n * Features multiple sizes, variants, icon support, GTN integration, and comprehensive prop support.\n \n @example\n * ```tsx\n * <Toggle\n * id=\"notifications\"\n * label=\"Enable Notifications\"\n * isChecked={notificationsEnabled}\n * onChange={(checked) => setNotificationsEnabled(checked)}\n * required\n * />\n * ```\n /\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n (\n {\n isGTN = false,\n isChecked,\n id,\n onChange,\n label,\n required,\n isRequiredConditional = false,\n hideStatus = false,\n labelDirection = TOGGLE_LABEL_DIRECTION.TOP,\n statusText,\n withIcon = false,\n tags,\n isAiExtracted = false,\n confidenceScore,\n confidenceType = \"high\",\n confidenceTooltip,\n sourceMeta = [],\n onConfidenceScoreClick,\n tooltip = '',\n className = '',\n disabled,\n isDisabled = false,\n icon,\n stopClickPropagation = true,\n gtnName: _gtnName,\n variant: _variant = 'primary',\n labelClassName,\n isLiveField = false,\n message,\n messageType = \"default\",\n wrapperClassName,\n helpText,\n labelExtra,\n size = \"medium\",\n renderGTNAddButton,\n onAddGTNToDocument,\n inputEmphasis = \"default\",\n },\n ref\n ) => {\n const { t } = useTranslation();\n const emphasisModifiedSkin = inputEmphasis === \"modified\";\n const emphasisDeletedSkin = inputEmphasis === \"deleted\";\n const emphasisSuccessSkin = inputEmphasis === \"success\";\n const resolvedDisabled = disabled ?? isDisabled;\n const isDisabledBool = !!resolvedDisabled;\n const disabledTooltip = typeof resolvedDisabled === 'string' ? resolvedDisabled : undefined;\n const isLabelDirectionTop = labelDirection === TOGGLE_LABEL_DIRECTION.TOP;\n const isLabelDirectionLeft = labelDirection === TOGGLE_LABEL_DIRECTION.LEFT;\n const isLabelDirectionRight = labelDirection === TOGGLE_LABEL_DIRECTION.RIGHT;\n const [isHovered, setIsHovered] = useState(false);\n\n const handleAddGTNToDocument = () => {\n if (onAddGTNToDocument) {\n const keyValuePair = {\n key: _gtnName,\n value: isChecked ? 'Yes' : 'No',\n };\n onAddGTNToDocument(keyValuePair);\n }\n };\n\n const getMessageTypographyClass = (): string => {\n if (messageType === \"error\") return \"text-red-500 dark:text-red-400\";\n if (messageType === \"success\")\n return \"text-green-500 dark:text-green-400\";\n if (messageType === \"info\") return \"text-primary-500 dark:text-primary-400\";\n return \"text-neutral-500 dark:text-neutral-400\";\n };\n\n const _defaultRenderLabels = (labels?: (string \| LabelType)[]) => {\n if (!labels \|\| labels.length === 0) return null;\n return (\n <span className=\"inline-flex gap-1 ml-1\">\n {labels.map((tag, index) => {\n const label = typeof tag === 'string' ? tag : tag.label;\n const color = typeof tag === 'string' ? undefined : tag.color;\n return (\n <span\n key={index}\n className=\"px-1.5 py-0.5 text-xs rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300\"\n style={color ? { backgroundColor: color } : undefined}\n >\n {label}\n </span>\n );\n })}\n </span>\n );\n };\n\n return (\n <div\n className={cn(\n 'flex gap-0.5',\n isHovered && isGTN ? 'border rounded-lg border-primary-100 bg-primary-50 p-1' : '',\n wrapperClassName\n )}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n onClick={(e) => {\n if (stopClickPropagation) e.stopPropagation();\n }}\n >\n {isGTN && !isHovered ? (\n <div className=\"w-1 h-1 bg-primary-600 rounded-full animate-pulse mt-1.5\" />\n ) : null}\n <div className={cn(\n \"w-full flex flex-col\",\n emphasisModifiedSkin && \"rounded-lg border border-solid border-[var(--Warning-200,#FEDF89)] bg-[var(--Warning-50,#FFFAEB)] px-2 py-1.5\",\n emphasisDeletedSkin && \"rounded-lg border border-solid border-[var(--Error-200,#FECACA)] bg-[var(--Error-50,#FEF2F2)] px-2 py-1.5\",\n emphasisSuccessSkin && \"rounded-lg border border-solid border-[var(--Success-200,#BBF7D0)] bg-[var(--Success-50,#F0FDF4)] px-2 py-1.5\",\n )}>\n {isLabelDirectionTop && label && (\n <div className=\"grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-1\">\n <h1\n className={cn(\n 'mb-1 min-w-0 font-inter text-neutral-600 font-medium text-xs flex items-center gap-0.5 flex-wrap',\n labelClassName\n )}\n >\n <InputLabel label={label \|\| \"\"} required={required \|\| false} isRequiredConditional={isRequiredConditional \|\| false} />\n {isLiveField && <BoltOutlined sx={{ fontSize: 16, color: 'var(--color-primary-600)', rotate: '15deg' }} />}\n {isAiExtracted && !shouldShowConfidenceScore(confidenceScore) && <AIExtractedIndicator />}\n <Label labels={tags \|\| []} />\n {tooltip && (\n <Tooltip placement='top' title={tooltip}>\n <div className='cursor-pointer'>\n <HelpIcon className=\"w-icon-sm h-icon-sm\" />\n </div>\n </Tooltip>\n )}\n {labelExtra}\n </h1>\n <div className=\"flex items-center gap-1 justify-self-end\">\n {(shouldShowConfidenceScore(confidenceScore) && confidenceType) ? (\n <Tooltip\n placement='top-end'\n title={confidenceTooltip ?? ''}\n hideTooltip={confidenceTooltip === undefined \|\| confidenceTooltip === null}\n className='cursor-pointer'\n >\n <div\n className={cn(\n 'inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5',\n getConfidenceScoreBadgeClass(confidenceType)\n )}\n onClick={() => onConfidenceScoreClick?.(sourceMeta)}\n >\n <AIStarIcon\n size={12}\n fill={getConfidenceScoreBadgeColor(confidenceType)}\n fillSecondary={getConfidenceScoreBadgeFill(confidenceType)}\n />\n <span className={cn('text-xs font-medium leading-4', getConfidenceScoreBadgeTextColor(confidenceType))}>\n {confidenceScore}%\n </span>\n </div>\n </Tooltip>\n ) : null}\n {isGTN && isHovered ? (\n renderGTNAddButton ? (\n renderGTNAddButton(handleAddGTNToDocument)\n ) : (\n <button\n id=\"btn-toggle-add-to-document\"\n className=\"cursor-pointer\"\n onClick={handleAddGTNToDocument}\n type=\"button\"\n >\n <AntTooltip placement=\"top\" title={t(\"Add to document\")}>\n <NoteAddOutlined className=\"text-primary-600\" sx={{ fontSize: 16 }} />\n </AntTooltip>\n </button>\n )\n ) : null}\n </div>\n </div>\n )}\n\n {/ Help text /}\n {helpText && (\n <Typography\n className=\"mb-2 text-neutral-600 dark:text-neutral-400\"\n appearance=\"custom\"\n size=\"extra-small\"\n variant=\"regular\"\n >\n {helpText}\n </Typography>\n )}\n\n <div className=\"flex\">\n {isLabelDirectionLeft && (\n <Typography\n size=\"small\"\n variant=\"medium\"\n className={cn('mr-2 text-neutral-700 dark:text-black-200', labelClassName)}\n appearance=\"custom\"\n >\n {label}\n </Typography>\n )}\n\n <label\n className={cn(\n 'relative inline-flex items-center',\n isLabelDirectionRight \|\| statusText ? '' : 'w-min',\n !isDisabledBool ? 'cursor-pointer' : 'cursor-not-allowed opacity-50'\n )}\n onClick={(e) => e.stopPropagation()}\n >\n <input\n ref={ref}\n type=\"checkbox\"\n id={id}\n onChange={(e) => !isDisabledBool && onChange(e.target.checked)}\n value=\"\"\n disabled={isDisabledBool}\n checked={isChecked}\n className={cn('sr-only peer w-full', className)}\n aria-required={required}\n aria-invalid={\n message && messageType === \"error\" ? \"true\" : \"false\"\n }\n aria-describedby={\n message \|\| helpText ? `${id}-description` : undefined\n }\n />\n <div className={getToggleClassNames(isChecked, withIcon, isDisabledBool, size)}>\n {withIcon ? (\n // Overlay the icon on the sliding knob using the knob's exact\n // geometry (same top/left, same size, same full-width slide) so\n // it stays perfectly centered in the circle for every size/state.\n <div\n className={cn(\n \"pointer-events-none absolute top-0.5 left-0.5 z-10 flex items-center justify-center transition-transform\",\n size === \"small\" && \"h-3 w-3\",\n size === \"medium\" && \"h-[1.125rem] w-[1.125rem]\",\n size === \"large\" && \"h-5 w-5\",\n isChecked && \"translate-x-full\"\n )}\n >\n {isChecked ? (\n icon?.checkedIcon ? (\n icon.checkedIcon\n ) : (\n <CheckIcon size={18} fill=\"#016DCF\" />\n )\n ) : icon?.uncheckedIcon ? (\n icon.uncheckedIcon\n ) : (\n <CloseIcon size={18} fill=\"#101828\" />\n )}\n </div>\n ) : null}\n </div>\n {disabledTooltip && (\n <Tooltip placement=\"top\" title={disabledTooltip} className=\"-ml-2\">\n <span className={cn(\n 'absolute inset-y-0 left-0',\n size === 'small' && 'w-7',\n size === 'medium' && 'w-9',\n size === 'large' && 'w-11',\n )} />\n </Tooltip>\n )}\n\n {isLabelDirectionRight && (\n <Typography\n size=\"small\"\n variant=\"medium\"\n className={cn('ml-2 text-neutral-700 dark:text-black-300', labelClassName)}\n appearance=\"custom\"\n >\n {label}\n </Typography>\n )}\n\n {hideStatus ? null : (\n <Typography\n size=\"small\"\n variant=\"medium\"\n className=\"ml-2 text-neutral-900 dark:text-black-100\"\n appearance=\"custom\"\n >\n {statusText ? statusText : isChecked ? 'Yes' : 'No'}\n </Typography>\n )}\n </label>\n </div>\n\n {/ Message /}\n <AnimatePresence>\n {message && (\n <motion.div\n initial={{ opacity: 0, y: -10 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -10 }}\n transition={{ duration: 0.2 }}\n id={`${id}-description`}\n role={messageType === \"error\" ? \"alert\" : undefined}\n >\n <Typography\n className={cn(\"mt-1\", getMessageTypographyClass())}\n appearance=\"custom\"\n size=\"extra-small\"\n variant=\"medium\"\n >\n {message}\n </Typography>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Help text description for accessibility */}\n {helpText && !message && (\n <div id={`${id}-description`} className=\"sr-only\">\n {helpText}\n </div>\n )}\n </div>\n </div>\n );\n }\n);\n\nToggle.displayName = \"Toggle\";\n"],"names":["getToggleClassNames","isChecked","withIcon","isDisabled","size","sizeClasses","translateClasses","cn","CheckIcon","fill","jsx","CloseIcon","Toggle","forwardRef","isGTN","id","onChange","label","required","isRequiredConditional","hideStatus","labelDirection","TOGGLE_LABEL_DIRECTION","statusText","tags","isAiExtracted","confidenceScore","confidenceType","confidenceTooltip","sourceMeta","onConfidenceScoreClick","tooltip","className","disabled","icon","stopClickPropagation","_gtnName","_variant","labelClassName","isLiveField","message","messageType","wrapperClassName","helpText","labelExtra","renderGTNAddButton","onAddGTNToDocument","inputEmphasis","ref","t","useTranslation","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","resolvedDisabled","isDisabledBool","disabledTooltip","isLabelDirectionTop","isLabelDirectionLeft","isLabelDirectionRight","isHovered","setIsHovered","useState","handleAddGTNToDocument","getMessageTypographyClass","jsxs","e","InputLabel","BoltOutlined","shouldShowConfidenceScore","AIExtractedIndicator","Label","Tooltip","HelpIcon","getConfidenceScoreBadgeClass","AIStarIcon","getConfidenceScoreBadgeColor","getConfidenceScoreBadgeFill","getConfidenceScoreBadgeTextColor","AntTooltip","NoteAddOutlined","Typography","AnimatePresence","motion"],"mappings":"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"}
1	+ {"version":3,"file":"Toggle.es.js","sources":["../../../../src/components/forms/toggle/Toggle.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type ReactNode, useState } from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { Tooltip as AntTooltip } from \"antd\";\nimport { useTranslation } from 'react-i18next';\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { TOGGLE_LABEL_DIRECTION } from \"../../../constants/toggle\";\nimport type { TToggleDirection } from \"../../../constants/toggle\";\nimport { BoltOutlined, NoteAddOutlined } from \"@mui/icons-material\";\nimport { AIExtractedIndicator } from \"../../icons/AIExtractedIndicator\";\nimport { AIStarIcon } from \"../../icons/AIStarIcon\";\nimport { Label, type LabelType } from \"../../data-display/label/Label\";\nimport Tooltip from \"../../tooltip/Tooltip\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport {\n getConfidenceScoreBadgeClass,\n getConfidenceScoreBadgeColor,\n getConfidenceScoreBadgeFill,\n getConfidenceScoreBadgeTextColor,\n shouldShowConfidenceScore,\n} from \"../../../utils/confidenceScoreUtils\";\n\n// Re-export LabelType from Label component for external use\nexport type { LabelType };\n\n/** Visual emphasis for the toggle container (background + border) /\nexport type ToggleEmphasis = \"default\" \| \"modified\" \| \"deleted\" \| \"success\";\n\n/\n Confidence score type\n /\nexport type ConfidenceScoreType = \"low\" \| \"medium\" \| \"high\";\n\nexport type SourceMetaBBox = {\n b: number;\n l: number;\n r: number;\n t: number;\n};\n\nexport type SourceMetaItem = {\n bbox: SourceMetaBBox;\n confidence_score?: number;\n is_primary?: boolean;\n match_score?: number;\n match_type?: string;\n page_height: number;\n page_width: number;\n source_page: number;\n source_text?: string;\n};\n\n/\n Props for the Toggle component\n /\nexport interface ToggleProps {\n /* Whether this is a GTN (Global Term Name) field /\n isGTN?: boolean;\n /* Unique identifier for the toggle /\n id?: string;\n /* Whether the toggle is checked /\n isChecked: boolean;\n /* Callback function called when toggle state changes /\n onChange: (val: boolean) => void;\n /* Label text or element to display /\n label?: ReactNode;\n /* Whether to preserve original case in the label /\n originalCase?: boolean;\n /* Whether the field is required /\n required?: boolean;\n /* Whether the required indicator shows as conditional (yellow instead of red) /\n isRequiredConditional?: boolean;\n /* Tags/labels to display next to the label /\n tags?: (string \| LabelType)[];\n /* Whether to hide the status text (Yes/No) /\n hideStatus?: boolean;\n /* Label direction relative to toggle /\n labelDirection?: TToggleDirection;\n /* Custom status text instead of Yes/No /\n statusText?: string;\n /* Whether to show icons in the toggle /\n withIcon?: boolean;\n /* Whether the value was AI extracted /\n isAiExtracted?: boolean;\n /* Confidence percentage shown as a badge /\n confidenceScore?: number;\n /* Confidence classification for badge styling /\n confidenceType?: ConfidenceScoreType;\n /* Optional tooltip content for confidence badge /\n confidenceTooltip?: ReactNode;\n /* Source meta for confidence score /\n sourceMeta?: SourceMetaItem[];\n /* Handler fired when confidence score badge is clicked /\n onConfidenceScoreClick?: (sourceMeta: SourceMetaItem[]) => void;\n /* Tooltip text to display /\n tooltip?: string;\n /* Additional CSS classes for the toggle input /\n className?: string;\n /* Whether the toggle is disabled. Pass a string to disable with a tooltip message. /\n disabled?: boolean \| string;\n /\n @deprecated Use `disabled` instead.\n /\n isDisabled?: boolean \| string;\n /* Custom icons for checked/unchecked states /\n icon?: {\n checkedIcon: ReactNode;\n uncheckedIcon: ReactNode;\n };\n /* Whether to stop click propagation /\n stopClickPropagation?: boolean;\n /* GTN field name for document integration /\n gtnName?: any;\n /* Visual variant for the toggle /\n variant?: 'primary' \| 'secondary';\n /* Additional CSS classes for the label /\n labelClassName?: string;\n /* Whether this is a live field /\n isLiveField?: boolean;\n /* Message to display below the toggle /\n message?: string;\n /* Type of message to display /\n messageType?: \"success\" \| \"error\" \| \"info\" \| \"default\";\n /* Additional CSS classes for the wrapper container /\n wrapperClassName?: string;\n /* Help text to display below the label /\n helpText?: string;\n /* Optional extra content in the label row (e.g. actions, badges) /\n labelExtra?: React.ReactNode;\n /* Size variant for the toggle /\n size?: \"small\" \| \"medium\" \| \"large\";\n /* Custom render function for GTN add to document button /\n renderGTNAddButton?: (onClick: () => void) => ReactNode;\n /* Handler for adding GTN to document /\n onAddGTNToDocument?: (keyValuePair: { key: string; value: string }) => void;\n /* Container surface style: `'modified'` — Warning-50/Warning-200; `'deleted'` — Error-50/Error-200; `'success'` — Success-50/Success-200 /\n inputEmphasis?: ToggleEmphasis;\n}\n\n/\n Get toggle class names based on state and options\n /\nconst getToggleClassNames = (\n isChecked: boolean,\n withIcon: boolean,\n isDisabled: boolean,\n size: \"small\" \| \"medium\" \| \"large\" = \"medium\"\n): string => {\n const sizeClasses = {\n small: \"w-7 h-4 after:h-3 after:w-3 after:top-0.5 after:left-0.5\",\n medium: \"w-9 h-5 after:h-4 after:w-4 after:top-0.5 after:left-0.5\",\n large: \"w-11 h-6 after:h-5 after:w-5 after:top-0.5 after:left-0.5\",\n };\n\n const translateClasses = {\n small: \"peer-checked:after:translate-x-3\",\n medium: \"peer-checked:after:translate-x-full\",\n large: \"peer-checked:after:translate-x-5\",\n };\n\n return cn(\n \"p-0.5 rounded-full peer after:content-[''] after:absolute after:rounded-full after:transition-all bg-gray-200 dark:bg-black-400 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white dark:peer-focus-visible:ring-primary-400 dark:peer-focus-visible:ring-offset-black-900 peer-focus-visible:shadow-[0_0_0_3px_var(--color-primary-100)] dark:peer-focus-visible:shadow-[0_0_0_3px_var(--color-primary-950)]\",\n sizeClasses[size],\n translateClasses[size],\n {\n 'peer-checked:bg-primary-600 dark:peer-checked:bg-primary-700 peer-checked:after:translate-x-full after:bg-white dark:after:bg-primary-500':\n isChecked,\n 'after:bg-white dark:after:bg-black-500': !isChecked,\n 'text-white dark:text-black-900': withIcon,\n 'cursor-not-allowed opacity-70': isDisabled,\n }\n );\n};\n\n/\n Default Check icon component\n /\nconst CheckIcon = ({ size = 18, fill = '#016DCF' }: { size?: number; fill?: string }) => (\n <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z\"\n fill={fill}\n />\n </svg>\n);\n\n/\n Default Close icon component\n /\nconst CloseIcon = ({ size = 18, fill = '#101828' }: { size?: number; fill?: string }) => (\n <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"\n fill={fill}\n />\n </svg>\n);\n\n/\n A highly customizable toggle component with label, validation, and styling support.\n * Features multiple sizes, variants, icon support, GTN integration, and comprehensive prop support.\n \n @example\n * ```tsx\n * <Toggle\n * id=\"notifications\"\n * label=\"Enable Notifications\"\n * isChecked={notificationsEnabled}\n * onChange={(checked) => setNotificationsEnabled(checked)}\n * required\n * />\n * ```\n /\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n (\n {\n isGTN = false,\n isChecked,\n id,\n onChange,\n label,\n required,\n isRequiredConditional = false,\n hideStatus = false,\n labelDirection = TOGGLE_LABEL_DIRECTION.TOP,\n statusText,\n withIcon = false,\n tags,\n isAiExtracted = false,\n confidenceScore,\n confidenceType = \"high\",\n confidenceTooltip,\n sourceMeta = [],\n onConfidenceScoreClick,\n tooltip = '',\n className = '',\n disabled,\n isDisabled = false,\n icon,\n stopClickPropagation = true,\n gtnName: _gtnName,\n variant: _variant = 'primary',\n labelClassName,\n isLiveField = false,\n message,\n messageType = \"default\",\n wrapperClassName,\n helpText,\n labelExtra,\n size = \"medium\",\n renderGTNAddButton,\n onAddGTNToDocument,\n inputEmphasis = \"default\",\n },\n ref\n ) => {\n const { t } = useTranslation();\n const emphasisModifiedSkin = inputEmphasis === \"modified\";\n const emphasisDeletedSkin = inputEmphasis === \"deleted\";\n const emphasisSuccessSkin = inputEmphasis === \"success\";\n const resolvedDisabled = disabled ?? isDisabled;\n const isDisabledBool = !!resolvedDisabled;\n const disabledTooltip = typeof resolvedDisabled === 'string' ? resolvedDisabled : undefined;\n const isLabelDirectionTop = labelDirection === TOGGLE_LABEL_DIRECTION.TOP;\n const isLabelDirectionLeft = labelDirection === TOGGLE_LABEL_DIRECTION.LEFT;\n const isLabelDirectionRight = labelDirection === TOGGLE_LABEL_DIRECTION.RIGHT;\n const [isHovered, setIsHovered] = useState(false);\n\n const handleAddGTNToDocument = () => {\n if (onAddGTNToDocument) {\n const keyValuePair = {\n key: _gtnName,\n value: isChecked ? 'Yes' : 'No',\n };\n onAddGTNToDocument(keyValuePair);\n }\n };\n\n const getMessageTypographyClass = (): string => {\n if (messageType === \"error\") return \"text-red-500 dark:text-red-400\";\n if (messageType === \"success\")\n return \"text-green-500 dark:text-green-400\";\n if (messageType === \"info\") return \"text-primary-500 dark:text-primary-400\";\n return \"text-neutral-500 dark:text-neutral-400\";\n };\n\n const _defaultRenderLabels = (labels?: (string \| LabelType)[]) => {\n if (!labels \|\| labels.length === 0) return null;\n return (\n <span className=\"inline-flex gap-1 ml-1\">\n {labels.map((tag, index) => {\n const label = typeof tag === 'string' ? tag : tag.label;\n const color = typeof tag === 'string' ? undefined : tag.color;\n return (\n <span\n key={index}\n className=\"px-1.5 py-0.5 text-xs rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300\"\n style={color ? { backgroundColor: color } : undefined}\n >\n {label}\n </span>\n );\n })}\n </span>\n );\n };\n\n return (\n <div\n className={cn(\n 'flex gap-0.5',\n isHovered && isGTN ? 'border rounded-lg border-primary-100 bg-primary-50 p-1' : '',\n wrapperClassName\n )}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n onClick={(e) => {\n if (stopClickPropagation) e.stopPropagation();\n }}\n >\n {isGTN && !isHovered ? (\n <div className=\"w-1 h-1 bg-primary-600 rounded-full animate-pulse mt-1.5\" />\n ) : null}\n <div className={cn(\n \"w-full flex flex-col\",\n emphasisModifiedSkin && \"rounded-lg border border-solid border-[var(--Warning-200,#FEDF89)] bg-[var(--Warning-50,#FFFAEB)] px-2 py-1.5\",\n emphasisDeletedSkin && \"rounded-lg border border-solid border-[var(--Error-200,#FECACA)] bg-[var(--Error-50,#FEF2F2)] px-2 py-1.5\",\n emphasisSuccessSkin && \"rounded-lg border border-solid border-[var(--Success-200,#BBF7D0)] bg-[var(--Success-50,#F0FDF4)] px-2 py-1.5\",\n )}>\n {isLabelDirectionTop && label && (\n <div className=\"grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-1\">\n <h1\n className={cn(\n 'mb-1 min-w-0 font-inter text-neutral-600 font-medium text-xs flex items-center gap-0.5 flex-wrap',\n labelClassName\n )}\n >\n <InputLabel label={label \|\| \"\"} required={required \|\| false} isRequiredConditional={isRequiredConditional \|\| false} />\n {isLiveField && <BoltOutlined sx={{ fontSize: 16, color: 'var(--color-primary-600)', rotate: '15deg' }} />}\n {isAiExtracted && !shouldShowConfidenceScore(confidenceScore) && <AIExtractedIndicator />}\n <Label labels={tags \|\| []} />\n {tooltip && (\n <Tooltip placement='top' title={tooltip}>\n <div className='cursor-pointer'>\n <HelpIcon />\n </div>\n </Tooltip>\n )}\n {labelExtra}\n </h1>\n <div className=\"flex items-center gap-1 justify-self-end\">\n {(shouldShowConfidenceScore(confidenceScore) && confidenceType) ? (\n <Tooltip\n placement='top-end'\n title={confidenceTooltip ?? ''}\n hideTooltip={confidenceTooltip === undefined \|\| confidenceTooltip === null}\n className='cursor-pointer'\n >\n <div\n className={cn(\n 'inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5',\n getConfidenceScoreBadgeClass(confidenceType)\n )}\n onClick={() => onConfidenceScoreClick?.(sourceMeta)}\n >\n <AIStarIcon\n size={12}\n fill={getConfidenceScoreBadgeColor(confidenceType)}\n fillSecondary={getConfidenceScoreBadgeFill(confidenceType)}\n />\n <span className={cn('text-xs font-medium leading-4', getConfidenceScoreBadgeTextColor(confidenceType))}>\n {confidenceScore}%\n </span>\n </div>\n </Tooltip>\n ) : null}\n {isGTN && isHovered ? (\n renderGTNAddButton ? (\n renderGTNAddButton(handleAddGTNToDocument)\n ) : (\n <button\n id=\"btn-toggle-add-to-document\"\n className=\"cursor-pointer\"\n onClick={handleAddGTNToDocument}\n type=\"button\"\n >\n <AntTooltip placement=\"top\" title={t(\"Add to document\")}>\n <NoteAddOutlined className=\"text-primary-600\" sx={{ fontSize: 16 }} />\n </AntTooltip>\n </button>\n )\n ) : null}\n </div>\n </div>\n )}\n\n {/ Help text /}\n {helpText && (\n <Typography\n className=\"mb-2 text-neutral-600 dark:text-neutral-400\"\n appearance=\"custom\"\n size=\"extra-small\"\n variant=\"regular\"\n >\n {helpText}\n </Typography>\n )}\n\n <div className=\"flex\">\n {isLabelDirectionLeft && (\n <Typography\n size=\"small\"\n variant=\"medium\"\n className={cn('mr-2 text-neutral-700 dark:text-black-200', labelClassName)}\n appearance=\"custom\"\n >\n {label}\n </Typography>\n )}\n\n <label\n className={cn(\n 'relative inline-flex items-center',\n isLabelDirectionRight \|\| statusText ? '' : 'w-min',\n !isDisabledBool ? 'cursor-pointer' : 'cursor-not-allowed opacity-50'\n )}\n onClick={(e) => e.stopPropagation()}\n >\n <input\n ref={ref}\n type=\"checkbox\"\n id={id}\n onChange={(e) => !isDisabledBool && onChange(e.target.checked)}\n value=\"\"\n disabled={isDisabledBool}\n checked={isChecked}\n className={cn('sr-only peer w-full', className)}\n aria-required={required}\n aria-invalid={\n message && messageType === \"error\" ? \"true\" : \"false\"\n }\n aria-describedby={\n message \|\| helpText ? `${id}-description` : undefined\n }\n />\n <div className={getToggleClassNames(isChecked, withIcon, isDisabledBool, size)}>\n {withIcon ? (\n <div className=\"flex items-center justify-center h-full w-full\">\n <div\n className={cn(\n \"z-10 transition-all transform\",\n size === \"small\" &&\n (isChecked\n ? \"translate-x-2\"\n : \"translate-x-[-6px]\"),\n size === \"medium\" &&\n (isChecked\n ? \"translate-x-[8.5px]\"\n : \"translate-x-[-8px]\"),\n size === \"large\" &&\n (isChecked\n ? \"translate-x-2.5\"\n : \"translate-x-[-10px]\")\n )}\n >\n {isChecked ? (\n icon?.checkedIcon ? (\n icon.checkedIcon\n ) : (\n <CheckIcon size={18} fill=\"#016DCF\" />\n )\n ) : icon?.uncheckedIcon ? (\n icon.uncheckedIcon\n ) : (\n <CloseIcon size={18} fill=\"#101828\" />\n )}\n </div>\n </div>\n ) : null}\n </div>\n {disabledTooltip && (\n <Tooltip placement=\"top\" title={disabledTooltip} className=\"-ml-2\">\n <span className={cn(\n 'absolute inset-y-0 left-0',\n size === 'small' && 'w-7',\n size === 'medium' && 'w-9',\n size === 'large' && 'w-11',\n )} />\n </Tooltip>\n )}\n\n {isLabelDirectionRight && (\n <Typography\n size=\"small\"\n variant=\"medium\"\n className={cn('ml-2 text-neutral-700 dark:text-black-300', labelClassName)}\n appearance=\"custom\"\n >\n {label}\n </Typography>\n )}\n\n {hideStatus ? null : (\n <Typography\n size=\"small\"\n variant=\"medium\"\n className=\"ml-2 text-neutral-900 dark:text-black-100\"\n appearance=\"custom\"\n >\n {statusText ? statusText : isChecked ? 'Yes' : 'No'}\n </Typography>\n )}\n </label>\n </div>\n\n {/ Message /}\n <AnimatePresence>\n {message && (\n <motion.div\n initial={{ opacity: 0, y: -10 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -10 }}\n transition={{ duration: 0.2 }}\n id={`${id}-description`}\n role={messageType === \"error\" ? \"alert\" : undefined}\n >\n <Typography\n className={cn(\"mt-1\", getMessageTypographyClass())}\n appearance=\"custom\"\n size=\"extra-small\"\n variant=\"medium\"\n >\n {message}\n </Typography>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ Help text description for accessibility */}\n {helpText && !message && (\n <div id={`${id}-description`} className=\"sr-only\">\n {helpText}\n </div>\n )}\n </div>\n </div>\n );\n }\n);\n\nToggle.displayName = \"Toggle\";\n"],"names":["getToggleClassNames","isChecked","withIcon","isDisabled","size","sizeClasses","translateClasses","cn","CheckIcon","fill","jsx","CloseIcon","Toggle","forwardRef","isGTN","id","onChange","label","required","isRequiredConditional","hideStatus","labelDirection","TOGGLE_LABEL_DIRECTION","statusText","tags","isAiExtracted","confidenceScore","confidenceType","confidenceTooltip","sourceMeta","onConfidenceScoreClick","tooltip","className","disabled","icon","stopClickPropagation","_gtnName","_variant","labelClassName","isLiveField","message","messageType","wrapperClassName","helpText","labelExtra","renderGTNAddButton","onAddGTNToDocument","inputEmphasis","ref","t","useTranslation","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","resolvedDisabled","isDisabledBool","disabledTooltip","isLabelDirectionTop","isLabelDirectionLeft","isLabelDirectionRight","isHovered","setIsHovered","useState","handleAddGTNToDocument","getMessageTypographyClass","jsxs","e","InputLabel","BoltOutlined","shouldShowConfidenceScore","AIExtractedIndicator","Label","Tooltip","HelpIcon","getConfidenceScoreBadgeClass","AIStarIcon","getConfidenceScoreBadgeColor","getConfidenceScoreBadgeFill","getConfidenceScoreBadgeTextColor","AntTooltip","NoteAddOutlined","Typography","AnimatePresence","motion"],"mappings":"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"}

package/dist/components/navigation/accordion/Accordion.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),A=require("@mui/icons-material"),s=require("../../../_virtual/index.cjs.js"),T=require("framer-motion");require("react");const h=require("../../data-display/typography/Typography.cjs.js"),E=require("../../button/IconButton.cjs.js"),M=require("../../button/Radio.cjs.js"),j=require("../../icon/icons.generated.cjs.js"),p=({children:n,title:f,toggle:N,isOpen:t,hoveringIndex:v,index:y,viewOnly:i,onTitleClick:l,isChecked:b,onSelect:o,subTitle:g,noSpace:c,isDraggable:d,sortableConfig:a,headerClass:q,icon:k,additionalHeader:w,mainClass:I,id:z,childrenClass:$,withAnimation:u=!1,...m})=>{const x=s(!c&&"p-4",$);return e.jsxs("div",{id:z,className:`${!c&&"mb-4"}  ${t?"pb-1":""} ${I||""}`,style:a?.style,...m,children:[e.jsxs("div",{className:s("flex items-center justify-between cursor-pointer border border-neutral-200 dark:border-none bg-neutral-100 dark:bg-black-600 px-3 py-1 rounded-lg",q),onClick:N,...m,children:[e.jsxs("div",{onClick:r=>l?l(r):null,className:`${d&&"flex"} w-full`,children:[d&&!i&&e.jsx("button",{id:"btn-accordion-outline-drag-indicator",className:"flex items-center justify-center w-icon h-icon hover:transform hover:scale-125 transition-all duration-200 ease-in-out",...a?.attributes,...a?.listeners,children:e.jsx(j.DragIndicatorIcon,{size:16,className:"text-neutral-400 dark:text-neutral-400"})}),e.jsxs("div",{className:"flex items-center gap-1 w-full",children:[o&&e.jsx(M,{isChecked:b,onSelect:r=>{r.stopPropagation(),o()},className:"h-4 w-4 accent-[#366FE3]"}),e.jsxs("div",{className:"flex gap-2 items-center",children:[k,e.jsx(h.Typography,{size:"small",appearance:"body",variant:"medium",className:"whitespace-nowrap",children:f})]}),e.jsx(h.Typography,{size:"extra-small",appearance:"title",variant:"medium",className:"ml-1",children:g}),w,e.jsx("span",{children:v===y&&!i&&e.jsx(E,{variant:"ghost",children:e.jsx(j.EditIcon,{className:"ml-2 h-4 w-4 text-neutral-400 dark:text-neutral-400"})})})]})]}),e.jsx(A.ChevronLeft,{sx:{fontSize:18},className:s("text-neutral-600 dark:text-neutral-400",t?"rotate-90":"-rotate-90",u&&"transition-transform duration-300 ease-in-out")})]}),u?e.jsx(T.motion.div,{initial:!1,animate:{height:t?"auto":0},transition:{duration:.3,ease:[.4,0,.2,1]},style:{overflow:"hidden"},children:e.jsx("div",{className:x,children:n})}):t?e.jsx("div",{className:x,children:n}):null]})};p.displayName="Accordion";exports.Accordion=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),A=require("@mui/icons-material"),s=require("../../../_virtual/index.cjs.js"),T=require("framer-motion");require("react");const h=require("../../data-display/typography/Typography.cjs.js"),E=require("../../button/IconButton.cjs.js"),M=require("../../button/Radio.cjs.js"),j=require("../../icon/icons.generated.cjs.js"),p=({children:n,title:f,toggle:N,isOpen:t,hoveringIndex:v,index:y,viewOnly:i,onTitleClick:l,isChecked:b,onSelect:o,subTitle:g,noSpace:c,isDraggable:d,sortableConfig:a,headerClass:q,icon:k,additionalHeader:w,mainClass:z,id:I,childrenClass:$,withAnimation:u=!1,...m})=>{const x=s(!c&&"p-4",$);return e.jsxs("div",{id:I,className:`${!c&&"mb-4"}  ${t?"pb-1":""} ${z||""}`,style:a?.style,...m,children:[e.jsxs("div",{className:s("flex items-center justify-between cursor-pointer border border-neutral-200 dark:border-none bg-neutral-100 dark:bg-black-600 px-3 py-1 rounded-lg",q),onClick:N,...m,children:[e.jsxs("div",{onClick:r=>l?l(r):null,className:`${d&&"flex"} w-full`,children:[d&&!i&&e.jsx("button",{id:"btn-accordion-outline-drag-indicator",className:"flex items-center justify-center w-icon h-icon hover:transform hover:scale-125 transition-all duration-200 ease-in-out",...a?.attributes,...a?.listeners,children:e.jsx(j.DragIndicatorIcon,{size:16,className:"text-neutral-400 dark:text-neutral-400"})}),e.jsxs("div",{className:"flex items-center gap-1 w-full",children:[o&&e.jsx(M,{isChecked:b,onSelect:r=>{r.stopPropagation(),o()},className:"h-4 w-4 accent-[#366FE3]"}),e.jsxs("div",{className:"flex gap-2 items-center",children:[k,e.jsx(h.Typography,{size:"small",appearance:"body",variant:"medium",className:"whitespace-nowrap",children:f})]}),e.jsx(h.Typography,{size:"extra-small",appearance:"title",variant:"medium",className:"ml-1",children:g}),w,e.jsx("span",{children:v===y&&!i&&e.jsx(E,{variant:"ghost",children:e.jsx(j.EditIcon,{size:16,className:"ml-[8px] text-neutral-400 dark:text-neutral-400"})})})]})]}),e.jsx(A.ChevronLeft,{sx:{fontSize:18},className:s("text-neutral-600 dark:text-neutral-400",t?"rotate-90":"-rotate-90",u&&"transition-transform duration-300 ease-in-out")})]}),u?e.jsx(T.motion.div,{initial:!1,animate:{height:t?"auto":0},transition:{duration:.3,ease:[.4,0,.2,1]},style:{overflow:"hidden"},children:e.jsx("div",{className:x,children:n})}):t?e.jsx("div",{className:x,children:n}):null]})};p.displayName="Accordion";exports.Accordion=p;
 //# sourceMappingURL=Accordion.cjs.js.map

package/dist/components/navigation/accordion/Accordion.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.cjs.js","sources":["../../../../src/components/navigation/accordion/Accordion.tsx"],"sourcesContent":["import { ChevronLeft } from '@mui/icons-material';\nimport cn from 'classnames';\nimport { motion } from 'framer-motion';\nimport { type FC, type HTMLAttributes } from 'react';\n\nimport { Typography } from '../../data-display/typography/Typography';\nimport IconButton from '../../button/IconButton';\nimport Radio from '../../button/Radio';\nimport { DragIndicatorIcon, EditIcon } from '../../icon';\n\nexport type AccordionProps = HTMLAttributes<HTMLDivElement> & {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n title: any;\n toggle: () => void;\n isOpen: boolean;\n hoveringIndex?: number \| null;\n index?: number;\n viewOnly?: boolean;\n onTitleClick?: (e: React.MouseEvent) => void;\n onSelect?: () => void;\n isChecked?: boolean;\n subTitle?: string;\n noSpace?: boolean;\n isDraggable?: boolean;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n sortableConfig?: Record<string, any>;\n headerClass?: string;\n icon?: JSX.Element;\n additionalHeader?: JSX.Element;\n id: string;\n isEditMode?: boolean;\n mainClass?: string;\n childrenClass?: string;\n /** When true, expands and collapses the panel with a smooth height animation. Default false. /\n withAnimation?: boolean;\n};\n\n/\n Accordion component for collapsible content sections\n \n @example\n * ```tsx\n * <Accordion\n * id=\"my-accordion\"\n * title=\"Section Title\"\n * isOpen={isOpen}\n * toggle={() => setIsOpen(!isOpen)}\n * >\n * <div>Accordion content</div>\n * </Accordion>\n * ```\n */\nexport const Accordion: FC<AccordionProps> = ({\n children,\n title,\n toggle,\n isOpen,\n hoveringIndex,\n index,\n viewOnly,\n onTitleClick,\n isChecked,\n onSelect,\n subTitle,\n noSpace,\n isDraggable,\n sortableConfig,\n headerClass,\n icon,\n additionalHeader,\n mainClass,\n id,\n childrenClass,\n withAnimation = false,\n ...props\n}) => {\n const contentClassName = cn(!noSpace && 'p-4', childrenClass);\n\n return (\n <div id={id} className={`${!noSpace && 'mb-4'} ${isOpen ? 'pb-1' : ''} ${mainClass \|\| ''}`} style={sortableConfig?.style} {...props}>\n <div\n className={cn(\n 'flex items-center justify-between cursor-pointer border border-neutral-200 dark:border-none bg-neutral-100 dark:bg-black-600 px-3 py-1 rounded-lg',\n headerClass,\n )}\n onClick={toggle}\n {...props}\n >\n <div onClick={(e) => (onTitleClick ? onTitleClick(e) : null)} className={`${isDraggable && 'flex'} w-full`}>\n {isDraggable && !viewOnly && (\n <button\n id={`btn-accordion-outline-drag-indicator`}\n className='flex items-center justify-center w-icon h-icon hover:transform hover:scale-125 transition-all duration-200 ease-in-out'\n {...sortableConfig?.attributes}\n {...sortableConfig?.listeners}\n >\n <DragIndicatorIcon size={16} className='text-neutral-400 dark:text-neutral-400' />\n </button>\n )}\n\n <div className={`flex items-center gap-1 w-full`}>\n {onSelect && (\n <Radio\n isChecked={isChecked}\n onSelect={(e) => {\n e.stopPropagation();\n onSelect();\n }}\n className='h-4 w-4 accent-[#366FE3]'\n />\n )}\n <div className='flex gap-2 items-center'>\n {icon}\n\n <Typography size='small' appearance='body' variant='medium' className='whitespace-nowrap'>\n {title}\n </Typography>\n </div>\n <Typography size='extra-small' appearance='title' variant='medium' className={`ml-1`}>\n {subTitle}\n </Typography>\n {additionalHeader}\n <span>\n {hoveringIndex === index && !viewOnly && (\n <IconButton variant='ghost'>\n <EditIcon className='ml-2 ~~h-4 w-4~~ text-neutral-400 dark:text-neutral-400' />\n </IconButton>\n )}\n </span>\n </div>\n </div>\n <ChevronLeft\n sx={{ fontSize: 18 }}\n className={cn(\n 'text-neutral-600 dark:text-neutral-400',\n isOpen ? 'rotate-90' : '-rotate-90',\n withAnimation && 'transition-transform duration-300 ease-in-out',\n )}\n />\n </div>\n {withAnimation ? (\n <motion.div\n initial={false}\n animate={{\n height: isOpen ? 'auto' : 0,\n }}\n transition={{\n duration: 0.3,\n ease: [0.4, 0, 0.2, 1],\n }}\n style={{ overflow: 'hidden' }}\n >\n <div className={contentClassName}>{children}</div>\n </motion.div>\n ) : isOpen ? (\n <div className={contentClassName}>{children}</div>\n ) : null}\n </div>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\n\n\n"],"names":["Accordion","children","title","toggle","isOpen","hoveringIndex","index","viewOnly","onTitleClick","isChecked","onSelect","subTitle","noSpace","isDraggable","sortableConfig","headerClass","icon","additionalHeader","mainClass","id","childrenClass","withAnimation","props","contentClassName","cn","jsxs","e","jsx","DragIndicatorIcon","Radio","Typography","IconButton","EditIcon","ChevronLeft","motion"],"mappings":"mbAoDaA,EAAgC,CAAC,CAC5C,SAAAC,EACA,MAAAC,EACA,OAAAC,EACA,OAAAC,EACA,cAAAC,EAAA,MACAC,EACA,SAAAC,EACA,aAAAC,EACA,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,QAAAC,EACA,YAAAC,EACA,eAAAC,EACA,YAAAC,EACA,KAAAC,EACA,iBAAAC,EACA,UAAAC,EACA,GAAAC,EACA,cAAAC,EACA,cAAAC,EAAgB,GAChB,GAAGC,CACL,IAAM,CACJ,MAAMC,EAAmBC,EAAG,CAACZ,GAAW,MAAOQ,CAAa,EAE5D,OACEK,EAAAA,KAAC,OAAI,GAAAN,EAAQ,UAAW,GAAG,CAACP,GAAW,MAAM,KAAKR,EAAS,OAAS,EAAE,IAAIc,GAAa,EAAE,GAAI,MAAOJ,GAAgB,MAAQ,GAAGQ,EAC7H,SAAA,CAAAG,EAAAA,KAAC,MAAA,CACC,UAAWD,EACT,oJACAT,CAAA,EAEF,QAASZ,EACR,GAAGmB,EAEJ,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,QAAUC,GAAOlB,EAAeA,EAAakB,CAAC,EAAI,KAAO,UAAW,GAAGb,GAAe,MAAM,UAC9F,SAAA,CAAAA,GAAe,CAACN,GACfoB,EAAAA,IAAC,SAAA,CACC,GAAI,uCACJ,UAAU,yHACT,GAAGb,GAAgB,WACnB,GAAGA,GAAgB,UAEpB,SAAAa,EAAAA,IAACC,oBAAA,CAAkB,KAAM,GAAI,UAAU,wCAAA,CAAyC,CAAA,CAAA,EAIpFH,EAAAA,KAAC,MAAA,CAAI,UAAW,iCACb,SAAA,CAAAf,GACCiB,EAAAA,IAACE,EAAA,CACC,UAAApB,EACA,SAAWiB,GAAM,CACfA,EAAE,gBAAA,EACFhB,EAAA,CACF,EACA,UAAU,0BAAA,CAAA,EAGde,EAAAA,KAAC,MAAA,CAAI,UAAU,0BACZ,SAAA,CAAAT,EAEDW,EAAAA,IAACG,EAAAA,WAAA,CAAW,KAAK,QAAQ,WAAW,OAAO,QAAQ,SAAS,UAAU,oBACnE,SAAA5B,CAAA,CACH,CAAA,EACF,EACAyB,EAAAA,IAACG,EAAAA,WAAA,CAAW,KAAK,cAAc,WAAW,QAAQ,QAAQ,SAAS,UAAW,OAC3E,SAAAnB,CAAA,CACH,EACCM,~~EACDU~~,~~MAAC,~~OAAA,CACE,~~SAAAtB~~,IAAkBC,GAAS,CAACC,GAC3BoB,~~EAAAA~~,~~IAACI,~~EAAA,CAAW,QAAQ,QAClB,~~SAAAJ~~,~~MAACK,~~EAAAA,SAAA,CAAS,UAAU,~~sDAAsD~~,~~EAC5E~~,CAAA,CAEJ,CAAA,CAAA,CACF,CAAA,EACF,EACAL,EAAAA,IAACM,EAAAA,YAAA,CACC,GAAI,CAAE,SAAU,EAAA,EAChB,UAAWT,EACT,yCACApB,EAAS,YAAc,aACvBiB,GAAiB,+CAAA,CACnB,CAAA,CACF,CAAA,CAAA,EAEDA,EACCM,EAAAA,IAACO,EAAAA,OAAO,IAAP,CACC,QAAS,GACT,QAAS,CACP,OAAQ9B,EAAS,OAAS,CAAA,EAE5B,WAAY,CACV,SAAU,GACV,KAAM,CAAC,GAAK,EAAG,GAAK,CAAC,CAAA,EAEvB,MAAO,CAAE,SAAU,QAAA,EAEnB,SAAAuB,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAmB,SAAAtB,CAAA,CAAS,CAAA,CAAA,EAE5CG,EACFuB,EAAAA,IAAC,OAAI,UAAWJ,EAAmB,SAAAtB,EAAS,EAC1C,IAAA,EACN,CAEJ,EAEAD,EAAU,YAAc"}
1	+ {"version":3,"file":"Accordion.cjs.js","sources":["../../../../src/components/navigation/accordion/Accordion.tsx"],"sourcesContent":["import { ChevronLeft } from '@mui/icons-material';\nimport cn from 'classnames';\nimport { motion } from 'framer-motion';\nimport { type FC, type HTMLAttributes } from 'react';\n\nimport { Typography } from '../../data-display/typography/Typography';\nimport IconButton from '../../button/IconButton';\nimport Radio from '../../button/Radio';\nimport { DragIndicatorIcon, EditIcon } from '../../icon';\n\nexport type AccordionProps = HTMLAttributes<HTMLDivElement> & {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n title: any;\n toggle: () => void;\n isOpen: boolean;\n hoveringIndex?: number \| null;\n index?: number;\n viewOnly?: boolean;\n onTitleClick?: (e: React.MouseEvent) => void;\n onSelect?: () => void;\n isChecked?: boolean;\n subTitle?: string;\n noSpace?: boolean;\n isDraggable?: boolean;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n sortableConfig?: Record<string, any>;\n headerClass?: string;\n icon?: JSX.Element;\n additionalHeader?: JSX.Element;\n id: string;\n isEditMode?: boolean;\n mainClass?: string;\n childrenClass?: string;\n /** When true, expands and collapses the panel with a smooth height animation. Default false. /\n withAnimation?: boolean;\n};\n\n/\n Accordion component for collapsible content sections\n \n @example\n * ```tsx\n * <Accordion\n * id=\"my-accordion\"\n * title=\"Section Title\"\n * isOpen={isOpen}\n * toggle={() => setIsOpen(!isOpen)}\n * >\n * <div>Accordion content</div>\n * </Accordion>\n * ```\n */\nexport const Accordion: FC<AccordionProps> = ({\n children,\n title,\n toggle,\n isOpen,\n hoveringIndex,\n index,\n viewOnly,\n onTitleClick,\n isChecked,\n onSelect,\n subTitle,\n noSpace,\n isDraggable,\n sortableConfig,\n headerClass,\n icon,\n additionalHeader,\n mainClass,\n id,\n childrenClass,\n withAnimation = false,\n ...props\n}) => {\n const contentClassName = cn(!noSpace && 'p-4', childrenClass);\n\n return (\n <div id={id} className={`${!noSpace && 'mb-4'} ${isOpen ? 'pb-1' : ''} ${mainClass \|\| ''}`} style={sortableConfig?.style} {...props}>\n <div\n className={cn(\n 'flex items-center justify-between cursor-pointer border border-neutral-200 dark:border-none bg-neutral-100 dark:bg-black-600 px-3 py-1 rounded-lg',\n headerClass,\n )}\n onClick={toggle}\n {...props}\n >\n <div onClick={(e) => (onTitleClick ? onTitleClick(e) : null)} className={`${isDraggable && 'flex'} w-full`}>\n {isDraggable && !viewOnly && (\n <button\n id={`btn-accordion-outline-drag-indicator`}\n className='flex items-center justify-center w-icon h-icon hover:transform hover:scale-125 transition-all duration-200 ease-in-out'\n {...sortableConfig?.attributes}\n {...sortableConfig?.listeners}\n >\n <DragIndicatorIcon size={16} className='text-neutral-400 dark:text-neutral-400' />\n </button>\n )}\n\n <div className={`flex items-center gap-1 w-full`}>\n {onSelect && (\n <Radio\n isChecked={isChecked}\n onSelect={(e) => {\n e.stopPropagation();\n onSelect();\n }}\n className='h-4 w-4 accent-[#366FE3]'\n />\n )}\n <div className='flex gap-2 items-center'>\n {icon}\n\n <Typography size='small' appearance='body' variant='medium' className='whitespace-nowrap'>\n {title}\n </Typography>\n </div>\n <Typography size='extra-small' appearance='title' variant='medium' className={`ml-1`}>\n {subTitle}\n </Typography>\n {additionalHeader}\n <span>\n {hoveringIndex === index && !viewOnly && (\n <IconButton variant='ghost'>\n <EditIcon size={16} className='ml-[8px] text-neutral-400 dark:text-neutral-400' />\n </IconButton>\n )}\n </span>\n </div>\n </div>\n <ChevronLeft\n sx={{ fontSize: 18 }}\n className={cn(\n 'text-neutral-600 dark:text-neutral-400',\n isOpen ? 'rotate-90' : '-rotate-90',\n withAnimation && 'transition-transform duration-300 ease-in-out',\n )}\n />\n </div>\n {withAnimation ? (\n <motion.div\n initial={false}\n animate={{\n height: isOpen ? 'auto' : 0,\n }}\n transition={{\n duration: 0.3,\n ease: [0.4, 0, 0.2, 1],\n }}\n style={{ overflow: 'hidden' }}\n >\n <div className={contentClassName}>{children}</div>\n </motion.div>\n ) : isOpen ? (\n <div className={contentClassName}>{children}</div>\n ) : null}\n </div>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\n\n\n"],"names":["Accordion","children","title","toggle","isOpen","hoveringIndex","index","viewOnly","onTitleClick","isChecked","onSelect","subTitle","noSpace","isDraggable","sortableConfig","headerClass","icon","additionalHeader","mainClass","id","childrenClass","withAnimation","props","contentClassName","cn","jsxs","e","jsx","DragIndicatorIcon","Radio","Typography","IconButton","EditIcon","ChevronLeft","motion"],"mappings":"mbAoDaA,EAAgC,CAAC,CAC5C,SAAAC,EACA,MAAAC,EACA,OAAAC,EACA,OAAAC,EACA,cAAAC,EAAA,MACAC,EACA,SAAAC,EACA,aAAAC,EACA,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,QAAAC,EACA,YAAAC,EACA,eAAAC,EACA,YAAAC,EACA,KAAAC,EACA,iBAAAC,EACA,UAAAC,EACA,GAAAC,EACA,cAAAC,EACA,cAAAC,EAAgB,GAChB,GAAGC,CACL,IAAM,CACJ,MAAMC,EAAmBC,EAAG,CAACZ,GAAW,MAAOQ,CAAa,EAE5D,OACEK,EAAAA,KAAC,OAAI,GAAAN,EAAQ,UAAW,GAAG,CAACP,GAAW,MAAM,KAAKR,EAAS,OAAS,EAAE,IAAIc,GAAa,EAAE,GAAI,MAAOJ,GAAgB,MAAQ,GAAGQ,EAC7H,SAAA,CAAAG,EAAAA,KAAC,MAAA,CACC,UAAWD,EACT,oJACAT,CAAA,EAEF,QAASZ,EACR,GAAGmB,EAEJ,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,QAAUC,GAAOlB,EAAeA,EAAakB,CAAC,EAAI,KAAO,UAAW,GAAGb,GAAe,MAAM,UAC9F,SAAA,CAAAA,GAAe,CAACN,GACfoB,EAAAA,IAAC,SAAA,CACC,GAAI,uCACJ,UAAU,yHACT,GAAGb,GAAgB,WACnB,GAAGA,GAAgB,UAEpB,SAAAa,EAAAA,IAACC,oBAAA,CAAkB,KAAM,GAAI,UAAU,wCAAA,CAAyC,CAAA,CAAA,EAIpFH,EAAAA,KAAC,MAAA,CAAI,UAAW,iCACb,SAAA,CAAAf,GACCiB,EAAAA,IAACE,EAAA,CACC,UAAApB,EACA,SAAWiB,GAAM,CACfA,EAAE,gBAAA,EACFhB,EAAA,CACF,EACA,UAAU,0BAAA,CAAA,EAGde,EAAAA,KAAC,MAAA,CAAI,UAAU,0BACZ,SAAA,CAAAT,EAEDW,EAAAA,IAACG,EAAAA,WAAA,CAAW,KAAK,QAAQ,WAAW,OAAO,QAAQ,SAAS,UAAU,oBACnE,SAAA5B,CAAA,CACH,CAAA,EACF,EACAyB,EAAAA,IAACG,EAAAA,WAAA,CAAW,KAAK,cAAc,WAAW,QAAQ,QAAQ,SAAS,UAAW,OAC3E,SAAAnB,CAAA,CACH,EACCM,QACA,OAAA,CACE,SAAAZ,IAAkBC,GAAS,CAACC,GAC3BoB,MAACI,EAAA,CAAW,QAAQ,QAClB,eAACC,EAAAA,SAAA,CAAS,KAAM,GAAI,UAAU,kDAAkD,EAClF,CAAA,CAEJ,CAAA,CAAA,CACF,CAAA,EACF,EACAL,EAAAA,IAACM,EAAAA,YAAA,CACC,GAAI,CAAE,SAAU,EAAA,EAChB,UAAWT,EACT,yCACApB,EAAS,YAAc,aACvBiB,GAAiB,+CAAA,CACnB,CAAA,CACF,CAAA,CAAA,EAEDA,EACCM,EAAAA,IAACO,EAAAA,OAAO,IAAP,CACC,QAAS,GACT,QAAS,CACP,OAAQ9B,EAAS,OAAS,CAAA,EAE5B,WAAY,CACV,SAAU,GACV,KAAM,CAAC,GAAK,EAAG,GAAK,CAAC,CAAA,EAEvB,MAAO,CAAE,SAAU,QAAA,EAEnB,SAAAuB,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAmB,SAAAtB,CAAA,CAAS,CAAA,CAAA,EAE5CG,EACFuB,EAAAA,IAAC,OAAI,UAAWJ,EAAmB,SAAAtB,EAAS,EAC1C,IAAA,EACN,CAEJ,EAEAD,EAAU,YAAc"}

package/dist/components/navigation/accordion/Accordion.es.js CHANGED Viewed

@@ -24,15 +24,15 @@ const P = ({
   sortableConfig: r,
   headerClass: k,
   icon: w,
-  additionalHeader: j,
-  mainClass: z,
+  additionalHeader: z,
+  mainClass: j,
   id: I,
   childrenClass: $,
   withAnimation: u = !1,
   ...p
 }) => {
   const f = i(!m && "p-4", $);
-  return /* @__PURE__ */ t("div", { id: I, className: `${!m && "mb-4"}  ${a ? "pb-1" : ""} ${z || ""}`, style: r?.style, ...p, children: [
+  return /* @__PURE__ */ t("div", { id: I, className: `${!m && "mb-4"}  ${a ? "pb-1" : ""} ${j || ""}`, style: r?.style, ...p, children: [
     /* @__PURE__ */ t(
       "div",
       {
@@ -70,8 +70,8 @@ const P = ({
                 /* @__PURE__ */ e(h, { size: "small", appearance: "body", variant: "medium", className: "whitespace-nowrap", children: x })
               ] }),
               /* @__PURE__ */ e(h, { size: "extra-small", appearance: "title", variant: "medium", className: "ml-1", children: g }),
-              j,
-              /* @__PURE__ */ e("span", { children: v === b && !l && /* @__PURE__ */ e(B, { variant: "ghost", children: /* @__PURE__ */ e(L, { className: "ml-2 h-4 w-4 text-neutral-400 dark:text-neutral-400" }) }) })
+              z,
+              /* @__PURE__ */ e("span", { children: v === b && !l && /* @__PURE__ */ e(B, { variant: "ghost", children: /* @__PURE__ */ e(L, { size: 16, className: "ml-[8px] text-neutral-400 dark:text-neutral-400" }) }) })
             ] })
           ] }),
           /* @__PURE__ */ e(

package/dist/components/navigation/accordion/Accordion.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.es.js","sources":["../../../../src/components/navigation/accordion/Accordion.tsx"],"sourcesContent":["import { ChevronLeft } from '@mui/icons-material';\nimport cn from 'classnames';\nimport { motion } from 'framer-motion';\nimport { type FC, type HTMLAttributes } from 'react';\n\nimport { Typography } from '../../data-display/typography/Typography';\nimport IconButton from '../../button/IconButton';\nimport Radio from '../../button/Radio';\nimport { DragIndicatorIcon, EditIcon } from '../../icon';\n\nexport type AccordionProps = HTMLAttributes<HTMLDivElement> & {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n title: any;\n toggle: () => void;\n isOpen: boolean;\n hoveringIndex?: number \| null;\n index?: number;\n viewOnly?: boolean;\n onTitleClick?: (e: React.MouseEvent) => void;\n onSelect?: () => void;\n isChecked?: boolean;\n subTitle?: string;\n noSpace?: boolean;\n isDraggable?: boolean;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n sortableConfig?: Record<string, any>;\n headerClass?: string;\n icon?: JSX.Element;\n additionalHeader?: JSX.Element;\n id: string;\n isEditMode?: boolean;\n mainClass?: string;\n childrenClass?: string;\n /** When true, expands and collapses the panel with a smooth height animation. Default false. /\n withAnimation?: boolean;\n};\n\n/\n Accordion component for collapsible content sections\n \n @example\n * ```tsx\n * <Accordion\n * id=\"my-accordion\"\n * title=\"Section Title\"\n * isOpen={isOpen}\n * toggle={() => setIsOpen(!isOpen)}\n * >\n * <div>Accordion content</div>\n * </Accordion>\n * ```\n */\nexport const Accordion: FC<AccordionProps> = ({\n children,\n title,\n toggle,\n isOpen,\n hoveringIndex,\n index,\n viewOnly,\n onTitleClick,\n isChecked,\n onSelect,\n subTitle,\n noSpace,\n isDraggable,\n sortableConfig,\n headerClass,\n icon,\n additionalHeader,\n mainClass,\n id,\n childrenClass,\n withAnimation = false,\n ...props\n}) => {\n const contentClassName = cn(!noSpace && 'p-4', childrenClass);\n\n return (\n <div id={id} className={`${!noSpace && 'mb-4'} ${isOpen ? 'pb-1' : ''} ${mainClass \|\| ''}`} style={sortableConfig?.style} {...props}>\n <div\n className={cn(\n 'flex items-center justify-between cursor-pointer border border-neutral-200 dark:border-none bg-neutral-100 dark:bg-black-600 px-3 py-1 rounded-lg',\n headerClass,\n )}\n onClick={toggle}\n {...props}\n >\n <div onClick={(e) => (onTitleClick ? onTitleClick(e) : null)} className={`${isDraggable && 'flex'} w-full`}>\n {isDraggable && !viewOnly && (\n <button\n id={`btn-accordion-outline-drag-indicator`}\n className='flex items-center justify-center w-icon h-icon hover:transform hover:scale-125 transition-all duration-200 ease-in-out'\n {...sortableConfig?.attributes}\n {...sortableConfig?.listeners}\n >\n <DragIndicatorIcon size={16} className='text-neutral-400 dark:text-neutral-400' />\n </button>\n )}\n\n <div className={`flex items-center gap-1 w-full`}>\n {onSelect && (\n <Radio\n isChecked={isChecked}\n onSelect={(e) => {\n e.stopPropagation();\n onSelect();\n }}\n className='h-4 w-4 accent-[#366FE3]'\n />\n )}\n <div className='flex gap-2 items-center'>\n {icon}\n\n <Typography size='small' appearance='body' variant='medium' className='whitespace-nowrap'>\n {title}\n </Typography>\n </div>\n <Typography size='extra-small' appearance='title' variant='medium' className={`ml-1`}>\n {subTitle}\n </Typography>\n {additionalHeader}\n <span>\n {hoveringIndex === index && !viewOnly && (\n <IconButton variant='ghost'>\n <EditIcon className='ml-2 ~~h-4 w-4~~ text-neutral-400 dark:text-neutral-400' />\n </IconButton>\n )}\n </span>\n </div>\n </div>\n <ChevronLeft\n sx={{ fontSize: 18 }}\n className={cn(\n 'text-neutral-600 dark:text-neutral-400',\n isOpen ? 'rotate-90' : '-rotate-90',\n withAnimation && 'transition-transform duration-300 ease-in-out',\n )}\n />\n </div>\n {withAnimation ? (\n <motion.div\n initial={false}\n animate={{\n height: isOpen ? 'auto' : 0,\n }}\n transition={{\n duration: 0.3,\n ease: [0.4, 0, 0.2, 1],\n }}\n style={{ overflow: 'hidden' }}\n >\n <div className={contentClassName}>{children}</div>\n </motion.div>\n ) : isOpen ? (\n <div className={contentClassName}>{children}</div>\n ) : null}\n </div>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\n\n\n"],"names":["Accordion","children","title","toggle","isOpen","hoveringIndex","index","viewOnly","onTitleClick","isChecked","onSelect","subTitle","noSpace","isDraggable","sortableConfig","headerClass","icon","additionalHeader","mainClass","id","childrenClass","withAnimation","props","contentClassName","cn","jsxs","e","jsx","DragIndicatorIcon","Radio","Typography","IconButton","EditIcon","ChevronLeft","motion"],"mappings":";;;;;;;;;AAoDO,MAAMA,IAAgC,CAAC;AAAA,EAC5C,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAmBC,EAAG,CAACZ,KAAW,OAAOQ,CAAa;AAE5D,SACE,gBAAAK,EAAC,SAAI,IAAAN,GAAQ,WAAW,GAAG,CAACP,KAAW,MAAM,KAAKR,IAAS,SAAS,EAAE,IAAIc,KAAa,EAAE,IAAI,OAAOJ,GAAgB,OAAQ,GAAGQ,GAC7H,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD;AAAA,UACT;AAAA,UACAT;AAAA,QAAA;AAAA,QAEF,SAASZ;AAAA,QACR,GAAGmB;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAG,EAAC,OAAA,EAAI,SAAS,CAACC,MAAOlB,IAAeA,EAAakB,CAAC,IAAI,MAAO,WAAW,GAAGb,KAAe,MAAM,WAC9F,UAAA;AAAA,YAAAA,KAAe,CAACN,KACf,gBAAAoB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI;AAAA,gBACJ,WAAU;AAAA,gBACT,GAAGb,GAAgB;AAAA,gBACnB,GAAGA,GAAgB;AAAA,gBAEpB,UAAA,gBAAAa,EAACC,GAAA,EAAkB,MAAM,IAAI,WAAU,yCAAA,CAAyC;AAAA,cAAA;AAAA,YAAA;AAAA,YAIpF,gBAAAH,EAAC,OAAA,EAAI,WAAW,kCACb,UAAA;AAAA,cAAAf,KACC,gBAAAiB;AAAA,gBAACE;AAAA,gBAAA;AAAA,kBACC,WAAApB;AAAA,kBACA,UAAU,CAACiB,MAAM;AACf,oBAAAA,EAAE,gBAAA,GACFhB,EAAA;AAAA,kBACF;AAAA,kBACA,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGd,gBAAAe,EAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,gBAAAT;AAAA,gBAED,gBAAAW,EAACG,GAAA,EAAW,MAAK,SAAQ,YAAW,QAAO,SAAQ,UAAS,WAAU,qBACnE,UAAA5B,EAAA,CACH;AAAA,cAAA,GACF;AAAA,cACA,gBAAAyB,EAACG,GAAA,EAAW,MAAK,eAAc,YAAW,SAAQ,SAAQ,UAAS,WAAW,QAC3E,UAAAnB,EAAA,CACH;AAAA,cACCM;AAAA,~~cACD~~,~~gBAAAU,EAAC,~~QAAA,EACE,~~UAAAtB~~,MAAkBC,KAAS,CAACC,KAC3B,gBAAAoB,EAACI,GAAA,EAAW,SAAQ,SAClB,~~UAAA~~,~~gBAAAJ,EAACK,~~GAAA,EAAS,WAAU,~~uDAAsD~~,~~GAC5E~~,EAAA,CAEJ;AAAA,YAAA,EAAA,CACF;AAAA,UAAA,GACF;AAAA,UACA,gBAAAL;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,IAAI,EAAE,UAAU,GAAA;AAAA,cAChB,WAAWT;AAAA,gBACT;AAAA,gBACApB,IAAS,cAAc;AAAA,gBACvBiB,KAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEDA,IACC,gBAAAM;AAAA,MAACO,EAAO;AAAA,MAAP;AAAA,QACC,SAAS;AAAA,QACT,SAAS;AAAA,UACP,QAAQ9B,IAAS,SAAS;AAAA,QAAA;AAAA,QAE5B,YAAY;AAAA,UACV,UAAU;AAAA,UACV,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;AAAA,QAAA;AAAA,QAEvB,OAAO,EAAE,UAAU,SAAA;AAAA,QAEnB,UAAA,gBAAAuB,EAAC,OAAA,EAAI,WAAWJ,GAAmB,UAAAtB,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA,IAE5CG,IACF,gBAAAuB,EAAC,SAAI,WAAWJ,GAAmB,UAAAtB,GAAS,IAC1C;AAAA,EAAA,GACN;AAEJ;AAEAD,EAAU,cAAc;"}
1	+ {"version":3,"file":"Accordion.es.js","sources":["../../../../src/components/navigation/accordion/Accordion.tsx"],"sourcesContent":["import { ChevronLeft } from '@mui/icons-material';\nimport cn from 'classnames';\nimport { motion } from 'framer-motion';\nimport { type FC, type HTMLAttributes } from 'react';\n\nimport { Typography } from '../../data-display/typography/Typography';\nimport IconButton from '../../button/IconButton';\nimport Radio from '../../button/Radio';\nimport { DragIndicatorIcon, EditIcon } from '../../icon';\n\nexport type AccordionProps = HTMLAttributes<HTMLDivElement> & {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n title: any;\n toggle: () => void;\n isOpen: boolean;\n hoveringIndex?: number \| null;\n index?: number;\n viewOnly?: boolean;\n onTitleClick?: (e: React.MouseEvent) => void;\n onSelect?: () => void;\n isChecked?: boolean;\n subTitle?: string;\n noSpace?: boolean;\n isDraggable?: boolean;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n sortableConfig?: Record<string, any>;\n headerClass?: string;\n icon?: JSX.Element;\n additionalHeader?: JSX.Element;\n id: string;\n isEditMode?: boolean;\n mainClass?: string;\n childrenClass?: string;\n /** When true, expands and collapses the panel with a smooth height animation. Default false. /\n withAnimation?: boolean;\n};\n\n/\n Accordion component for collapsible content sections\n \n @example\n * ```tsx\n * <Accordion\n * id=\"my-accordion\"\n * title=\"Section Title\"\n * isOpen={isOpen}\n * toggle={() => setIsOpen(!isOpen)}\n * >\n * <div>Accordion content</div>\n * </Accordion>\n * ```\n */\nexport const Accordion: FC<AccordionProps> = ({\n children,\n title,\n toggle,\n isOpen,\n hoveringIndex,\n index,\n viewOnly,\n onTitleClick,\n isChecked,\n onSelect,\n subTitle,\n noSpace,\n isDraggable,\n sortableConfig,\n headerClass,\n icon,\n additionalHeader,\n mainClass,\n id,\n childrenClass,\n withAnimation = false,\n ...props\n}) => {\n const contentClassName = cn(!noSpace && 'p-4', childrenClass);\n\n return (\n <div id={id} className={`${!noSpace && 'mb-4'} ${isOpen ? 'pb-1' : ''} ${mainClass \|\| ''}`} style={sortableConfig?.style} {...props}>\n <div\n className={cn(\n 'flex items-center justify-between cursor-pointer border border-neutral-200 dark:border-none bg-neutral-100 dark:bg-black-600 px-3 py-1 rounded-lg',\n headerClass,\n )}\n onClick={toggle}\n {...props}\n >\n <div onClick={(e) => (onTitleClick ? onTitleClick(e) : null)} className={`${isDraggable && 'flex'} w-full`}>\n {isDraggable && !viewOnly && (\n <button\n id={`btn-accordion-outline-drag-indicator`}\n className='flex items-center justify-center w-icon h-icon hover:transform hover:scale-125 transition-all duration-200 ease-in-out'\n {...sortableConfig?.attributes}\n {...sortableConfig?.listeners}\n >\n <DragIndicatorIcon size={16} className='text-neutral-400 dark:text-neutral-400' />\n </button>\n )}\n\n <div className={`flex items-center gap-1 w-full`}>\n {onSelect && (\n <Radio\n isChecked={isChecked}\n onSelect={(e) => {\n e.stopPropagation();\n onSelect();\n }}\n className='h-4 w-4 accent-[#366FE3]'\n />\n )}\n <div className='flex gap-2 items-center'>\n {icon}\n\n <Typography size='small' appearance='body' variant='medium' className='whitespace-nowrap'>\n {title}\n </Typography>\n </div>\n <Typography size='extra-small' appearance='title' variant='medium' className={`ml-1`}>\n {subTitle}\n </Typography>\n {additionalHeader}\n <span>\n {hoveringIndex === index && !viewOnly && (\n <IconButton variant='ghost'>\n <EditIcon size={16} className='ml-[8px] text-neutral-400 dark:text-neutral-400' />\n </IconButton>\n )}\n </span>\n </div>\n </div>\n <ChevronLeft\n sx={{ fontSize: 18 }}\n className={cn(\n 'text-neutral-600 dark:text-neutral-400',\n isOpen ? 'rotate-90' : '-rotate-90',\n withAnimation && 'transition-transform duration-300 ease-in-out',\n )}\n />\n </div>\n {withAnimation ? (\n <motion.div\n initial={false}\n animate={{\n height: isOpen ? 'auto' : 0,\n }}\n transition={{\n duration: 0.3,\n ease: [0.4, 0, 0.2, 1],\n }}\n style={{ overflow: 'hidden' }}\n >\n <div className={contentClassName}>{children}</div>\n </motion.div>\n ) : isOpen ? (\n <div className={contentClassName}>{children}</div>\n ) : null}\n </div>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\n\n\n"],"names":["Accordion","children","title","toggle","isOpen","hoveringIndex","index","viewOnly","onTitleClick","isChecked","onSelect","subTitle","noSpace","isDraggable","sortableConfig","headerClass","icon","additionalHeader","mainClass","id","childrenClass","withAnimation","props","contentClassName","cn","jsxs","e","jsx","DragIndicatorIcon","Radio","Typography","IconButton","EditIcon","ChevronLeft","motion"],"mappings":"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"}