se-design 1.0.59 → 1.0.61-dev

package/dist/index30.js

@@ -1,102 +1,58 @@
-import e from "react";
-import { Button as N } from "./index3.js";
-import { Badge as I } from "./index8.js";
-import { Icon as d } from "./index5.js";
-/* empty css         */
-const t = {
-  widgetCtn: "flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]",
-  widgetImageCtn: "cursor-pointer",
-  descriptionCtn: "p-4 flex flex-col",
-  widgetTitle: "text-[var(--color-gray-900)] mt-[4px] mb-[8px]",
-  widgetDescription: "text-[var(--color-gray-700)] mb-[4px]",
-  widgetLinkCta: "text-[var(--color-blue-500)] cursor-pointer hover:text-[var(--color-blue-600)]",
-  widgetButtonCta: "self-start",
-  widgetBadge: "w-fit",
-  webinarInfoCtn: "flex flex-col gap-2",
-  webinarSpeaker: "text-[var(--color-gray-700)]",
-  webinarDate: "text-[var(--color-gray-700)]",
-  webinarDescriptionInfo: "flex gap-2",
-  webinarTimeInfo: "flex gap-2",
-  requestFeatureCtn: "flex gap-[12px]",
-  requestFeatureImageCtn: "w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]",
-  requestFeatureDescriptionCtn: "flex flex-col"
-}, B = ({
-  widgetClassName: g = "",
-  widgetType: a = "general",
-  widgetTitle: r = "",
-  widgetDescription: l = "",
-  widgetImage: p,
-  hasImage: f = !1,
-  hasButtonCta: n = !1,
-  hasLinkCta: i = !1,
-  ctaText: o = "",
-  hasBadge: x = !1,
-  badgeText: w = "",
-  buttonBgColor: u = "secondary",
-  onCtaClick: b,
-  onWidgetClick: v,
-  webinarDateInfo: c,
-  webinarSpeaker: s
+import o from "react";
+import { Icon as h } from "./index5.js";
+const c = {
+  pageNavigation: "px-[6px] flex items-center justify-center disabled:opacity-50 hover:cursor-pointer",
+  pageItem: "px-[6px] text-sm flex items-center justify-center rounded border hover:cursor-pointer"
+}, E = ({
+  currentPage: t,
+  itemsPerPage: l,
+  totalItems: r,
+  onPageChange: p,
+  mobileView: m = !1
 }) => {
-  const E = x && /* @__PURE__ */ e.createElement(I, {
-    label: w,
-    className: t.widgetBadge,
-    bgColor: "var(--color-yellow-50)",
-    textColor: "var(--color-yellow-400)",
-    fontWeight: "normal"
-  }), m = (i || n) && /* @__PURE__ */ e.createElement(e.Fragment, null, i && /* @__PURE__ */ e.createElement("span", {
-    className: t.widgetLinkCta
-  }, o), n && /* @__PURE__ */ e.createElement(N, {
-    type: u,
-    size: "md",
-    label: o,
-    className: `${t.widgetButtonCta} mt-[4px]`,
-    onClick: b
-  })), C = f && /* @__PURE__ */ e.createElement("div", {
-    className: `${t.widgetImageCtn} widget-image-ctn`
-  }, /* @__PURE__ */ e.createElement("img", {
-    src: p,
-    alt: "widget-image"
-  }));
-  return /* @__PURE__ */ e.createElement("div", {
-    className: `${t.widgetCtn} ${g} widget-ctn`,
-    onClick: v
-  }, a !== "general" && C, /* @__PURE__ */ e.createElement("div", {
-    className: t.descriptionCtn
-  }, a !== "general" && E, a !== "request-feature" && /* @__PURE__ */ e.createElement("span", {
-    className: `${t.widgetTitle} widget-title`
-  }, r), ["promotion", "general"].includes(a) && /* @__PURE__ */ e.createElement("span", {
-    className: `${t.widgetDescription} widget-description`
-  }, l), a === "webinar" && /* @__PURE__ */ e.createElement("div", {
-    className: t.webinarInfoCtn
-  }, s && /* @__PURE__ */ e.createElement("div", {
-    className: `${t.webinarDescriptionInfo} align-baseline`
-  }, /* @__PURE__ */ e.createElement(d, {
-    name: "people",
-    className: "relative top-[2px]"
-  }), /* @__PURE__ */ e.createElement("span", {
-    className: t.webinarSpeaker
-  }, s)), c && /* @__PURE__ */ e.createElement("div", {
-    className: `${t.webinarTimeInfo} align-baseline mb-[4px]`
-  }, /* @__PURE__ */ e.createElement(d, {
-    name: "clock",
-    className: "relative top-[2px]"
-  }), /* @__PURE__ */ e.createElement("span", {
-    className: t.webinarDate
-  }, c))), a === "request-feature" ? /* @__PURE__ */ e.createElement("div", {
-    className: t.requestFeatureCtn
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: t.requestFeatureImageCtn
-  }), /* @__PURE__ */ e.createElement("div", {
-    className: t.requestFeatureDescriptionCtn
-  }, /* @__PURE__ */ e.createElement("span", {
-    className: `${t.widgetTitle} widget-title`
-  }, r), /* @__PURE__ */ e.createElement("span", {
-    className: `${t.widgetDescription} widget-description`
-  }, l), m)) : m));
+  const n = Math.ceil(r / l), d = 1, f = n, x = (t - 1) * l + 1, u = Math.min(t * l, r), v = u < r, g = t > 1, b = () => {
+    const e = [], a = (s) => /* @__PURE__ */ o.createElement("span", {
+      key: s,
+      onClick: () => p(s),
+      className: `${c.pageItem} ${t === s ? "bg-[var(--color-gray-100)] border-[var(--color-gray-300)]" : "border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]"}`,
+      "data-automation-id": `page-number-${s}`
+    }, s), i = (s) => /* @__PURE__ */ o.createElement("span", {
+      key: s,
+      className: "w-5 h-5 text-sm rounded border border-[var(--color-gray-200)] flex items-end justify-center"
+    }, "...");
+    if (m)
+      return e.push(a(t)), e;
+    if (t <= 3) {
+      for (let s = 1; s <= Math.min(3, n); s++)
+        e.push(a(s));
+      n > 3 && (e.push(i("ellipsis-end")), e.push(a(n)));
+    } else t >= n - 2 ? (e.push(a(d)), e.push(i("ellipsis-start")), e.push(a(n - 2)), e.push(a(n - 1)), e.push(a(n))) : (e.push(a(d)), e.push(i("ellipsis-start")), e.push(a(t - 1)), e.push(a(t)), e.push(a(t + 1)), e.push(i("ellipsis-end")), e.push(a(f)));
+    return e;
+  };
+  return /* @__PURE__ */ o.createElement("div", {
+    className: "flex items-center gap-1 font-normal",
+    "data-automation-id": "pagination-container"
+  }, /* @__PURE__ */ o.createElement("span", {
+    className: "text-sm text-[var(--color-gray-700)] mr-1",
+    "data-automation-id": "pagination-items-info"
+  }, `${m ? "" : "Showing "}${x}-${u} of ${r}`), /* @__PURE__ */ o.createElement("span", {
+    onClick: () => g && p(t - 1),
+    className: `${c.pageNavigation}`,
+    "data-automation-id": "pagination-previous-button"
+  }, /* @__PURE__ */ o.createElement(h, {
+    name: "next",
+    className: "rotate-180 transition-transform stroke-[var(--color-gray-600)]"
+  })), /* @__PURE__ */ o.createElement("div", {
+    className: "flex items-center gap-1"
+  }, b()), /* @__PURE__ */ o.createElement("span", {
+    onClick: () => v && p(t + 1),
+    className: `${c.pageNavigation}`,
+    "data-automation-id": "pagination-next-button"
+  }, /* @__PURE__ */ o.createElement(h, {
+    name: "next"
+  })));
 };
 export {
-  B as Widget,
-  B as default
+  E as Pagination
 };
 //# sourceMappingURL=index30.js.map

package/dist/index30.js.map

@@ -1 +1 @@
-{"version":3,"file":"index30.js","sources":["../src/components/Widget/index.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Button } from \"../Button\";\nimport { Badge } from \"../Badge\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface WidgetProps {\n  widgetClassName?: string;\n  widgetType?: \"promotion\" | \"webinar\" | \"request-feature\" | \"general\";\n  widgetTitle?: string;\n  hasBadge?: boolean;\n  webinarSpeaker?: string;\n  badgeText?: string;\n  widgetDescription?: string;\n  webinarDateInfo?: string;\n  hasImage?: boolean;\n  widgetImage?: string;\n  hasButtonCta?: boolean;\n  buttonBgColor?: 'primary' | 'secondary';\n  hasLinkCta?: boolean;\n  ctaText?: string;\n  onCtaClick?: () => void;\n  onWidgetClick?: () => void;\n}\n\nconst className: Map = {\n  widgetCtn: 'flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]',\n  widgetImageCtn: 'cursor-pointer',\n  descriptionCtn: 'p-4 flex flex-col',\n  widgetTitle: 'text-[var(--color-gray-900)] mt-[4px] mb-[8px]',\n  widgetDescription: 'text-[var(--color-gray-700)] mb-[4px]',\n  widgetLinkCta: 'text-[var(--color-blue-500)] cursor-pointer hover:text-[var(--color-blue-600)]',\n  widgetButtonCta: 'self-start',\n  widgetBadge: 'w-fit',\n  webinarInfoCtn: 'flex flex-col gap-2',\n  webinarSpeaker: 'text-[var(--color-gray-700)]',\n  webinarDate: 'text-[var(--color-gray-700)]',\n  webinarDescriptionInfo: 'flex gap-2',\n  webinarTimeInfo: 'flex gap-2',\n  requestFeatureCtn: 'flex gap-[12px]',\n  requestFeatureImageCtn: 'w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]',\n  requestFeatureDescriptionCtn: 'flex flex-col',\n};\n\nexport const Widget: FC<WidgetProps> = ({\n  widgetClassName = \"\",\n  widgetType = 'general',\n  widgetTitle = \"\",\n  widgetDescription = \"\",\n  widgetImage,\n  hasImage = false,\n  hasButtonCta = false,\n  hasLinkCta = false,\n  ctaText = \"\",\n  hasBadge = false,\n  badgeText = \"\",\n  buttonBgColor = 'secondary',\n  onCtaClick,\n  onWidgetClick,\n  webinarDateInfo,\n  webinarSpeaker,\n}) => {\n\n  const renderBadge = hasBadge && (\n    <Badge\n      label={badgeText}\n      className={className.widgetBadge}\n      bgColor=\"var(--color-yellow-50)\"\n      textColor=\"var(--color-yellow-400)\"\n      fontWeight=\"normal\"\n    />\n  );\n\n  const renderCTA = (hasLinkCta || hasButtonCta) && (\n    <React.Fragment>\n      {hasLinkCta && <span className={className.widgetLinkCta}>{ctaText}</span>}\n      {hasButtonCta && <Button type={buttonBgColor} size=\"md\" label={ctaText} className={`${className.widgetButtonCta} mt-[4px]`} onClick={onCtaClick} />}\n    </React.Fragment>\n  );\n\n  const renderImage = hasImage && (\n    <div className={`${className.widgetImageCtn} widget-image-ctn`}>\n      <img src={widgetImage} alt=\"widget-image\"/>\n    </div>\n  );\n\n  return (\n    <div className={`${className.widgetCtn} ${widgetClassName} widget-ctn`} onClick={onWidgetClick}>\n      {widgetType !== \"general\" && renderImage}\n      <div className={className.descriptionCtn}>\n        {widgetType !== \"general\" && renderBadge}\n        {widgetType !== \"request-feature\" && <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>}\n\n        {([\"promotion\", \"general\"].includes(widgetType)) && (\n          <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n        )}\n\n        {widgetType === \"webinar\" && (\n          <div className={className.webinarInfoCtn}>\n            {webinarSpeaker && (\n            <div className={`${className.webinarDescriptionInfo} align-baseline`}>\n              <Icon name=\"people\" className=\"relative top-[2px]\" />\n              <span className={className.webinarSpeaker}>{webinarSpeaker}</span>\n            </div>\n            )}\n            {webinarDateInfo && (\n               <div className={`${className.webinarTimeInfo} align-baseline mb-[4px]`}>\n                <Icon name=\"clock\" className=\"relative top-[2px]\" />\n                <span className={className.webinarDate}>{webinarDateInfo}</span>\n              </div>\n            )}\n          </div>\n        )}\n\n        {widgetType === \"request-feature\" ? (\n          <div className={className.requestFeatureCtn}>\n            <div className={className.requestFeatureImageCtn} />\n            <div className={className.requestFeatureDescriptionCtn}>\n              <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>\n              <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n              {renderCTA}\n            </div>\n          </div>\n        ) : (\n          renderCTA\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Widget;"],"names":["React__default","Button","Badge","Icon","className","widgetCtn","widgetImageCtn","descriptionCtn","widgetTitle","widgetDescription","widgetLinkCta","widgetButtonCta","widgetBadge","webinarInfoCtn","webinarSpeaker","webinarDate","webinarDescriptionInfo","webinarTimeInfo","requestFeatureCtn","requestFeatureImageCtn","requestFeatureDescriptionCtn","Widget","widgetClassName","widgetType","widgetImage","hasImage","hasButtonCta","hasLinkCta","ctaText","hasBadge","badgeText","buttonBgColor","onCtaClick","onWidgetClick","webinarDateInfo","renderBadge","React","createElement","label","bgColor","textColor","fontWeight","renderCTA","Fragment","type","size","onClick","renderImage","src","alt","includes","name"],"mappings":"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"}
+{"version":3,"file":"index30.js","sources":["../src/components/Pagination/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from 'components/Icon';\n\ninterface PaginationProps {\n  currentPage: number;\n  itemsPerPage: number;\n  totalItems: number;\n  onPageChange: (page: number) => void;\n  mobileView?: boolean;\n}\n\nconst paginationClassNames = {\n  pageNavigation: \"px-[6px] flex items-center justify-center disabled:opacity-50 hover:cursor-pointer\",\n  pageItem: \"px-[6px] text-sm flex items-center justify-center rounded border hover:cursor-pointer\"\n}\n\nexport const Pagination: React.FC<PaginationProps> = ({ currentPage, itemsPerPage, totalItems, onPageChange, mobileView = false }) => {\n  const totalPages = Math.ceil(totalItems / itemsPerPage);\n  const firstPage = 1;\n  const lastPage = totalPages;\n  const startItem = (currentPage - 1) * itemsPerPage + 1;\n  const endItem = Math.min(currentPage * itemsPerPage, totalItems);\n  const hasNextPage = endItem < totalItems;\n  const hasPrevPage = currentPage > 1;\n\n  const renderPageNumbers = () => {\n    const pages = [];\n\n    const renderPageNumber = (pageNum: number) => {\n      return (\n        <span\n          key={pageNum}\n          onClick={() => onPageChange(pageNum)}\n          className={`${paginationClassNames.pageItem} ${currentPage === pageNum ? 'bg-[var(--color-gray-100)] border-[var(--color-gray-300)]' : 'border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]'}`}\n          data-automation-id={`page-number-${pageNum}`}\n        >\n          {pageNum}\n        </span>\n      );\n    };\n\n    const renderEllipsis = (key: string) => {\n      return (\n        <span key={key} className=\"w-5 h-5 text-sm rounded border border-[var(--color-gray-200)] flex items-end justify-center\">\n          ...\n        </span>\n      );\n    };\n    if(mobileView) {\n      pages.push(renderPageNumber(currentPage));\n\n      return pages;\n    }\n    if (currentPage <= 3) {\n      for (let i = 1; i <= Math.min(3, totalPages); i++) {\n        pages.push(renderPageNumber(i));\n      }\n\n      if (totalPages > 3) {\n        pages.push(renderEllipsis(\"ellipsis-end\"));\n        pages.push(renderPageNumber(totalPages));\n      }\n    } else if (currentPage >= totalPages - 2) {\n      pages.push(renderPageNumber(firstPage));\n      pages.push(renderEllipsis(\"ellipsis-start\"));\n      pages.push(renderPageNumber(totalPages - 2));\n      pages.push(renderPageNumber(totalPages - 1));\n      pages.push(renderPageNumber(totalPages));\n    } else {\n      pages.push(renderPageNumber(firstPage));\n      pages.push(renderEllipsis(\"ellipsis-start\"));\n      pages.push(renderPageNumber(currentPage - 1));\n      pages.push(renderPageNumber(currentPage));\n      pages.push(renderPageNumber(currentPage + 1));\n      pages.push(renderEllipsis(\"ellipsis-end\"));\n      pages.push(renderPageNumber(lastPage));\n    }\n\n    return pages;\n  };\n\n  return (\n    <div className=\"flex items-center gap-1 font-normal\" data-automation-id=\"pagination-container\">\n      <span className=\"text-sm text-[var(--color-gray-700)] mr-1\" data-automation-id=\"pagination-items-info\">\n        {`${mobileView ? \"\" : \"Showing \"}${startItem}-${endItem} of ${totalItems}`}\n      </span>\n      <span\n        onClick={() => hasPrevPage && onPageChange(currentPage - 1)}\n        className={`${paginationClassNames.pageNavigation}`}\n        data-automation-id=\"pagination-previous-button\"\n      >\n        <Icon name=\"next\" className=\"rotate-180 transition-transform stroke-[var(--color-gray-600)]\" />\n      </span>\n      {/* Render page numbers */}\n      <div className=\"flex items-center gap-1\">{renderPageNumbers()}</div>\n      <span\n        onClick={() => hasNextPage && onPageChange(currentPage + 1)}\n        className={`${paginationClassNames.pageNavigation}`}\n        data-automation-id=\"pagination-next-button\"\n      >\n        <Icon name=\"next\" />\n      </span>\n    </div>\n  );\n};\n"],"names":["React__default","Icon","paginationClassNames","pageNavigation","pageItem","Pagination","currentPage","itemsPerPage","totalItems","onPageChange","mobileView","totalPages","Math","ceil","firstPage","lastPage","startItem","endItem","min","hasNextPage","hasPrevPage","renderPageNumbers","pages","renderPageNumber","pageNum","React","createElement","key","onClick","className","renderEllipsis","push","i","name"],"mappings":"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"}

package/dist/index31.js

@@ -1,64 +1,102 @@
-import a, { useRef as b } from "react";
-function w(e) {
-  const {
-    label: d,
-    value: o,
-    checked: r,
-    disabled: t,
-    name: c,
-    onChange: l,
-    width: s,
-    radioLabelClassName: m = "",
-    radioContainerClassName: u = "",
-    automationId: x = "",
-    bgColor: f = "var(--color-white)",
-    withBorder: h = !0,
-    content: i
-  } = e, n = b(null);
-  return /* @__PURE__ */ a.createElement("div", {
-    className: `se-design-radio-container flex flex-col justify-center items-start gap-2 ${t ? "cursor-not-allowed" : "cursor-pointer"} ${h ? `border ${r ? "border-[#1088E7]" : "border-[#C9D4E3]"} p-4` : ""} rounded-[6px] transition-colors duration-300 ${t ? "opacity-50" : ""} ${u}`,
-    onClick: () => n.current?.click(),
-    style: {
-      width: s || "auto",
-      backgroundColor: f
-    },
-    "data-automation-id": x
-  }, /* @__PURE__ */ a.createElement("div", {
-    className: "flex items-center gap-[0.625rem]",
-    "data-automation-id": "radio-field-content"
-  }, /* @__PURE__ */ a.createElement("input", {
-    ref: n,
-    type: "radio",
-    id: o,
-    name: c,
-    value: o,
-    checked: r,
-    disabled: t,
-    className: "radio-field-input cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-blue-500)] w-[14px] h-[14px] p-[3px]",
-    onChange: () => {
-      l && l({
-        ...e,
-        checked: !0
-      });
-    }
-  }), /* @__PURE__ */ a.createElement("label", {
-    htmlFor: o,
-    className: `${e.helperLabel ? "flex flex-col gap-[6px]" : ""} ${t ? "cursor-not-allowed" : "cursor-pointer"}`,
-    "data-automation-id": "radio-field-label"
-  }, /* @__PURE__ */ a.createElement("span", {
-    className: `text-sm text-[var(--color-gray-800)] ${m} `,
-    style: {
-      fontSize: "16px",
-      fontWeight: "400"
-    }
-  }, d))), r && i && /* @__PURE__ */ a.createElement("div", {
-    className: "radio-child-content pl-[1.5rem] w-full"
-  }, i()), e.helperLabel && /* @__PURE__ */ a.createElement("span", {
-    className: `text-sm font-normal text-[var(--color-gray-600)] ${e.maxWidth ? `max-w-[${e.maxWidth}]` : "max-w-full"} break-words whitespace-normal`,
-    "data-automation-id": "radio-field-helper-text"
-  }, e.helperLabel));
-}
+import e from "react";
+import { Button as N } from "./index3.js";
+import { Badge as I } from "./index9.js";
+import { Icon as d } from "./index5.js";
+/* empty css         */
+const t = {
+  widgetCtn: "flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]",
+  widgetImageCtn: "cursor-pointer",
+  descriptionCtn: "p-4 flex flex-col",
+  widgetTitle: "text-[var(--color-gray-900)] mt-[4px] mb-[8px]",
+  widgetDescription: "text-[var(--color-gray-700)] mb-[4px]",
+  widgetLinkCta: "text-[var(--color-blue-500)] cursor-pointer hover:text-[var(--color-blue-600)]",
+  widgetButtonCta: "self-start",
+  widgetBadge: "w-fit",
+  webinarInfoCtn: "flex flex-col gap-2",
+  webinarSpeaker: "text-[var(--color-gray-700)]",
+  webinarDate: "text-[var(--color-gray-700)]",
+  webinarDescriptionInfo: "flex gap-2",
+  webinarTimeInfo: "flex gap-2",
+  requestFeatureCtn: "flex gap-[12px]",
+  requestFeatureImageCtn: "w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]",
+  requestFeatureDescriptionCtn: "flex flex-col"
+}, B = ({
+  widgetClassName: g = "",
+  widgetType: a = "general",
+  widgetTitle: r = "",
+  widgetDescription: l = "",
+  widgetImage: p,
+  hasImage: f = !1,
+  hasButtonCta: n = !1,
+  hasLinkCta: i = !1,
+  ctaText: o = "",
+  hasBadge: x = !1,
+  badgeText: w = "",
+  buttonBgColor: u = "secondary",
+  onCtaClick: b,
+  onWidgetClick: v,
+  webinarDateInfo: c,
+  webinarSpeaker: s
+}) => {
+  const E = x && /* @__PURE__ */ e.createElement(I, {
+    label: w,
+    className: t.widgetBadge,
+    bgColor: "var(--color-yellow-50)",
+    textColor: "var(--color-yellow-400)",
+    fontWeight: "normal"
+  }), m = (i || n) && /* @__PURE__ */ e.createElement(e.Fragment, null, i && /* @__PURE__ */ e.createElement("span", {
+    className: t.widgetLinkCta
+  }, o), n && /* @__PURE__ */ e.createElement(N, {
+    type: u,
+    size: "md",
+    label: o,
+    className: `${t.widgetButtonCta} mt-[4px]`,
+    onClick: b
+  })), C = f && /* @__PURE__ */ e.createElement("div", {
+    className: `${t.widgetImageCtn} widget-image-ctn`
+  }, /* @__PURE__ */ e.createElement("img", {
+    src: p,
+    alt: "widget-image"
+  }));
+  return /* @__PURE__ */ e.createElement("div", {
+    className: `${t.widgetCtn} ${g} widget-ctn`,
+    onClick: v
+  }, a !== "general" && C, /* @__PURE__ */ e.createElement("div", {
+    className: t.descriptionCtn
+  }, a !== "general" && E, a !== "request-feature" && /* @__PURE__ */ e.createElement("span", {
+    className: `${t.widgetTitle} widget-title`
+  }, r), ["promotion", "general"].includes(a) && /* @__PURE__ */ e.createElement("span", {
+    className: `${t.widgetDescription} widget-description`
+  }, l), a === "webinar" && /* @__PURE__ */ e.createElement("div", {
+    className: t.webinarInfoCtn
+  }, s && /* @__PURE__ */ e.createElement("div", {
+    className: `${t.webinarDescriptionInfo} align-baseline`
+  }, /* @__PURE__ */ e.createElement(d, {
+    name: "people",
+    className: "relative top-[2px]"
+  }), /* @__PURE__ */ e.createElement("span", {
+    className: t.webinarSpeaker
+  }, s)), c && /* @__PURE__ */ e.createElement("div", {
+    className: `${t.webinarTimeInfo} align-baseline mb-[4px]`
+  }, /* @__PURE__ */ e.createElement(d, {
+    name: "clock",
+    className: "relative top-[2px]"
+  }), /* @__PURE__ */ e.createElement("span", {
+    className: t.webinarDate
+  }, c))), a === "request-feature" ? /* @__PURE__ */ e.createElement("div", {
+    className: t.requestFeatureCtn
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: t.requestFeatureImageCtn
+  }), /* @__PURE__ */ e.createElement("div", {
+    className: t.requestFeatureDescriptionCtn
+  }, /* @__PURE__ */ e.createElement("span", {
+    className: `${t.widgetTitle} widget-title`
+  }, r), /* @__PURE__ */ e.createElement("span", {
+    className: `${t.widgetDescription} widget-description`
+  }, l), m)) : m));
+};
 export {
-  w as Radio
+  B as Widget,
+  B as default
 };
 //# sourceMappingURL=index31.js.map

package/dist/index31.js.map

@@ -1 +1 @@
-{"version":3,"file":"index31.js","sources":["../src/components/Radio/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nexport interface RadioProps {\n  label: string;\n  value: string;\n  checked: boolean;\n  disabled: boolean;\n  name: string;\n  onChange?: (props: RadioProps) => void;\n  helperLabel?: string;\n  maxWidth?: string;\n  width?: string;\n  radioLabelClassName?: string;\n  radioContainerClassName?: string;\n  automationId?: string;\n  withBorder?: boolean;\n  bgColor?: string;\n  content?: () => React.ReactNode;\n}\n\nexport function Radio(props: RadioProps) {\n  const {\n    label,\n    value,\n    checked,\n    disabled,\n    name,\n    onChange,\n    width,\n    radioLabelClassName = '',\n    radioContainerClassName = '',\n    automationId = '',\n    bgColor = 'var(--color-white)',\n    withBorder = true,\n    content\n  } = props;\n  const radioRef = useRef<HTMLInputElement>(null);\n\n  return (\n    <div\n      className={`se-design-radio-container flex flex-col justify-center items-start gap-2 ${\n        disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n      } ${\n        withBorder ? `border ${checked ? 'border-[#1088E7]' : 'border-[#C9D4E3]'} p-4` : ''\n      } rounded-[6px] transition-colors duration-300 ${disabled ? 'opacity-50' : ''} ${radioContainerClassName}`}\n      onClick={() => radioRef.current?.click()}\n      style={{ width: width || 'auto', backgroundColor: bgColor }}\n      data-automation-id={automationId}\n    >\n      <div className=\"flex items-center gap-[0.625rem]\" data-automation-id=\"radio-field-content\">\n        <input\n          ref={radioRef}\n          type=\"radio\"\n          id={value}\n          name={name}\n          value={value}\n          checked={checked}\n          disabled={disabled}\n          className=\"radio-field-input cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-blue-500)] w-[14px] h-[14px] p-[3px]\"\n          onChange={() => {\n            onChange && onChange({ ...props, checked: true });\n          }}\n        />\n        <label\n          htmlFor={value}\n          className={`${props.helperLabel ? 'flex flex-col gap-[6px]' : ''} ${\n            disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n          }`}\n          data-automation-id=\"radio-field-label\"\n        >\n          <span\n            className={`text-sm text-[var(--color-gray-800)] ${radioLabelClassName} `}\n            style={{ fontSize: '16px', fontWeight: '400' }}\n          >\n            {label}\n          </span>\n        </label>\n      </div>\n      {checked && content && <div className=\"radio-child-content pl-[1.5rem] w-full\">{content()}</div>}\n      {props.helperLabel && (\n        <span\n          className={`text-sm font-normal text-[var(--color-gray-600)] ${\n            props.maxWidth ? `max-w-[${props.maxWidth}]` : 'max-w-full'\n          } break-words whitespace-normal`}\n          data-automation-id=\"radio-field-helper-text\"\n        >\n          {props.helperLabel}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["Radio","props","label","value","checked","disabled","name","onChange","width","radioLabelClassName","radioContainerClassName","automationId","bgColor","withBorder","content","radioRef","useRef","React","createElement","className","onClick","current","click","style","backgroundColor","ref","type","id","htmlFor","helperLabel","fontSize","fontWeight","maxWidth"],"mappings":";AAoBO,SAASA,EAAMC,GAAmB;AACvC,QAAM;AAAA,IACJC,OAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,qBAAAA,IAAsB;AAAA,IACtBC,yBAAAA,IAA0B;AAAA,IAC1BC,cAAAA,IAAe;AAAA,IACfC,SAAAA,IAAU;AAAA,IACVC,YAAAA,IAAa;AAAA,IACbC,SAAAA;AAAAA,EAAAA,IACEb,GACEc,IAAWC,EAAyB,IAAI;AAE9C,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,4EACTd,IAAW,uBAAuB,gBAAgB,IAElDQ,IAAa,UAAUT,IAAU,qBAAqB,kBAAkB,SAAS,EAAE,iDACpCC,IAAW,eAAe,EAAE,IAAIK,CAAuB;AAAA,IACxGU,SAASA,MAAML,EAASM,SAASC,MAAAA;AAAAA,IACjCC,OAAO;AAAA,MAAEf,OAAOA,KAAS;AAAA,MAAQgB,iBAAiBZ;AAAAA,IAAAA;AAAAA,IAClD,sBAAoBD;AAAAA,EAAAA,GAEpBM,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAmC,sBAAmB;AAAA,EAAA,GACnEF,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEO,KAAKV;AAAAA,IACLW,MAAK;AAAA,IACLC,IAAIxB;AAAAA,IACJG,MAAAA;AAAAA,IACAH,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAc,WAAU;AAAA,IACVZ,UAAUA,MAAM;AACdA,MAAAA,KAAYA,EAAS;AAAA,QAAE,GAAGN;AAAAA,QAAOG,SAAS;AAAA,MAAA,CAAM;AAAA,IAClD;AAAA,EAAA,CACD,GACDa,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEU,SAASzB;AAAAA,IACTgB,WAAW,GAAGlB,EAAM4B,cAAc,4BAA4B,EAAE,IAC9DxB,IAAW,uBAAuB,gBAAgB;AAAA,IAEpD,sBAAmB;AAAA,EAAA,GAEnBY,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IACEC,WAAW,wCAAwCV,CAAmB;AAAA,IACtEc,OAAO;AAAA,MAAEO,UAAU;AAAA,MAAQC,YAAY;AAAA,IAAA;AAAA,EAAM,GAE5C7B,CACG,CACD,CACJ,GACJE,KAAWU,KAAWG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAA0CL,GAAe,GAC9Fb,EAAM4B,eACLZ,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IACEC,WAAW,oDACTlB,EAAM+B,WAAW,UAAU/B,EAAM+B,QAAQ,MAAM,YAAY;AAAA,IAE7D,sBAAmB;AAAA,EAAA,GAElB/B,EAAM4B,WACH,CAEL;AAET;"}
+{"version":3,"file":"index31.js","sources":["../src/components/Widget/index.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Button } from \"../Button\";\nimport { Badge } from \"../Badge\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface WidgetProps {\n  widgetClassName?: string;\n  widgetType?: \"promotion\" | \"webinar\" | \"request-feature\" | \"general\";\n  widgetTitle?: string;\n  hasBadge?: boolean;\n  webinarSpeaker?: string;\n  badgeText?: string;\n  widgetDescription?: string;\n  webinarDateInfo?: string;\n  hasImage?: boolean;\n  widgetImage?: string;\n  hasButtonCta?: boolean;\n  buttonBgColor?: 'primary' | 'secondary';\n  hasLinkCta?: boolean;\n  ctaText?: string;\n  onCtaClick?: () => void;\n  onWidgetClick?: () => void;\n}\n\nconst className: Map = {\n  widgetCtn: 'flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]',\n  widgetImageCtn: 'cursor-pointer',\n  descriptionCtn: 'p-4 flex flex-col',\n  widgetTitle: 'text-[var(--color-gray-900)] mt-[4px] mb-[8px]',\n  widgetDescription: 'text-[var(--color-gray-700)] mb-[4px]',\n  widgetLinkCta: 'text-[var(--color-blue-500)] cursor-pointer hover:text-[var(--color-blue-600)]',\n  widgetButtonCta: 'self-start',\n  widgetBadge: 'w-fit',\n  webinarInfoCtn: 'flex flex-col gap-2',\n  webinarSpeaker: 'text-[var(--color-gray-700)]',\n  webinarDate: 'text-[var(--color-gray-700)]',\n  webinarDescriptionInfo: 'flex gap-2',\n  webinarTimeInfo: 'flex gap-2',\n  requestFeatureCtn: 'flex gap-[12px]',\n  requestFeatureImageCtn: 'w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]',\n  requestFeatureDescriptionCtn: 'flex flex-col',\n};\n\nexport const Widget: FC<WidgetProps> = ({\n  widgetClassName = \"\",\n  widgetType = 'general',\n  widgetTitle = \"\",\n  widgetDescription = \"\",\n  widgetImage,\n  hasImage = false,\n  hasButtonCta = false,\n  hasLinkCta = false,\n  ctaText = \"\",\n  hasBadge = false,\n  badgeText = \"\",\n  buttonBgColor = 'secondary',\n  onCtaClick,\n  onWidgetClick,\n  webinarDateInfo,\n  webinarSpeaker,\n}) => {\n\n  const renderBadge = hasBadge && (\n    <Badge\n      label={badgeText}\n      className={className.widgetBadge}\n      bgColor=\"var(--color-yellow-50)\"\n      textColor=\"var(--color-yellow-400)\"\n      fontWeight=\"normal\"\n    />\n  );\n\n  const renderCTA = (hasLinkCta || hasButtonCta) && (\n    <React.Fragment>\n      {hasLinkCta && <span className={className.widgetLinkCta}>{ctaText}</span>}\n      {hasButtonCta && <Button type={buttonBgColor} size=\"md\" label={ctaText} className={`${className.widgetButtonCta} mt-[4px]`} onClick={onCtaClick} />}\n    </React.Fragment>\n  );\n\n  const renderImage = hasImage && (\n    <div className={`${className.widgetImageCtn} widget-image-ctn`}>\n      <img src={widgetImage} alt=\"widget-image\"/>\n    </div>\n  );\n\n  return (\n    <div className={`${className.widgetCtn} ${widgetClassName} widget-ctn`} onClick={onWidgetClick}>\n      {widgetType !== \"general\" && renderImage}\n      <div className={className.descriptionCtn}>\n        {widgetType !== \"general\" && renderBadge}\n        {widgetType !== \"request-feature\" && <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>}\n\n        {([\"promotion\", \"general\"].includes(widgetType)) && (\n          <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n        )}\n\n        {widgetType === \"webinar\" && (\n          <div className={className.webinarInfoCtn}>\n            {webinarSpeaker && (\n            <div className={`${className.webinarDescriptionInfo} align-baseline`}>\n              <Icon name=\"people\" className=\"relative top-[2px]\" />\n              <span className={className.webinarSpeaker}>{webinarSpeaker}</span>\n            </div>\n            )}\n            {webinarDateInfo && (\n               <div className={`${className.webinarTimeInfo} align-baseline mb-[4px]`}>\n                <Icon name=\"clock\" className=\"relative top-[2px]\" />\n                <span className={className.webinarDate}>{webinarDateInfo}</span>\n              </div>\n            )}\n          </div>\n        )}\n\n        {widgetType === \"request-feature\" ? (\n          <div className={className.requestFeatureCtn}>\n            <div className={className.requestFeatureImageCtn} />\n            <div className={className.requestFeatureDescriptionCtn}>\n              <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>\n              <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n              {renderCTA}\n            </div>\n          </div>\n        ) : (\n          renderCTA\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Widget;"],"names":["React__default","Button","Badge","Icon","className","widgetCtn","widgetImageCtn","descriptionCtn","widgetTitle","widgetDescription","widgetLinkCta","widgetButtonCta","widgetBadge","webinarInfoCtn","webinarSpeaker","webinarDate","webinarDescriptionInfo","webinarTimeInfo","requestFeatureCtn","requestFeatureImageCtn","requestFeatureDescriptionCtn","Widget","widgetClassName","widgetType","widgetImage","hasImage","hasButtonCta","hasLinkCta","ctaText","hasBadge","badgeText","buttonBgColor","onCtaClick","onWidgetClick","webinarDateInfo","renderBadge","React","createElement","label","bgColor","textColor","fontWeight","renderCTA","Fragment","type","size","onClick","renderImage","src","alt","includes","name"],"mappings":"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"}

package/dist/index32.js

@@ -1,37 +1,64 @@
-import o from "react";
-import { Radio as u } from "./index31.js";
-function l() {
-  return l = Object.assign ? Object.assign.bind() : function(e) {
-    for (var a = 1; a < arguments.length; a++) {
-      var t = arguments[a];
-      for (var n in t) ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
-    }
-    return e;
-  }, l.apply(null, arguments);
-}
-function d(e) {
+import a, { useRef as b } from "react";
+function w(e) {
   const {
-    automationId: a = "",
-    withBorder: t = !0
-  } = e, n = (r) => {
-    e.onRadioGroupChange({
-      ...r,
-      checked: !0
-    });
-  };
-  return /* @__PURE__ */ o.createElement("div", {
-    "data-automation-id": a
-  }, /* @__PURE__ */ o.createElement("fieldset", {
-    className: `flex flex-wrap gap-2 ${e.direction === "column" ? "flex-col" : "flex-row"}`
-  }, e.options.map((r) => /* @__PURE__ */ o.createElement(u, l({
-    key: r.value
-  }, r, {
-    onChange: n,
-    checked: r.value === e.value,
-    withBorder: t
-  })))));
+    label: d,
+    value: o,
+    checked: r,
+    disabled: t,
+    name: c,
+    onChange: l,
+    width: s,
+    radioLabelClassName: m = "",
+    radioContainerClassName: u = "",
+    automationId: x = "",
+    bgColor: f = "var(--color-white)",
+    withBorder: h = !0,
+    content: i
+  } = e, n = b(null);
+  return /* @__PURE__ */ a.createElement("div", {
+    className: `se-design-radio-container flex flex-col justify-center items-start gap-2 ${t ? "cursor-not-allowed" : "cursor-pointer"} ${h ? `border ${r ? "border-[#1088E7]" : "border-[#C9D4E3]"} p-4` : ""} rounded-[6px] transition-colors duration-300 ${t ? "opacity-50" : ""} ${u}`,
+    onClick: () => n.current?.click(),
+    style: {
+      width: s || "auto",
+      backgroundColor: f
+    },
+    "data-automation-id": x
+  }, /* @__PURE__ */ a.createElement("div", {
+    className: "flex items-center gap-[0.625rem]",
+    "data-automation-id": "radio-field-content"
+  }, /* @__PURE__ */ a.createElement("input", {
+    ref: n,
+    type: "radio",
+    id: o,
+    name: c,
+    value: o,
+    checked: r,
+    disabled: t,
+    className: "radio-field-input cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-blue-500)] w-[14px] h-[14px] p-[3px]",
+    onChange: () => {
+      l && l({
+        ...e,
+        checked: !0
+      });
+    }
+  }), /* @__PURE__ */ a.createElement("label", {
+    htmlFor: o,
+    className: `${e.helperLabel ? "flex flex-col gap-[6px]" : ""} ${t ? "cursor-not-allowed" : "cursor-pointer"}`,
+    "data-automation-id": "radio-field-label"
+  }, /* @__PURE__ */ a.createElement("span", {
+    className: `text-sm text-[var(--color-gray-800)] ${m} `,
+    style: {
+      fontSize: "16px",
+      fontWeight: "400"
+    }
+  }, d))), r && i && /* @__PURE__ */ a.createElement("div", {
+    className: "radio-child-content pl-[1.5rem] w-full"
+  }, i()), e.helperLabel && /* @__PURE__ */ a.createElement("span", {
+    className: `text-sm font-normal text-[var(--color-gray-600)] ${e.maxWidth ? `max-w-[${e.maxWidth}]` : "max-w-full"} break-words whitespace-normal`,
+    "data-automation-id": "radio-field-helper-text"
+  }, e.helperLabel));
 }
 export {
-  d as RadioGroup
+  w as Radio
 };
 //# sourceMappingURL=index32.js.map

package/dist/index32.js.map

@@ -1 +1 @@
-{"version":3,"file":"index32.js","sources":["../src/components/RadioGroup/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Radio, RadioProps } from '../Radio';\n\nexport interface RadioGroupProps {\n  options: RadioProps[];\n  onRadioGroupChange: (obj: RadioProps) => void;\n  value?: string;\n  direction?: 'row' | 'column';\n  automationId?: string;\n  withBorder?: boolean;\n}\n\nexport function RadioGroup(props: RadioGroupProps) {\n  const { automationId = '', withBorder = true } = props;\n  const handleRadioChange = (obj: RadioProps) => {\n    props.onRadioGroupChange({ ...obj, checked: true });\n  };\n  return (\n    <div data-automation-id={automationId}>\n      <fieldset className={`flex flex-wrap gap-2 ${props.direction === 'column' ? 'flex-col' : 'flex-row'}`}>\n        {props.options.map((option) => (\n          <Radio key={option.value} {...option} onChange={handleRadioChange} checked={option.value === props.value} withBorder={withBorder} />\n        ))}\n      </fieldset>\n    </div>\n  );\n}\n"],"names":["RadioGroup","props","automationId","withBorder","handleRadioChange","obj","onRadioGroupChange","checked","React","createElement","className","direction","options","map","option","Radio","_extends","key","value","onChange"],"mappings":";;;;;;;;;;;AAYO,SAASA,EAAWC,GAAwB;AACjD,QAAM;AAAA,IAAEC,cAAAA,IAAe;AAAA,IAAIC,YAAAA,IAAa;AAAA,EAAA,IAASF,GAC3CG,IAAoBA,CAACC,MAAoB;AAC7CJ,IAAAA,EAAMK,mBAAmB;AAAA,MAAE,GAAGD;AAAAA,MAAKE,SAAS;AAAA,IAAA,CAAM;AAAA,EACpD;AACA,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAK,sBAAoBP;AAAAA,EAAAA,GACvBM,gBAAAA,EAAAC,cAAA,YAAA;AAAA,IAAUC,WAAW,wBAAwBT,EAAMU,cAAc,WAAW,aAAa,UAAU;AAAA,EAAA,GAChGV,EAAMW,QAAQC,IAAKC,OAClBN,gBAAAA,EAAAC,cAACM,GAAKC,EAAA;AAAA,IAACC,KAAKH,EAAOI;AAAAA,EAAAA,GAAWJ,GAAM;AAAA,IAAEK,UAAUf;AAAAA,IAAmBG,SAASO,EAAOI,UAAUjB,EAAMiB;AAAAA,IAAOf,YAAAA;AAAAA,EAAAA,CAAuB,CAAE,CACpI,CACO,CACP;AAET;"}
+{"version":3,"file":"index32.js","sources":["../src/components/Radio/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nexport interface RadioProps {\n  label: string;\n  value: string;\n  checked: boolean;\n  disabled: boolean;\n  name: string;\n  onChange?: (props: RadioProps) => void;\n  helperLabel?: string;\n  maxWidth?: string;\n  width?: string;\n  radioLabelClassName?: string;\n  radioContainerClassName?: string;\n  automationId?: string;\n  withBorder?: boolean;\n  bgColor?: string;\n  content?: () => React.ReactNode;\n}\n\nexport function Radio(props: RadioProps) {\n  const {\n    label,\n    value,\n    checked,\n    disabled,\n    name,\n    onChange,\n    width,\n    radioLabelClassName = '',\n    radioContainerClassName = '',\n    automationId = '',\n    bgColor = 'var(--color-white)',\n    withBorder = true,\n    content\n  } = props;\n  const radioRef = useRef<HTMLInputElement>(null);\n\n  return (\n    <div\n      className={`se-design-radio-container flex flex-col justify-center items-start gap-2 ${\n        disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n      } ${\n        withBorder ? `border ${checked ? 'border-[#1088E7]' : 'border-[#C9D4E3]'} p-4` : ''\n      } rounded-[6px] transition-colors duration-300 ${disabled ? 'opacity-50' : ''} ${radioContainerClassName}`}\n      onClick={() => radioRef.current?.click()}\n      style={{ width: width || 'auto', backgroundColor: bgColor }}\n      data-automation-id={automationId}\n    >\n      <div className=\"flex items-center gap-[0.625rem]\" data-automation-id=\"radio-field-content\">\n        <input\n          ref={radioRef}\n          type=\"radio\"\n          id={value}\n          name={name}\n          value={value}\n          checked={checked}\n          disabled={disabled}\n          className=\"radio-field-input cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-blue-500)] w-[14px] h-[14px] p-[3px]\"\n          onChange={() => {\n            onChange && onChange({ ...props, checked: true });\n          }}\n        />\n        <label\n          htmlFor={value}\n          className={`${props.helperLabel ? 'flex flex-col gap-[6px]' : ''} ${\n            disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n          }`}\n          data-automation-id=\"radio-field-label\"\n        >\n          <span\n            className={`text-sm text-[var(--color-gray-800)] ${radioLabelClassName} `}\n            style={{ fontSize: '16px', fontWeight: '400' }}\n          >\n            {label}\n          </span>\n        </label>\n      </div>\n      {checked && content && <div className=\"radio-child-content pl-[1.5rem] w-full\">{content()}</div>}\n      {props.helperLabel && (\n        <span\n          className={`text-sm font-normal text-[var(--color-gray-600)] ${\n            props.maxWidth ? `max-w-[${props.maxWidth}]` : 'max-w-full'\n          } break-words whitespace-normal`}\n          data-automation-id=\"radio-field-helper-text\"\n        >\n          {props.helperLabel}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["Radio","props","label","value","checked","disabled","name","onChange","width","radioLabelClassName","radioContainerClassName","automationId","bgColor","withBorder","content","radioRef","useRef","React","createElement","className","onClick","current","click","style","backgroundColor","ref","type","id","htmlFor","helperLabel","fontSize","fontWeight","maxWidth"],"mappings":";AAoBO,SAASA,EAAMC,GAAmB;AACvC,QAAM;AAAA,IACJC,OAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,qBAAAA,IAAsB;AAAA,IACtBC,yBAAAA,IAA0B;AAAA,IAC1BC,cAAAA,IAAe;AAAA,IACfC,SAAAA,IAAU;AAAA,IACVC,YAAAA,IAAa;AAAA,IACbC,SAAAA;AAAAA,EAAAA,IACEb,GACEc,IAAWC,EAAyB,IAAI;AAE9C,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,4EACTd,IAAW,uBAAuB,gBAAgB,IAElDQ,IAAa,UAAUT,IAAU,qBAAqB,kBAAkB,SAAS,EAAE,iDACpCC,IAAW,eAAe,EAAE,IAAIK,CAAuB;AAAA,IACxGU,SAASA,MAAML,EAASM,SAASC,MAAAA;AAAAA,IACjCC,OAAO;AAAA,MAAEf,OAAOA,KAAS;AAAA,MAAQgB,iBAAiBZ;AAAAA,IAAAA;AAAAA,IAClD,sBAAoBD;AAAAA,EAAAA,GAEpBM,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAmC,sBAAmB;AAAA,EAAA,GACnEF,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEO,KAAKV;AAAAA,IACLW,MAAK;AAAA,IACLC,IAAIxB;AAAAA,IACJG,MAAAA;AAAAA,IACAH,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAc,WAAU;AAAA,IACVZ,UAAUA,MAAM;AACdA,MAAAA,KAAYA,EAAS;AAAA,QAAE,GAAGN;AAAAA,QAAOG,SAAS;AAAA,MAAA,CAAM;AAAA,IAClD;AAAA,EAAA,CACD,GACDa,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEU,SAASzB;AAAAA,IACTgB,WAAW,GAAGlB,EAAM4B,cAAc,4BAA4B,EAAE,IAC9DxB,IAAW,uBAAuB,gBAAgB;AAAA,IAEpD,sBAAmB;AAAA,EAAA,GAEnBY,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IACEC,WAAW,wCAAwCV,CAAmB;AAAA,IACtEc,OAAO;AAAA,MAAEO,UAAU;AAAA,MAAQC,YAAY;AAAA,IAAA;AAAA,EAAM,GAE5C7B,CACG,CACD,CACJ,GACJE,KAAWU,KAAWG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAA0CL,GAAe,GAC9Fb,EAAM4B,eACLZ,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IACEC,WAAW,oDACTlB,EAAM+B,WAAW,UAAU/B,EAAM+B,QAAQ,MAAM,YAAY;AAAA,IAE7D,sBAAmB;AAAA,EAAA,GAElB/B,EAAM4B,WACH,CAEL;AAET;"}