se-design 0.0.107 → 0.0.109

package/dist/index26.js

@@ -1,102 +1,33 @@
-import e from "react";
-import { Button as N } from "./index3.js";
-import { Badge as I } from "./index7.js";
-import { Icon as d } from "./index4.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,
-  widgetTitle: r,
-  widgetDescription: l,
-  widgetImage: p,
-  hasImage: f = !1,
-  hasButtonCta: n = !1,
-  hasLinkCta: o = !1,
-  ctaText: i = "",
-  hasBadge: x = !1,
-  badgeText: u = "",
-  buttonBgColor: w = "secondary",
-  onCtaClick: b,
-  onWidgetClick: v,
-  webinarDateInfo: s,
-  webinarSpeaker: c
+import r, { useState as u, useEffect as a } from "react";
+const x = ({
+  defaultActiveTab: o,
+  tabs: c,
+  onTabChange: s
 }) => {
-  const C = x && /* @__PURE__ */ e.createElement(I, {
-    label: u,
-    className: t.widgetBadge,
-    bgColor: "var(--color-yellow-50)",
-    textColor: "var(--color-yellow-400)",
-    fontWeight: "normal"
-  }), m = (o || n) && /* @__PURE__ */ e.createElement(e.Fragment, null, o && /* @__PURE__ */ e.createElement("span", {
-    className: t.widgetLinkCta
-  }, i), n && /* @__PURE__ */ e.createElement(N, {
-    type: w,
-    size: "md",
-    label: i,
-    customClassName: `${t.widgetButtonCta} mt-[4px]`,
-    onClick: b
-  })), E = 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" && E, /* @__PURE__ */ e.createElement("div", {
-    className: t.descriptionCtn
-  }, a !== "general" && C, 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
-  }, c && /* @__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
-  }, c)), s && /* @__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
-  }, s))), 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 m = o || (c[0] ? c[0].id : ""), [n, t] = u(m);
+  a(() => {
+    t(o || "");
+  }, [o]);
+  const v = (e) => {
+    t(e == null ? void 0 : e.id), s == null || s(e == null ? void 0 : e.id);
+  }, i = (e, l) => e.id === l;
+  return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", {
+    className: "se-design-tabs flex items-center gap-4"
+  }, c.map((e) => {
+    const l = n === e.id, d = e.disabled;
+    return /* @__PURE__ */ r.createElement("div", {
+      key: e.label,
+      onClick: () => !d && v(e),
+      className: `text-base ${d ? "text-[var(--color-gray-400)] cursor-not-allowed" : l ? "text-[var(--color-gray-900)] font-bold hover:cursor-pointer" : "text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer"}`
+    }, e.label);
+  })), /* @__PURE__ */ r.createElement("div", {
+    className: "se-design-tabs-content"
+  }, c.map((e) => /* @__PURE__ */ r.createElement("div", {
+    key: e.id,
+    className: `tab-content ${i(e, n) ? "block" : "hidden"}`
+  }, i(e, n) && (e == null ? void 0 : e.renderTabContent) && (e == null ? void 0 : e.renderTabContent(e))))));
 };
 export {
-  B as Widget,
-  B as default
+  x as Tabs
 };
 //# sourceMappingURL=index26.js.map

package/dist/index26.js.map

@@ -1 +1 @@
-{"version":3,"file":"index26.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,\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} customClassName={`${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","createElement","label","bgColor","textColor","fontWeight","renderCTA","React","Fragment","type","size","customClassName","onClick","renderImage","src","alt","includes","name"],"mappings":"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"}
+{"version":3,"file":"index26.js","sources":["../src/components/Tabs/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState, useEffect } from 'react';\n\ninterface TabProps {\n  label: string;\n  id: string;\n  disabled?: boolean;\n  renderTabContent?: (tab: TabProps) => ReactNode;\n}\n\ninterface TabsProps {\n  defaultActiveTab?: string;\n  tabs: TabProps[];\n  onTabChange?: (tabId: string) => void;\n}\n\nexport const Tabs: FC<TabsProps> = ({ defaultActiveTab, tabs, onTabChange }) => {\n  const defaultTabId = defaultActiveTab || (tabs[0] ? tabs[0].id : '');\n  const [activeTab, setActiveTab] = useState(defaultTabId);\n\n  useEffect(() => {\n    setActiveTab(defaultActiveTab || '');\n  }, [defaultActiveTab]);\n\n  const handleTabClick = (tab: TabProps) => {\n    setActiveTab(tab?.id);\n    onTabChange?.(tab?.id);\n  };\n\n  const isTabActive = (tab: TabProps, activeTab: string) => {\n    return tab.id === activeTab;\n  }\n\n  return (\n    <>\n      <div className=\"se-design-tabs flex items-center gap-4\">\n        {tabs.map((tab) => {\n          const isActive = activeTab === tab.id;\n          const isDisabled = tab.disabled;\n          return (\n            <div\n              key={tab.label}\n              onClick={() => !isDisabled && handleTabClick(tab)}\n              className={`text-base ${\n                isDisabled \n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isActive\n                    ? 'text-[var(--color-gray-900)] font-bold hover:cursor-pointer'\n                    : 'text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer'\n              }`}\n            >\n              {tab.label}\n            </div>\n          );\n        })}\n      </div>\n\n      <div className=\"se-design-tabs-content\">\n        {tabs.map((tab) => (\n          <div\n            key={tab.id}\n            className={`tab-content ${isTabActive(tab, activeTab) ? 'block' : 'hidden'}`}\n          >\n            {isTabActive(tab, activeTab) && tab?.renderTabContent && tab?.renderTabContent(tab)}\n          </div>\n        ))}\n      </div>\n    </>\n  );\n};"],"names":["Tabs","defaultActiveTab","tabs","onTabChange","defaultTabId","id","activeTab","setActiveTab","useState","useEffect","handleTabClick","tab","isTabActive","createElement","React","Fragment","className","map","isActive","isDisabled","disabled","key","label","onClick","renderTabContent"],"mappings":";AAeO,MAAMA,IAAsBA,CAAC;AAAA,EAAEC,kBAAAA;AAAAA,EAAkBC,MAAAA;AAAAA,EAAMC,aAAAA;AAAY,MAAM;AACxEC,QAAAA,IAAeH,MAAqBC,EAAK,CAAC,IAAIA,EAAK,CAAC,EAAEG,KAAK,KAC3D,CAACC,GAAWC,CAAY,IAAIC,EAASJ,CAAY;AAEvDK,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAaN,KAAoB,EAAE;AAAA,EAAA,GAClC,CAACA,CAAgB,CAAC;AAEfS,QAAAA,IAAiBA,CAACC,MAAkB;AACxCJ,IAAAA,EAAaI,KAAAA,gBAAAA,EAAKN,EAAE,GACpBF,KAAAA,QAAAA,EAAcQ,KAAAA,gBAAAA,EAAKN;AAAAA,EACrB,GAEMO,IAAcA,CAACD,GAAeL,MAC3BK,EAAIN,OAAOC;AAGpB,2BACEO,cAAAC,EAAAC,UAAA,MACED,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,EAAA,GACZd,EAAKe,IAAKN,CAAQA,MAAA;AACXO,UAAAA,IAAWZ,MAAcK,EAAIN,IAC7Bc,IAAaR,EAAIS;AAErBN,WAAAA,gBAAAA,EAAAD,cAAA,OAAA;AAAA,MACEQ,KAAKV,EAAIW;AAAAA,MACTC,SAASA,MAAM,CAACJ,KAAcT,EAAeC,CAAG;AAAA,MAChDK,WAAW,aACTG,IACI,oDACAD,IACE,gEACA,4FAA4F;AAAA,IAAA,GAGnGP,EAAIW,KACF;AAAA,EAER,CAAA,CACE,GAELR,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,EAAA,GACZd,EAAKe,IAAKN,CACTG,MAAAA,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IACEQ,KAAKV,EAAIN;AAAAA,IACTW,WAAW,eAAeJ,EAAYD,GAAKL,CAAS,IAAI,UAAU,QAAQ;AAAA,EAEzEM,GAAAA,EAAYD,GAAKL,CAAS,MAAKK,KAAAA,gBAAAA,EAAKa,sBAAoBb,KAAAA,gBAAAA,EAAKa,iBAAiBb,GAC5E,CACN,CACE,CACL;AAEN;"}

package/dist/index27.js

@@ -1,61 +1,67 @@
-var f = Object.defineProperty, E = Object.defineProperties;
-var v = Object.getOwnPropertyDescriptors;
-var i = Object.getOwnPropertySymbols;
-var C = Object.prototype.hasOwnProperty, N = Object.prototype.propertyIsEnumerable;
-var s = (e, a, t) => a in e ? f(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t, d = (e, a) => {
-  for (var t in a || (a = {}))
-    C.call(a, t) && s(e, t, a[t]);
-  if (i)
-    for (var t of i(a))
-      N.call(a, t) && s(e, t, a[t]);
-  return e;
-}, m = (e, a) => E(e, v(a));
-import r, { useRef as g } from "react";
-function p(e) {
+import e from "react";
+import { Icon as h } from "./index4.js";
+import { Button as N } from "./index3.js";
+/* empty css         */
+const n = {
+  bannerCtn: "relative rounded-[12px] flex pr-3.5 cursor-pointer",
+  bannerContentCtn: "pt-5 pl-6 pb-5 pr-2 flex flex-col gap-2",
+  bannerLinkCta: "text-[#1088e7] cursor-pointer text-base leading-6 underline hover: text-[#0078d4]",
+  bannerImageCtn: "w-[30%] flex mr-5 justify-end cursor-pointer",
+  bannerCloseIconCtn: "absolute top-[12px] right-[12px] cursor-pointer hover:bg-[var(--color-gray-100)] rounded-full p-1",
+  bannerButton: "self-start"
+}, B = (t) => {
   const {
-    label: a,
-    value: t,
-    checked: l,
-    disabled: h,
-    name: u,
-    onChange: o,
-    width: b,
-    radioLabelClassName: x = "",
-    radioContainerClassName: w = ""
-  } = e, c = g(null);
-  return /* @__PURE__ */ r.createElement("div", {
-    className: `flex items-start gap-2 cursor-pointer bg-[var(--color-white)] border ${l ? "border-[#1088E7]" : "border-[#C9D4E3]"} rounded-[6px] p-2 transition-colors duration-300 ${w}`,
-    onClick: () => {
-      var n;
-      return (n = c.current) == null ? void 0 : n.click();
-    },
+    bannerClassName: i,
+    bannerBgColor: m,
+    title: C,
+    description: b,
+    hasImage: a,
+    imagePosition: r = "right",
+    hasCloseIcon: p,
+    closeIconName: u,
+    onClose: d,
+    onBannerClick: o,
+    ctaText: l,
+    hasLinkCta: g,
+    onCtaClick: c,
+    hasButtonCta: x,
+    buttonType: f = "secondary"
+  } = t, s = () => a && /* @__PURE__ */ e.createElement("div", {
+    className: `${n.bannerImageCtn} banner-image-ctn min-h-full`,
+    onClick: o
+  }, /* @__PURE__ */ e.createElement("img", {
+    src: t.bannerImage,
+    className: "max-w-[initial] h-[initial] max-h-[150px] object-contain"
+  }));
+  return /* @__PURE__ */ e.createElement("div", {
+    className: `${n.bannerCtn} ${i} banner-ctn`,
     style: {
-      width: b || "20vw"
+      backgroundColor: m
     }
-  }, /* @__PURE__ */ r.createElement("input", {
-    ref: c,
-    type: "radio",
-    id: t,
-    name: u,
-    value: t,
-    checked: l,
-    disabled: h,
-    className: "mt-1 h-4 w-4 cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50",
-    onChange: () => {
-      o && o(m(d({}, e), {
-        checked: !0
-      }));
-    }
-  }), /* @__PURE__ */ r.createElement("label", {
-    htmlFor: t,
-    className: `${e.helperLabel && "flex flex-col"} cursor-pointer`
-  }, /* @__PURE__ */ r.createElement("span", {
-    className: `text-sm text-[var(--color-gray-800)] ${x}`
-  }, a), e.helperLabel && /* @__PURE__ */ r.createElement("span", {
-    className: `text-xs text-[var(--color-gray-600)] ${e.maxWidth ? `max-w-[${e.maxWidth}]` : "max-w-[20vw]"} break-words whitespace-normal`
-  }, e.helperLabel)));
-}
+  }, r === "left" && s(), /* @__PURE__ */ e.createElement("div", {
+    className: `${n.bannerContentCtn} ${a ? "w-[70%]" : "w-[100%]"} banner-content-ctn`,
+    onClick: o
+  }, /* @__PURE__ */ e.createElement("span", {
+    className: "banner-title"
+  }, C), /* @__PURE__ */ e.createElement("span", {
+    className: "banner-description"
+  }, b), g && /* @__PURE__ */ e.createElement("span", {
+    className: n.bannerLinkCta,
+    onClick: c
+  }, l), x && /* @__PURE__ */ e.createElement(N, {
+    type: f,
+    size: "sm",
+    label: l,
+    onClick: c,
+    className: n.bannerButton
+  })), r === "right" && s(), /* @__PURE__ */ e.createElement("span", {
+    className: n.bannerCloseIconCtn,
+    onClick: d
+  }, p && /* @__PURE__ */ e.createElement(h, {
+    name: u
+  })));
+};
 export {
-  p as Radio
+  B as Banner
 };
 //# sourceMappingURL=index27.js.map

package/dist/index27.js.map

@@ -1 +1 @@
-{"version":3,"file":"index27.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}\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  } = props;\n  const radioRef = useRef<HTMLInputElement>(null);\n\n  return (\n    <div\n      className={`flex items-start gap-2 cursor-pointer bg-[var(--color-white)] border ${checked ? 'border-[#1088E7]' : 'border-[#C9D4E3]'} rounded-[6px] p-2 transition-colors duration-300 ${radioContainerClassName}`}\n      onClick={() => radioRef.current?.click()}\n      style={{ width: width || '20vw' }}\n    >\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=\"mt-1 h-4 w-4 cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50\"\n        onChange={() => {\n          onChange && onChange({ ...props, checked: true });\n        }}\n      />\n      <label htmlFor={value} className={`${props.helperLabel && 'flex flex-col'} cursor-pointer`}>\n        <span className={`text-sm text-[var(--color-gray-800)] ${radioLabelClassName}`}>{label}</span>\n        {props.helperLabel && (\n          <span\n            className={`text-xs text-[var(--color-gray-600)] ${props.maxWidth ? `max-w-[${props.maxWidth}]` : 'max-w-[20vw]'} break-words whitespace-normal`}\n          >\n            {props.helperLabel}\n          </span>\n        )}\n      </label>\n    </div>\n  );\n}\n"],"names":["Radio","props","label","value","checked","disabled","name","onChange","width","radioLabelClassName","radioContainerClassName","radioRef","useRef","React","createElement","className","onClick","current","click","style","ref","type","id","__spreadProps","__spreadValues","htmlFor","helperLabel","maxWidth"],"mappings":";;;;;;;;;;;;;AAgBO,SAASA,EAAMC,GAAmB;AACjC,QAAA;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,EAAA,IACxBT,GACEU,IAAWC,EAAyB,IAAI;AAG5CC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,wEAAwEX,IAAU,qBAAqB,kBAAkB,qDAAqDM,CAAuB;AAAA,IAChNM,SAASA,MAAML;;AAAAA,cAAAA,IAAAA,EAASM,YAATN,gBAAAA,EAAkBO;AAAAA;AAAAA,IACjCC,OAAO;AAAA,MAAEX,OAAOA,KAAS;AAAA,IAAA;AAAA,EAAO,GAEhCM,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEM,KAAKT;AAAAA,IACLU,MAAK;AAAA,IACLC,IAAInB;AAAAA,IACJG,MAAAA;AAAAA,IACAH,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAU,WAAU;AAAA,IACVR,UAAUA,MAAM;AACdA,MAAAA,KAAYA,EAASgB,EAAAC,EAAA,IAAKvB,IAAL;AAAA,QAAYG,SAAS;AAAA,MAAA,EAAM;AAAA,IAAA;AAAA,EAClD,CACD,GACDU,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IAAOW,SAAStB;AAAAA,IAAOY,WAAW,GAAGd,EAAMyB,eAAe,eAAe;AAAA,EAAA,GACvEZ,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAW,wCAAwCN,CAAmB;AAAA,EAAA,GAAKP,CAAY,GAC5FD,EAAMyB,eACLb,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IACEC,WAAW,wCAAwCd,EAAM0B,WAAW,UAAU1B,EAAM0B,QAAQ,MAAM,cAAc;AAAA,EAAA,GAE/G1B,EAAMyB,WACH,CAEH,CACJ;AAET;"}
+{"version":3,"file":"index27.js","sources":["../src/components/Banner/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { Icon } from 'components/Icon';\nimport { Button } from 'components/Button';\nimport './style.scss';\n\nexport interface BannerProps {\n  bannerClassName?: string | '';\n  bannerBgColor?: string | '';\n  title: string | '';\n  description: string | '';\n  hasImage?: boolean | false;\n  imagePosition?: 'left' | 'right' | '';\n  bannerImage: string | '';\n  hasCloseIcon?: boolean | false;\n  closeIconName: string | '';\n  onClose: () => void | (() => {});\n  onBannerClick?: () => void | (() => {});\n  hasButtonCta?: boolean | false;\n  buttonType?: 'primary' | 'secondary' | 'link';\n  hasLinkCta?: boolean | false;\n  ctaText: string | '';\n  onCtaClick: () => void | (() => {});\n}\n\nconst classNames: Map = {\n  bannerCtn: `relative rounded-[12px] flex pr-3.5 cursor-pointer`,\n  bannerContentCtn: 'pt-5 pl-6 pb-5 pr-2 flex flex-col gap-2',\n  bannerLinkCta: 'text-[#1088e7] cursor-pointer text-base leading-6 underline hover: text-[#0078d4]',\n  bannerImageCtn: 'w-[30%] flex mr-5 justify-end cursor-pointer',\n  bannerCloseIconCtn:\n    'absolute top-[12px] right-[12px] cursor-pointer hover:bg-[var(--color-gray-100)] rounded-full p-1',\n  bannerButton: 'self-start'\n};\n\nexport const Banner: FC<BannerProps> = (props) => {\n  const {\n    bannerClassName,\n    bannerBgColor,\n    title,\n    description,\n    hasImage,\n    imagePosition = 'right',\n    hasCloseIcon,\n    closeIconName,\n    onClose,\n    onBannerClick,\n    ctaText,\n    hasLinkCta,\n    onCtaClick,\n    hasButtonCta,\n    buttonType = 'secondary'\n  } = props;\n\n  const renderImage = () =>\n    hasImage && (\n      <div className={`${classNames.bannerImageCtn} banner-image-ctn min-h-full`} onClick={onBannerClick}>\n        <img src={props.bannerImage} className=\"max-w-[initial] h-[initial] max-h-[150px] object-contain\" />\n      </div>\n    );\n\n  return (\n    <div className={`${classNames.bannerCtn} ${bannerClassName} banner-ctn`} style={{ backgroundColor: bannerBgColor }}>\n      {imagePosition === 'left' && renderImage()}\n      <div\n        className={`${classNames.bannerContentCtn} ${hasImage ? 'w-[70%]' : 'w-[100%]'} banner-content-ctn`}\n        onClick={onBannerClick}\n      >\n        <span className=\"banner-title\">{title}</span>\n        <span className=\"banner-description\">{description}</span>\n        {hasLinkCta && (\n          <span className={classNames.bannerLinkCta} onClick={onCtaClick}>\n            {ctaText}\n          </span>\n        )}\n        {hasButtonCta && (\n          <Button\n            type={buttonType}\n            size=\"sm\"\n            label={ctaText}\n            onClick={onCtaClick}\n            className={classNames.bannerButton}\n          />\n        )}\n      </div>\n      {imagePosition === 'right' && renderImage()}\n      <span className={classNames.bannerCloseIconCtn} onClick={onClose}>\n        {hasCloseIcon && <Icon name={closeIconName} />}\n      </span>\n    </div>\n  );\n};\n"],"names":["React__default","Icon","Button","classNames","bannerCtn","bannerContentCtn","bannerLinkCta","bannerImageCtn","bannerCloseIconCtn","bannerButton","Banner","props","bannerClassName","bannerBgColor","title","description","hasImage","imagePosition","hasCloseIcon","closeIconName","onClose","onBannerClick","ctaText","hasLinkCta","onCtaClick","hasButtonCta","buttonType","renderImage","React","createElement","className","onClick","src","bannerImage","style","backgroundColor","type","size","label","name"],"mappings":"AAyBA,OAAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,WAAW;AAAA,EACXC,kBAAkB;AAAA,EAClBC,eAAe;AAAA,EACfC,gBAAgB;AAAA,EAChBC,oBACE;AAAA,EACFC,cAAc;AAChB,GAEaC,IAA2BC,CAAUA,MAAA;AAC1C,QAAA;AAAA,IACJC,iBAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,eAAAA,IAAgB;AAAA,IAChBC,cAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,YAAAA,IAAa;AAAA,EAAA,IACXf,GAEEgB,IAAcA,MAClBX,KACEY,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAG3B,EAAWI,cAAc;AAAA,IAAgCwB,SAASV;AAAAA,EAAAA,GACnFQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKG,KAAKrB,EAAMsB;AAAAA,IAAaH,WAAU;AAAA,EAAA,CAA4D,CAChG;AAIPF,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAG3B,EAAWC,SAAS,IAAIQ,CAAe;AAAA,IAAesB,OAAO;AAAA,MAAEC,iBAAiBtB;AAAAA,IAAAA;AAAAA,EAAc,GAC9GI,MAAkB,UAAUU,EAC7BC,GAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,GAAG3B,EAAWE,gBAAgB,IAAIW,IAAW,YAAY,UAAU;AAAA,IAC9Ee,SAASV;AAAAA,EAAAA,GAETQ,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,EAAgBhB,GAAAA,CAAY,GAC5Cc,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,KAAsBf,CAAkB,GACvDQ,KACCK,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAW3B,EAAWG;AAAAA,IAAeyB,SAASP;AAAAA,KACjDF,CACG,GAEPG,KACCG,gBAAAA,EAAAC,cAAC3B,GAAM;AAAA,IACLkC,MAAMV;AAAAA,IACNW,MAAK;AAAA,IACLC,OAAOhB;AAAAA,IACPS,SAASP;AAAAA,IACTM,WAAW3B,EAAWM;AAAAA,EAAAA,CACvB,CAEA,GACJQ,MAAkB,WAAWU,EAAY,GAC1CE,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAW3B,EAAWK;AAAAA,IAAoBuB,SAASX;AAAAA,EACtDF,GAAAA,KAAgBW,gBAAAA,EAAAA,cAAC5B,GAAI;AAAA,IAACsC,MAAMpB;AAAAA,EAAgB,CAAA,CACzC,CACH;AAET;"}

package/dist/index28.js

@@ -1,42 +1,46 @@
-var d = Object.defineProperty, m = Object.defineProperties;
-var s = Object.getOwnPropertyDescriptors;
-var u = Object.getOwnPropertySymbols;
-var g = Object.prototype.hasOwnProperty, f = Object.prototype.propertyIsEnumerable;
-var o = (n, a, e) => a in n ? d(n, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[a] = e, c = (n, a) => {
-  for (var e in a || (a = {}))
-    g.call(a, e) && o(n, e, a[e]);
-  if (u)
-    for (var e of u(a))
-      f.call(a, e) && o(n, e, a[e]);
-  return n;
-}, l = (n, a) => m(n, s(a));
-import i from "react";
-import { Radio as h } from "./index27.js";
-function t() {
-  return t = Object.assign ? Object.assign.bind() : function(n) {
-    for (var a = 1; a < arguments.length; a++) {
-      var e = arguments[a];
-      for (var r in e) ({}).hasOwnProperty.call(e, r) && (n[r] = e[r]);
-    }
-    return n;
-  }, t.apply(null, arguments);
-}
-function b(n) {
-  const a = (e) => {
-    n.onRadioGroupChange(l(c({}, e), {
-      checked: !0
-    }));
+import r from "react";
+import { Icon as h } from "./index4.js";
+const E = ({
+  currentPage: s,
+  itemsPerPage: l,
+  totalItems: n,
+  onPageChange: i
+}) => {
+  const o = Math.ceil(n / l), m = 1, d = o, f = (s - 1) * l + 1, p = Math.min(s * l, n), u = p < n, x = s > 1, y = () => {
+    const e = [], t = (a) => /* @__PURE__ */ r.createElement("span", {
+      key: a,
+      onClick: () => i(a),
+      className: `w-5 h-5 text-sm flex items-center justify-center rounded border ${s === a ? "bg-[var(--color-gray-100)] border-[var(--color-gray-300)]" : "border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]"}`
+    }, a), c = () => /* @__PURE__ */ r.createElement("span", {
+      className: "w-5 h-5 text-sm rounded border border-[var(--color-gray-200)] flex items-end justify-center"
+    }, "...");
+    if (s <= 3) {
+      for (let a = 1; a <= Math.min(3, o); a++)
+        e.push(t(a));
+      o > 3 && (e.push(c()), e.push(t(o)));
+    } else s >= o - 2 ? (e.push(t(m)), e.push(c()), e.push(t(o - 2)), e.push(t(o - 1)), e.push(t(o))) : (e.push(t(m)), e.push(c()), e.push(t(s - 1)), e.push(t(s)), e.push(t(s + 1)), e.push(c()), e.push(t(d)));
+    return e;
   };
-  return /* @__PURE__ */ i.createElement("div", {
-    className: "flex gap-2"
-  }, n.options.map((e) => /* @__PURE__ */ i.createElement(h, t({
-    key: e.value
-  }, e, {
-    onChange: a,
-    checked: e.value === n.value
-  }))));
-}
+  return /* @__PURE__ */ r.createElement("div", {
+    className: "flex items-center gap-1 font-normal"
+  }, /* @__PURE__ */ r.createElement("span", {
+    className: "text-sm text-[var(--color-gray-700)] mr-1"
+  }, "Showing ", f, "-", p, " of ", n), /* @__PURE__ */ r.createElement("span", {
+    onClick: () => x && i(s - 1),
+    className: "w-5 h-5 flex items-center justify-center disabled:opacity-50 hover:cursor-pointer"
+  }, /* @__PURE__ */ r.createElement(h, {
+    name: "next",
+    className: "rotate-180 transition-transform stroke-[var(--color-gray-600)]"
+  })), /* @__PURE__ */ r.createElement("div", {
+    className: "flex items-center gap-1"
+  }, y()), /* @__PURE__ */ r.createElement("span", {
+    onClick: () => u && i(s + 1),
+    className: "w-5 h-5 flex items-center justify-center disabled:opacity-50 hover:cursor-pointer"
+  }, /* @__PURE__ */ r.createElement(h, {
+    name: "next"
+  })));
+};
 export {
-  b as RadioGroup
+  E as Pagination
 };
 //# sourceMappingURL=index28.js.map

package/dist/index28.js.map

@@ -1 +1 @@
-{"version":3,"file":"index28.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}\n\nexport function RadioGroup(props: RadioGroupProps) {\n  const handleRadioChange = (obj: RadioProps) => {\n    props.onRadioGroupChange({ ...obj, checked: true });\n  };\n  return (\n    <div className=\"flex gap-2\">\n      {props.options.map((option) => (\n        <Radio key={option.value} {...option} onChange={handleRadioChange} checked={option.value === props.value} />\n      ))}\n    </div>\n  );\n}\n"],"names":["RadioGroup","props","handleRadioChange","obj","onRadioGroupChange","__spreadProps","__spreadValues","checked","React","createElement","className","options","map","option","Radio","_extends","key","value","onChange"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AASO,SAASA,EAAWC,GAAwB;AAC3CC,QAAAA,IAAoBA,CAACC,MAAoB;AAC7CF,IAAAA,EAAMG,mBAAmBC,EAAAC,EAAA,IAAKH,IAAL;AAAA,MAAUI,SAAS;AAAA,IAAA,EAAM;AAAA,EACpD;AAEEC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACZT,EAAMU,QAAQC,IAAKC,OAClBJ,gBAAAA,EAAAA,cAACK,GAAKC,EAAA;AAAA,IAACC,KAAKH,EAAOI;AAAAA,KAAWJ,GAAM;AAAA,IAAEK,UAAUhB;AAAAA,IAAmBK,SAASM,EAAOI,UAAUhB,EAAMgB;AAAAA,EAAQ,CAAA,CAAA,CAC5G,CACE;AAET;"}
+{"version":3,"file":"index28.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}\n\nexport const Pagination: React.FC<PaginationProps> = ({ currentPage, itemsPerPage, totalItems, onPageChange }) => {\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={`w-5 h-5 text-sm flex items-center justify-center rounded border ${currentPage === pageNum ? 'bg-[var(--color-gray-100)] border-[var(--color-gray-300)]' : 'border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]'}`}\n        >\n          {pageNum}\n        </span>\n      );\n    };\n\n    const renderEllipsis = () => {\n      return (\n        <span 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\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());\n        pages.push(renderPageNumber(totalPages));\n      }\n    } else if (currentPage >= totalPages - 2) {\n      pages.push(renderPageNumber(firstPage));\n      pages.push(renderEllipsis());\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());\n      pages.push(renderPageNumber(currentPage - 1));\n      pages.push(renderPageNumber(currentPage));\n      pages.push(renderPageNumber(currentPage + 1));\n      pages.push(renderEllipsis());\n      pages.push(renderPageNumber(lastPage));\n    }\n\n    return pages;\n  };\n\n  return (\n    <div className=\"flex items-center gap-1 font-normal\">\n      <span className=\"text-sm text-[var(--color-gray-700)] mr-1\">\n        Showing {startItem}-{endItem} of {totalItems}\n      </span>\n      <span\n        onClick={() => hasPrevPage && onPageChange(currentPage - 1)}\n        className=\"w-5 h-5 flex items-center justify-center disabled:opacity-50 hover:cursor-pointer\"\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=\"w-5 h-5 flex items-center justify-center disabled:opacity-50 hover:cursor-pointer\"\n      >\n        <Icon name=\"next\" />\n      </span>\n    </div>\n  );\n};\n"],"names":["Pagination","currentPage","itemsPerPage","totalItems","onPageChange","totalPages","Math","ceil","firstPage","lastPage","startItem","endItem","min","hasNextPage","hasPrevPage","renderPageNumbers","pages","renderPageNumber","pageNum","React","createElement","key","onClick","className","renderEllipsis","i","push","Icon","name"],"mappings":";;AAWO,MAAMA,IAAwCA,CAAC;AAAA,EAAEC,aAAAA;AAAAA,EAAaC,cAAAA;AAAAA,EAAcC,YAAAA;AAAAA,EAAYC,cAAAA;AAAa,MAAM;AAChH,QAAMC,IAAaC,KAAKC,KAAKJ,IAAaD,CAAY,GAChDM,IAAY,GACZC,IAAWJ,GACXK,KAAaT,IAAc,KAAKC,IAAe,GAC/CS,IAAUL,KAAKM,IAAIX,IAAcC,GAAcC,CAAU,GACzDU,IAAcF,IAAUR,GACxBW,IAAcb,IAAc,GAE5Bc,IAAoBA,MAAM;AAC9B,UAAMC,IAAQ,CAAE,GAEVC,IAAmBA,CAACC,MAEtBC,gBAAAA,EAAAC,cAAA,QAAA;AAAA,MACEC,KAAKH;AAAAA,MACLI,SAASA,MAAMlB,EAAac,CAAO;AAAA,MACnCK,WAAW,mEAAmEtB,MAAgBiB,IAAU,8DAA8D,gEAAgE;AAAA,OAErOA,CACG,GAIJM,IAAiBA,MAEnBL,gBAAAA,EAAAC,cAAA,QAAA;AAAA,MAAMG,WAAU;AAAA,OAA8F,KAExG;AAIV,QAAItB,KAAe,GAAG;AACXwB,eAAAA,IAAI,GAAGA,KAAKnB,KAAKM,IAAI,GAAGP,CAAU,GAAGoB;AACtCC,QAAAA,EAAAA,KAAKT,EAAiBQ,CAAC,CAAC;AAGhC,MAAIpB,IAAa,MACTqB,EAAAA,KAAKF,GAAgB,GACrBE,EAAAA,KAAKT,EAAiBZ,CAAU,CAAC;AAAA,IACzC,MACF,CAAWJ,KAAeI,IAAa,KAC/BqB,EAAAA,KAAKT,EAAiBT,CAAS,CAAC,GAChCkB,EAAAA,KAAKF,GAAgB,GAC3BR,EAAMU,KAAKT,EAAiBZ,IAAa,CAAC,CAAC,GAC3CW,EAAMU,KAAKT,EAAiBZ,IAAa,CAAC,CAAC,GACrCqB,EAAAA,KAAKT,EAAiBZ,CAAU,CAAC,MAEjCqB,EAAAA,KAAKT,EAAiBT,CAAS,CAAC,GAChCkB,EAAAA,KAAKF,GAAgB,GAC3BR,EAAMU,KAAKT,EAAiBhB,IAAc,CAAC,CAAC,GACtCyB,EAAAA,KAAKT,EAAiBhB,CAAW,CAAC,GACxCe,EAAMU,KAAKT,EAAiBhB,IAAc,CAAC,CAAC,GACtCyB,EAAAA,KAAKF,GAAgB,GACrBE,EAAAA,KAAKT,EAAiBR,CAAQ,CAAC;AAGhCO,WAAAA;AAAAA,EACT;AAGEG,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,EAAA,GACbH,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMG,WAAU;AAAA,EAAA,GAA4C,YACjDb,GAAU,KAAEC,GAAQ,QAAKR,CAC9B,GACNiB,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACEE,SAASA,MAAMR,KAAeV,EAAaH,IAAc,CAAC;AAAA,IAC1DsB,WAAU;AAAA,EAAA,GAEVH,gBAAAA,EAAAA,cAACO,GAAI;AAAA,IAACC,MAAK;AAAA,IAAOL,WAAU;AAAA,EAAkE,CAAA,CAC1F,GAENJ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,KAA2BR,EAAkB,CAAO,GACnEI,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IACEE,SAASA,MAAMT,KAAeT,EAAaH,IAAc,CAAC;AAAA,IAC1DsB,WAAU;AAAA,EAAA,GAEVH,gBAAAA,EAAAA,cAACO,GAAI;AAAA,IAACC,MAAK;AAAA,EAAQ,CAAA,CACf,CACH;AAET;"}

package/dist/index29.js

@@ -1,38 +1,102 @@
-import e, { useState as m, useEffect as c } from "react";
+import e from "react";
+import { Button as N } from "./index3.js";
+import { Badge as I } from "./index7.js";
 import { Icon as d } from "./index4.js";
-const E = ({
-  title: i,
-  content: r,
-  defaultOpen: a,
-  overflow: o,
-  titleClassName: s = "",
-  showSeparator: l = !0
+/* 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,
+  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 [t, n] = m(!1);
-  return c(() => {
-    n(a || !1);
-  }, [a]), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("div", {
-    className: "flex items-center cursor-pointer max-w-[50vw]",
-    onClick: () => n(!t)
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: `transform transition-transform duration-300 ${t ? "rotate-90" : ""}`
-  }, /* @__PURE__ */ e.createElement(d, {
-    name: "rightSide"
-  })), /* @__PURE__ */ e.createElement("h4", {
-    className: `text-[#1B2636] font-inter text-[18px] font-semibold leading-[24px] ${s}`
-  }, i)), /* @__PURE__ */ e.createElement("div", {
-    className: `
-        overflow-${o || "hidden"}
-        transition-all
-        duration-300
-        ml-1
-        mt-[1vw]
-        ${t ? "max-h-[1000vh] opacity-100 visible h-auto" : "max-h-0 opacity-0 invisible h-0"}`
-  }, r), l && /* @__PURE__ */ e.createElement("div", {
-    className: `h-[1px] bg-[#E5E7EB] ${t ? "hidden" : "block"}`
+  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 {
-  E as Accordion
+  B as Widget,
+  B as default
 };
 //# sourceMappingURL=index29.js.map