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

package/dist/index3.js

@@ -1,70 +1,74 @@
-import s from "react";
-import { Icon as u } from "./index5.js";
-/* empty css        */
-function i() {
-  return i = Object.assign ? Object.assign.bind() : function(e) {
-    for (var t = 1; t < arguments.length; t++) {
-      var n = arguments[t];
-      for (var a in n) ({}).hasOwnProperty.call(n, a) && (e[a] = n[a]);
+import K, { forwardRef as N } from "react";
+import { getA11yNameAttributes as R } from "./index81.js";
+import { useAccessiblePress as _ } from "./index67.js";
+import "./index72.js";
+function a() {
+  return a = Object.assign ? Object.assign.bind() : function(t) {
+    for (var r = 1; r < arguments.length; r++) {
+      var e = arguments[r];
+      for (var n in e) ({}).hasOwnProperty.call(e, n) && (t[n] = e[n]);
     }
-    return e;
-  }, i.apply(null, arguments);
+    return t;
+  }, a.apply(null, arguments);
 }
-const o = "focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2", w = {
-  primary: "primary-btn disabled-btn pointer-events-none cursor-not-allowed",
-  secondary: "secondary-btn disabled-btn pointer-events-none cursor-not-allowed",
-  ghost: "ghost-btn disabled-btn pointer-events-none cursor-not-allowed",
-  link: "link-btn w-fit disabled-btn pointer-events-none cursor-not-allowed",
-  sm: "py-1 px-3 small",
-  // padding: 4px, 12px
-  md: "py-2 px-3 medium",
-  // padding: 8px, 12px 
-  lg: "py-3 px-4 large"
-  // padding: 12px, 16px
-}, b = {
-  primary: `primary-btn ${o}`,
-  secondary: `secondary-btn ${o}`,
-  ghost: `ghost-btn ${o}`,
-  link: `link-btn w-fit ${o}`,
-  sm: "py-1 px-3 small",
-  // padding: 4px, 12px
-  md: "py-2 px-3 medium",
-  // padding: 8px, 12px 
-  lg: "py-3 px-4 large"
-  // padding: 12px, 16px
-}, v = {
-  blue: "theme-blue",
-  red: "theme-red",
-  yellow: "theme-yellow",
-  green: "theme-green",
-  ai: "theme-ai",
-  white: "theme-white"
-}, k = ({
-  type: e = "primary",
-  theme: t = "blue",
-  size: n = "md",
-  label: a = "",
-  iconPosition: d = "left",
-  disabled: c = !1,
-  loading: l = !1,
-  className: p = "",
-  iconProps: r = {
-    name: ""
-  },
-  automationId: f = "",
-  ...y
-}) => {
-  const g = e !== "link" ? b[n] : "", h = v[t], m = c || l;
-  return m && (r.stroke = "var(--color-gray-600)"), /* @__PURE__ */ s.createElement("button", i({
-    type: "button",
-    className: `se-design-button ${h} ${g} ${m ? w[e] : b[e]} ${p} rounded-[6px] flex gap-1 items-center min-w-fit`,
-    disabled: m,
-    "data-automation-id": f
-  }, y), l && /* @__PURE__ */ s.createElement("div", {
-    className: "animate-spin w-4 h-4 border-2 border-current border-t-transparent rounded-full"
-  }), !l && r?.name && d === "left" && /* @__PURE__ */ s.createElement(u, r), a, !l && r?.name && d === "right" && /* @__PURE__ */ s.createElement(u, r));
-};
+const h = /* @__PURE__ */ N(({
+  onClick: t,
+  onKeyboardActivate: r,
+  onKeyDown: e,
+  role: n = "button",
+  disabled: d,
+  loading: m,
+  stopPropagation: u,
+  tabIndex: p,
+  isPressed: b,
+  ariaLabel: f,
+  ariaLabelledBy: v,
+  ariaDescribedBy: g,
+  automationId: i,
+  className: c = "",
+  children: y,
+  ...x
+}, P) => {
+  const l = !!t, {
+    pressProps: o,
+    role: w,
+    tabIndex: A
+  } = _({
+    onClick: l ? t : void 0,
+    onKeyboardActivate: r,
+    isNative: !1,
+    role: n,
+    disabled: d,
+    loading: m,
+    stopPropagation: u,
+    tabIndex: p,
+    pressed: b
+  }), D = e ? (s) => {
+    o.onKeyDown?.(s), s.key !== "Enter" && s.key !== " " && e(s);
+  } : o.onKeyDown, I = {
+    ...o,
+    onKeyDown: D
+  }, O = l ? {
+    role: w,
+    tabIndex: A,
+    className: `focus-outline ${c}`.trim(),
+    ...R({
+      ariaLabel: f,
+      ariaLabelledBy: v,
+      ariaDescribedBy: g
+    }),
+    ...I
+  } : {
+    className: c
+  };
+  return /* @__PURE__ */ K.createElement("div", a({
+    ref: P
+  }, O, i ? {
+    "data-automation-id": i
+  } : {}, x), y);
+});
+h.displayName = "AccessibleDiv";
 export {
-  k as Button
+  h as AccessibleDiv
 };
 //# sourceMappingURL=index3.js.map

package/dist/index3.js.map

@@ -1 +1 @@
-{"version":3,"file":"index3.js","sources":["../src/components/Button/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { Icon, IconProps } from '../Icon';\nimport './style.scss';\n\nexport interface ButtonProps {\n  /**\n   * Type of the button\n   */\n  type?: 'primary' | 'secondary' | 'ghost' | 'link';\n  /**\n   * Color pallet of the button\n   */\n  theme?: 'blue' | 'red' | 'yellow' | 'green' | 'ai' | 'white';\n  /**\n   * Size of the button\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Button contents\n   */\n  label: string | '';\n  /**\n   * Icon props\n   */\n  iconProps?: IconProps;\n  /**\n   * Icon position\n   */\n  iconPosition?: 'left' | 'right';\n  /**\n   * Disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Loading state - will disable button and show spinner\n   */\n  loading?: boolean;\n  /**\n   * Optional click handler\n   */\n  onClick?: () => void;\n  /**\n   * Custom class name\n   */\n  className?: string;\n  /**\n   * Automation ID for testing\n   */\n  automationId?: string;\n}\n\nconst focusClass = 'focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2';\nconst disabledClassNames: Map = {\n  primary: 'primary-btn disabled-btn pointer-events-none cursor-not-allowed',\n  secondary: 'secondary-btn disabled-btn pointer-events-none cursor-not-allowed',\n  ghost: 'ghost-btn disabled-btn pointer-events-none cursor-not-allowed',\n  link: 'link-btn w-fit disabled-btn pointer-events-none cursor-not-allowed',\n  sm: 'py-1 px-3 small',  // padding: 4px, 12px\n  md: 'py-2 px-3 medium', // padding: 8px, 12px \n  lg: 'py-3 px-4 large', // padding: 12px, 16px\n};\nconst classNames: Map = {\n  primary: `primary-btn ${focusClass}`,\n  secondary: `secondary-btn ${focusClass}`,\n  ghost: `ghost-btn ${focusClass}`,\n  link: `link-btn w-fit ${focusClass}`,\n  sm: 'py-1 px-3 small',  // padding: 4px, 12px\n  md: 'py-2 px-3 medium', // padding: 8px, 12px \n  lg: 'py-3 px-4 large', // padding: 12px, 16px\n};\n\nconst colorPalletClassNames: Map = {\n  blue: `theme-blue`,\n  red: 'theme-red',\n  yellow: 'theme-yellow',\n  green: 'theme-green',\n  ai: 'theme-ai',\n  white: 'theme-white'\n};\n\nexport const Button: FC<ButtonProps> = ({\n  type = 'primary',\n  theme = 'blue',\n  size = 'md',\n  label = '',\n  iconPosition = 'left',\n  disabled = false,\n  loading = false,\n  className = '',\n  iconProps = { name: '' },\n  automationId = '',\n  ...props\n}) => {\n  const sizeClassName = type !== 'link' ? classNames[size] : '';\n  const colorPalletClassName = colorPalletClassNames[theme];\n  const isDisabled = disabled || loading;\n\n  if(isDisabled) {\n    iconProps.stroke = 'var(--color-gray-600)';\n  }\n  return (\n    <button\n      type=\"button\"\n      className={`se-design-button ${colorPalletClassName} ${sizeClassName} ${isDisabled ? disabledClassNames[type] : classNames[type]} ${className} rounded-[6px] flex gap-1 items-center min-w-fit`}\n      disabled={isDisabled}\n      data-automation-id={automationId}\n      {...props}\n    >\n      {loading && (\n        <div className=\"animate-spin w-4 h-4 border-2 border-current border-t-transparent rounded-full\" />\n      )}\n      {!loading && iconProps?.name && iconPosition === 'left' && <Icon {...iconProps} />}\n      {label}\n      {!loading && iconProps?.name && iconPosition === 'right' && <Icon {...iconProps} />}\n    </button>\n  );\n};\n"],"names":["focusClass","disabledClassNames","primary","secondary","ghost","link","sm","md","lg","classNames","colorPalletClassNames","blue","red","yellow","green","ai","white","Button","type","theme","size","label","iconPosition","disabled","loading","className","iconProps","name","automationId","props","sizeClassName","colorPalletClassName","isDisabled","stroke","React","createElement","_extends","Icon"],"mappings":";;;;;;;;;;;;AAoDA,MAAMA,IAAa,oFACbC,IAA0B;AAAA,EAC9BC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,OAAO;AAAA,EACPC,MAAM;AAAA,EACNC,IAAI;AAAA;AAAA,EACJC,IAAI;AAAA;AAAA,EACJC,IAAI;AAAA;AACN,GACMC,IAAkB;AAAA,EACtBP,SAAS,eAAeF,CAAU;AAAA,EAClCG,WAAW,iBAAiBH,CAAU;AAAA,EACtCI,OAAO,aAAaJ,CAAU;AAAA,EAC9BK,MAAM,kBAAkBL,CAAU;AAAA,EAClCM,IAAI;AAAA;AAAA,EACJC,IAAI;AAAA;AAAA,EACJC,IAAI;AAAA;AACN,GAEME,IAA6B;AAAA,EACjCC,MAAM;AAAA,EACNC,KAAK;AAAA,EACLC,QAAQ;AAAA,EACRC,OAAO;AAAA,EACPC,IAAI;AAAA,EACJC,OAAO;AACT,GAEaC,IAA0BA,CAAC;AAAA,EACtCC,MAAAA,IAAO;AAAA,EACPC,OAAAA,IAAQ;AAAA,EACRC,MAAAA,IAAO;AAAA,EACPC,OAAAA,IAAQ;AAAA,EACRC,cAAAA,IAAe;AAAA,EACfC,UAAAA,IAAW;AAAA,EACXC,SAAAA,IAAU;AAAA,EACVC,WAAAA,IAAY;AAAA,EACZC,WAAAA,IAAY;AAAA,IAAEC,MAAM;AAAA,EAAG;AAAA,EACvBC,cAAAA,IAAe;AAAA,EACf,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAgBZ,MAAS,SAAST,EAAWW,CAAI,IAAI,IACrDW,IAAuBrB,EAAsBS,CAAK,GAClDa,IAAaT,KAAYC;AAE/B,SAAGQ,MACDN,EAAUO,SAAS,0BAGnBC,gBAAAA,EAAAC,cAAA,UAAAC,EAAA;AAAA,IACElB,MAAK;AAAA,IACLO,WAAW,oBAAoBM,CAAoB,IAAID,CAAa,IAAIE,IAAa/B,EAAmBiB,CAAI,IAAIT,EAAWS,CAAI,CAAC,IAAIO,CAAS;AAAA,IAC7IF,UAAUS;AAAAA,IACV,sBAAoBJ;AAAAA,KAChBC,CAAK,GAERL,KACCU,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKV,WAAU;AAAA,EAAkF,CAAA,GAElG,CAACD,KAAWE,GAAWC,QAAQL,MAAiB,UAAUa,gBAAAA,EAAAA,cAACE,GAASX,CAAY,GAChFL,GACA,CAACG,KAAWE,GAAWC,QAAQL,MAAiB,WAAWa,gBAAAA,EAAAA,cAACE,GAASX,CAAY,CAC5E;AAEZ;"}
+{"version":3,"file":"index3.js","sources":["../src/components/AccessibleDiv/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useAccessiblePress, getA11yNameAttributes } from '../../utils/a11y';\nimport type { UseAccessiblePressOptions } from '../../utils/a11y';\nimport type { AccessibleNameInput } from '../../utils/a11y';\n\ntype NativeDivProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onClick' | 'role' | 'tabIndex' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'onKeyDown'\n>;\n\nexport interface AccessibleDivProps extends NativeDivProps, AccessibleNameInput {\n  onClick?: UseAccessiblePressOptions['onClick'];\n  /**\n   * Activation override: called on Enter/Space/virtual click instead of onClick.\n   * Use when keyboard activation needs different behavior than mouse click.\n   * Note: some screen readers (JAWS/NVDA) fire a synthetic click on role=\"button\"\n   * Enter — routed here as a virtual click so keyboard and AT behavior stay consistent.\n   */\n  onKeyboardActivate?: UseAccessiblePressOptions['onKeyboardActivate'];\n  /**\n   * Raw keydown handler for non-activation keys (e.g. arrow keys in a roving focus group).\n   * Enter/Space are filtered out — activation is always routed through onClick/onKeyboardActivate.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n  /** ARIA role. Defaults to 'button'. */\n  role?: string;\n  disabled?: boolean;\n  loading?: boolean;\n  /** Calls e.stopPropagation() before onClick. Useful for nested clickable elements. */\n  stopPropagation?: boolean;\n  /**\n   * Override the computed tabIndex. Use when this element is part of a roving focus group\n   * (e.g. pass -1 for non-focused items, 0 for the focused item).\n   * When disabled, tabIndex is always forced to -1 regardless of this value.\n   */\n  tabIndex?: number;\n  /**\n   * When true or false, sets aria-pressed on the element (e.g. selected/active state).\n   * Omit for non-toggle elements.\n   */\n  isPressed?: boolean;\n  className?: string;\n  id?: string;\n  automationId?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * Accessible clickable container for complex interactive content.\n * Use when children can't fit into se-design Button's label+icon API.\n * For simple icon+label, prefer se-design Button instead.\n */\nexport const AccessibleDiv = forwardRef<HTMLDivElement, AccessibleDivProps>(\n  (\n    {\n      onClick,\n      onKeyboardActivate,\n      onKeyDown,\n      role = 'button',\n      disabled,\n      loading,\n      stopPropagation,\n      tabIndex: tabIndexProp,\n      isPressed,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedBy,\n      automationId,\n      className = '',\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const isInteractive = Boolean(onClick);\n\n    const { pressProps, role: resolvedRole, tabIndex: computedTabIndex } = useAccessiblePress({\n      onClick: isInteractive ? onClick : undefined,\n      onKeyboardActivate,\n      isNative: false,\n      role,\n      disabled,\n      loading,\n      stopPropagation,\n      tabIndex: tabIndexProp,\n      pressed: isPressed\n    });\n\n    // Merge internal Enter/Space handler with caller's onKeyDown (e.g. arrow keys for roving focus)\n    // Skip caller's handler for Enter/Space — activation is routed through onClick/onKeyboardActivate\n    const mergedOnKeyDown = onKeyDown\n      ? (e: React.KeyboardEvent<HTMLDivElement>) => {\n          (pressProps.onKeyDown as React.KeyboardEventHandler<HTMLDivElement> | undefined)?.(e);\n          if (e.key !== 'Enter' && e.key !== ' ') {\n            onKeyDown(e);\n          }\n        }\n      : pressProps.onKeyDown;\n\n    const mergedPressProps = { ...pressProps, onKeyDown: mergedOnKeyDown };\n\n    const interactiveProps = isInteractive\n      ? {\n          role: resolvedRole,\n          tabIndex: computedTabIndex,\n          className: `focus-outline ${className}`.trim(),\n          ...getA11yNameAttributes({ ariaLabel, ariaLabelledBy, ariaDescribedBy }),\n          ...mergedPressProps\n        }\n      : { className };\n\n    return (\n      <div\n        ref={ref}\n        {...interactiveProps}\n        {...(automationId ? { 'data-automation-id': automationId } : {})}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nAccessibleDiv.displayName = 'AccessibleDiv';\n"],"names":["AccessibleDiv","onClick","onKeyboardActivate","onKeyDown","role","disabled","loading","stopPropagation","tabIndex","tabIndexProp","isPressed","ariaLabel","ariaLabelledBy","ariaDescribedBy","automationId","className","children","rest","ref","isInteractive","Boolean","pressProps","resolvedRole","computedTabIndex","useAccessiblePress","undefined","isNative","pressed","mergedOnKeyDown","e","key","mergedPressProps","interactiveProps","trim","getA11yNameAttributes","React","createElement","_extends","displayName"],"mappings":";;;;;;;;;;;;;AAoDO,MAAMA,sBACX,CACE;AAAA,EACEC,SAAAA;AAAAA,EACAC,oBAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,UAAUC;AAAAA,EACVC,WAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,UAAAA;AAAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAgBC,EAAQnB,GAExB;AAAA,IAAEoB,YAAAA;AAAAA,IAAYjB,MAAMkB;AAAAA,IAAcd,UAAUe;AAAAA,EAAAA,IAAqBC,EAAmB;AAAA,IACxFvB,SAASkB,IAAgBlB,IAAUwB;AAAAA,IACnCvB,oBAAAA;AAAAA,IACAwB,UAAU;AAAA,IACVtB,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,UAAUC;AAAAA,IACVkB,SAASjB;AAAAA,EAAAA,CACV,GAIKkB,IAAkBzB,IACpB,CAAC0B,MAA2C;AACzCR,IAAAA,EAAWlB,YAAuE0B,CAAC,GAChFA,EAAEC,QAAQ,WAAWD,EAAEC,QAAQ,OACjC3B,EAAU0B,CAAC;AAAA,EAEf,IACAR,EAAWlB,WAET4B,IAAmB;AAAA,IAAE,GAAGV;AAAAA,IAAYlB,WAAWyB;AAAAA,EAAAA,GAE/CI,IAAmBb,IACrB;AAAA,IACEf,MAAMkB;AAAAA,IACNd,UAAUe;AAAAA,IACVR,WAAW,iBAAiBA,CAAS,GAAGkB,KAAAA;AAAAA,IACxC,GAAGC,EAAsB;AAAA,MAAEvB,WAAAA;AAAAA,MAAWC,gBAAAA;AAAAA,MAAgBC,iBAAAA;AAAAA,IAAAA,CAAiB;AAAA,IACvE,GAAGkB;AAAAA,EAAAA,IAEL;AAAA,IAAEhB,WAAAA;AAAAA,EAAAA;AAEN,SACEoB,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IACEnB,KAAAA;AAAAA,EAAAA,GACIc,GACClB,IAAe;AAAA,IAAE,sBAAsBA;AAAAA,EAAAA,IAAiB,CAAA,GACzDG,CAAI,GAEPD,CACE;AAET,CACF;AAEAhB,EAAcsC,cAAc;"}

package/dist/index30.js

@@ -1,102 +1,140 @@
-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";
+import e, { forwardRef as K } from "react";
+import { Icon as M } from "./index6.js";
+import { Button as d } from "./index4.js";
+import { useStableId as B } from "./index205.js";
+import { getRegionAttributes as Q } from "./index66.js";
+import { useAccessiblePress as U } from "./index67.js";
+import "./index72.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`
+function m() {
+  return m = Object.assign ? Object.assign.bind() : function(a) {
+    for (var t = 1; t < arguments.length; t++) {
+      var r = arguments[t];
+      for (var o in r) ({}).hasOwnProperty.call(r, o) && (a[o] = r[o]);
+    }
+    return a;
+  }, m.apply(null, arguments);
+}
+const n = {
+  bannerCtn: "relative rounded-[12px] flex pr-3.5",
+  bannerContentCtn: "pt-5 pl-6 pb-5 pr-2 flex flex-col gap-2",
+  bannerLinkCta: "text-[#1088e7] cursor-pointer text-base leading-6 hover: text-[#0078d4]",
+  bannerImageCtn: "flex",
+  bannerCloseIconCtn: "absolute top-[12px] right-[12px] cursor-pointer hover:bg-[var(--color-gray-100)] rounded-full p-1 inline-flex items-center justify-center",
+  bannerButton: "self-start"
+}, re = /* @__PURE__ */ K((a, t) => {
+  const {
+    bannerClassName: r,
+    bannerBgColor: o,
+    title: E,
+    titleTag: P = "span",
+    description: b,
+    hasImage: L,
+    imagePosition: s = "right",
+    imageWidth: T = "30%",
+    imageAlt: $ = "",
+    hasCloseIcon: j,
+    closeIconName: A,
+    onClose: w,
+    onBannerClick: i,
+    hasLinkCta: p,
+    onCtaClick: u,
+    onSecondaryCtaClick: R,
+    hasButtonCta: C,
+    buttonType: S = "secondary",
+    ctaText: g,
+    ctaAriaLabel: f,
+    hasSecondaryButtonCta: y = !1,
+    secondaryButtonType: O = "secondary",
+    secondaryCtaText: _,
+    secondaryCtaAriaLabel: z,
+    automationId: F = "",
+    titleId: c,
+    disabledPrimaryButton: W = !1,
+    customContent: x = null
+  } = a, I = i ? "cursor-pointer" : "", h = B(c, "banner-title"), k = B(void 0, "banner-description"), l = Q({
+    titleId: h,
+    descriptionId: b ? k : void 0,
+    isFocusable: !!c
+  }), v = C || p || y, {
+    pressProps: q,
+    role: D,
+    tabIndex: G
+  } = U({
+    isNative: !1,
+    onClick: i && !v ? () => i() : void 0
+  }), H = i ? v ? {
+    onClick: () => i()
+  } : {
+    ...q,
+    role: D,
+    tabIndex: G
+  } : {}, N = () => L && /* @__PURE__ */ e.createElement("div", {
+    className: `${n.bannerImageCtn} ${I} banner-image-ctn ${s === "right" ? "mr-5 ml-0 justify-end" : "ml-5 mr-0 justify-start"} min-h-full`,
+    style: {
+      width: T
+    },
+    "aria-hidden": "true"
   }, /* @__PURE__ */ e.createElement("img", {
-    src: p,
-    alt: "widget-image"
+    src: a.bannerImage,
+    alt: $,
+    className: "max-w-[initial] h-[initial] max-h-[150px] object-contain"
   }));
   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));
-};
+    ref: t,
+    className: `${n.bannerCtn} ${I} ${r} banner-ctn`,
+    style: {
+      backgroundColor: o
+    },
+    "data-automation-id": F,
+    role: l.role,
+    "aria-labelledby": l["aria-labelledby"],
+    "aria-describedby": l["aria-describedby"],
+    tabIndex: l.tabIndex
+  }, s === "left" && N(), /* @__PURE__ */ e.createElement("div", m({
+    className: `${n.bannerContentCtn} w-[100%] banner-content-ctn`
+  }, H), /* @__PURE__ */ e.createElement(P, {
+    id: h,
+    className: "banner-title",
+    tabIndex: c ? -1 : void 0
+  }, E), x ? /* @__PURE__ */ e.createElement(e.Fragment, null, x) : /* @__PURE__ */ e.createElement("span", {
+    id: k,
+    className: "banner-description"
+  }, b), /* @__PURE__ */ e.createElement("div", {
+    className: "flex gap-3",
+    onClick: (J) => J.stopPropagation()
+  }, p && /* @__PURE__ */ e.createElement(d, {
+    type: "link",
+    className: n.bannerLinkCta,
+    onClick: u,
+    label: g,
+    ariaLabel: f
+  }), C && /* @__PURE__ */ e.createElement(d, {
+    type: S,
+    size: "sm",
+    label: g,
+    onClick: u,
+    className: n?.bannerButton,
+    "data-automation-id": "banner-main-cta",
+    ariaLabel: f,
+    disabled: W
+  }), y && /* @__PURE__ */ e.createElement(d, {
+    type: O,
+    size: "sm",
+    label: _,
+    onClick: R,
+    className: n?.secondaryBannerButton,
+    "data-automation-id": "banner-secondary-cta",
+    ariaLabel: z
+  }))), s === "right" && N(), j && /* @__PURE__ */ e.createElement(M, {
+    name: A,
+    className: n.bannerCloseIconCtn,
+    onClick: w,
+    ariaLabel: "Close banner",
+    shouldStopPropagation: !0
+  }));
+});
 export {
-  B as Widget,
-  B as default
+  re as Banner
 };
 //# 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","createElement","label","bgColor","textColor","fontWeight","renderCTA","React","Fragment","type","size","onClick","renderImage","src","alt","includes","name"],"mappings":"AA0BA,OAAAA,OAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,SAAA,SAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,WAAW;AAAA,EACXC,gBAAgB;AAAA,EAChBC,gBAAgB;AAAA,EAChBC,aAAa;AAAA,EACbC,mBAAmB;AAAA,EACnBC,eAAe;AAAA,EACfC,iBAAiB;AAAA,EACjBC,aAAa;AAAA,EACbC,gBAAgB;AAAA,EAChBC,gBAAgB;AAAA,EAChBC,aAAa;AAAA,EACbC,wBAAwB;AAAA,EACxBC,iBAAiB;AAAA,EACjBC,mBAAmB;AAAA,EACnBC,wBAAwB;AAAA,EACxBC,8BAA8B;AAChC,GAEaC,IAA0BA,CAAC;AAAA,EACtCC,iBAAAA,IAAkB;AAAA,EAClBC,YAAAA,IAAa;AAAA,EACbf,aAAAA,IAAc;AAAA,EACdC,mBAAAA,IAAoB;AAAA,EACpBe,aAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,cAAAA,IAAe;AAAA,EACfC,YAAAA,IAAa;AAAA,EACbC,SAAAA,IAAU;AAAA,EACVC,UAAAA,IAAW;AAAA,EACXC,WAAAA,IAAY;AAAA,EACZC,eAAAA,IAAgB;AAAA,EAChBC,YAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACApB,gBAAAA;AACF,MAAM;AAEJ,QAAMqB,IAAcN,KAClBO,gBAAAA,EAAAA,cAAClC,GAAK;AAAA,IACJmC,OAAOP;AAAAA,IACP1B,WAAWA,EAAUQ;AAAAA,IACrB0B,SAAQ;AAAA,IACRC,WAAU;AAAA,IACVC,YAAW;AAAA,EAAA,CACZ,GAGGC,KAAad,KAAcD,MAC/BU,gBAAAA,EAAAA,cAACM,EAAMC,UAAQ,MACZhB,KAAcS,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhC,WAAWA,EAAUM;AAAAA,KAAgBkB,CAAc,GACvEF,KAAgBgB,gBAAAA,EAAAN,cAACnC,GAAM;AAAA,IAAC2C,MAAMb;AAAAA,IAAec,MAAK;AAAA,IAAKR,OAAOT;AAAAA,IAASxB,WAAW,GAAGA,EAAUO,eAAe;AAAA,IAAamC,SAASd;AAAAA,EAAa,CAAA,CACpI,GAGZe,IAActB,KAClBW,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKhC,WAAW,GAAGA,EAAUE,cAAc;AAAA,EAAA,GACzC8B,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKY,KAAKxB;AAAAA,IAAayB,KAAI;AAAA,EAAe,CAAA,CACvC;AAILP,SAAAA,gBAAAA,EAAAN,cAAA,OAAA;AAAA,IAAKhC,WAAW,GAAGA,EAAUC,SAAS,IAAIiB,CAAe;AAAA,IAAewB,SAASb;AAAAA,EAAAA,GAC9EV,MAAe,aAAawB,GAC7BL,gBAAAA,EAAAN,cAAA,OAAA;AAAA,IAAKhC,WAAWA,EAAUG;AAAAA,EAAAA,GACvBgB,MAAe,aAAaY,GAC5BZ,MAAe,qBAAqBmB,gBAAAA,EAAAN,cAAA,QAAA;AAAA,IAAMhC,WAAW,GAAGA,EAAUI,WAAW;AAAA,EAAkBA,GAAAA,CAAkB,GAEhH,CAAC,aAAa,SAAS,EAAE0C,SAAS3B,CAAU,KAC5Ca,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhC,WAAW,GAAGA,EAAUK,iBAAiB;AAAA,EAAA,GAAwBA,CAAwB,GAGhGc,MAAe,aACdmB,gBAAAA,EAAAN,cAAA,OAAA;AAAA,IAAKhC,WAAWA,EAAUS;AAAAA,EACvBC,GAAAA,KACDsB,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKhC,WAAW,GAAGA,EAAUY,sBAAsB;AAAA,EAAA,GACjDoB,gBAAAA,EAAAA,cAACjC,GAAI;AAAA,IAACgD,MAAK;AAAA,IAAS/C,WAAU;AAAA,EAAA,CAAsB,GACpDgC,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhC,WAAWA,EAAUU;AAAAA,EAAAA,GAAiBA,CAAqB,CAC9D,GAEJoB,KACEQ,gBAAAA,EAAAN,cAAA,OAAA;AAAA,IAAKhC,WAAW,GAAGA,EAAUa,eAAe;AAAA,EAAA,GAC3CmB,gBAAAA,EAAAA,cAACjC,GAAI;AAAA,IAACgD,MAAK;AAAA,IAAQ/C,WAAU;AAAA,EAAA,CAAsB,GACnDgC,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhC,WAAWA,EAAUW;AAAAA,EAAAA,GAAcmB,CAAsB,CAC5D,CAEJ,GAGNX,MAAe,oBACda,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKhC,WAAWA,EAAUc;AAAAA,EAAAA,GACxBkB,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKhC,WAAWA,EAAUe;AAAAA,EAAAA,CAAyB,GACnDiB,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKhC,WAAWA,EAAUgB;AAAAA,EAAAA,GACxBgB,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhC,WAAW,GAAGA,EAAUI,WAAW;AAAA,EAAkBA,GAAAA,CAAkB,GAC7EkC,gBAAAA,EAAAN,cAAA,QAAA;AAAA,IAAMhC,WAAW,GAAGA,EAAUK,iBAAiB;AAAA,KAAwBA,CAAwB,GAC9FgC,CACE,CACF,IAELA,CAEC,CACF;AAET;"}
+{"version":3,"file":"index30.js","sources":["../src/components/Banner/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { Icon } from 'components/Icon';\nimport { Button } from 'components/Button';\nimport { useStableId } from '../../utils/useStableId';\nimport { useAccessiblePress } from '../../utils/a11y';\nimport { getRegionAttributes } from '../../utils/a11y/regionAttributes';\nimport './style.scss';\n\nexport interface BannerProps {\n  bannerClassName?: string | '';\n  bannerBgColor?: string | '';\n  title: string | '';\n  titleTag?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  description: string | '';\n  customContent?: React.ReactNode;\n  hasImage?: boolean | false;\n  imagePosition?: 'left' | 'right' | '';\n  imageWidth?: string | '30%';\n  imageAlt?: string | '';\n  bannerImage: string | '';\n  hasCloseIcon?: boolean | false;\n  closeIconName: string | '';\n  onClose: () => void | (() => {});\n  onBannerClick?: () => void | (() => {});\n  hasButtonCta?: boolean | false;\n  hasSecondaryButtonCta?: boolean | false;\n  buttonType?: 'primary' | 'secondary' | 'link';\n  secondaryButtonType?: 'primary' | 'secondary' | 'ghost' | 'link';\n  hasLinkCta?: boolean | false;\n  ctaText: string | '';\n  secondaryCtaText: string | '';\n  onCtaClick: () => void | (() => {});\n  onSecondaryCtaClick: () => void | (() => {});\n  /**\n   * Accessible name for primary CTA button (screen reader only, if different from visible label).\n   */\n  ctaAriaLabel?: string;\n  /**\n   * Accessible name for secondary CTA button (screen reader only, if different from visible label).\n   */\n  secondaryCtaAriaLabel?: string;\n  automationId?: string;\n  // Optional title ID for external control (e.g., focus management)\n  titleId?: string;\n  disabledPrimaryButton?: boolean;\n}\n\nconst classNames: Map = {\n  bannerCtn: `relative rounded-[12px] flex pr-3.5`,\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 hover: text-[#0078d4]',\n  bannerImageCtn: 'flex',\n  bannerCloseIconCtn:\n    'absolute top-[12px] right-[12px] cursor-pointer hover:bg-[var(--color-gray-100)] rounded-full p-1 inline-flex items-center justify-center',\n  bannerButton: 'self-start'\n};\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>((props, ref) => {\n  const {\n    bannerClassName,\n    bannerBgColor,\n    title,\n    titleTag: TitleTag = 'span',\n    description,\n    hasImage,\n    imagePosition = 'right',\n    imageWidth = '30%',\n    imageAlt = '',\n    hasCloseIcon,\n    closeIconName,\n    onClose,\n    onBannerClick,\n    hasLinkCta,\n    onCtaClick,\n    onSecondaryCtaClick,\n    hasButtonCta,\n    buttonType = 'secondary',\n    ctaText,\n    ctaAriaLabel,\n    hasSecondaryButtonCta = false,\n    secondaryButtonType = 'secondary',\n    secondaryCtaText,\n    secondaryCtaAriaLabel,\n    automationId = '',\n    titleId: providedTitleId,\n    disabledPrimaryButton = false,\n    customContent = null\n  } = props;\n\n  const isClickableClass = onBannerClick ? 'cursor-pointer' : '';\n  const titleId = useStableId(providedTitleId, 'banner-title');\n  const descriptionId = useStableId(undefined, 'banner-description');\n\n  const regionAttributes = getRegionAttributes({\n    titleId,\n    descriptionId: description ? descriptionId : undefined,\n    isFocusable: !!providedTitleId\n  });\n\n  // When CTA buttons exist, they are the keyboard-accessible targets — the content area\n  // only gets onClick for mouse users (no role/tabIndex to avoid nesting interactive elements).\n  // When no CTA buttons exist, the content area is the sole interactive path and gets full a11y.\n  const hasCta = hasButtonCta || hasLinkCta || hasSecondaryButtonCta;\n\n  const { pressProps: bannerContentPressProps, role: bannerContentRole, tabIndex: bannerContentTabIndex } =\n    useAccessiblePress({\n      isNative: false,\n      onClick: onBannerClick && !hasCta ? () => onBannerClick() : undefined\n    });\n\n  const bannerContentClickableProps = onBannerClick\n    ? hasCta\n      ? { onClick: () => onBannerClick() }\n      : {\n          ...bannerContentPressProps,\n          role: bannerContentRole,\n          tabIndex: bannerContentTabIndex\n        }\n    : {};\n\n  const renderImage = () =>\n    hasImage && (\n      <div\n        className={`${classNames.bannerImageCtn} ${isClickableClass} banner-image-ctn ${imagePosition === 'right' ? 'mr-5 ml-0 justify-end' : 'ml-5 mr-0 justify-start'} min-h-full`}\n        style={{ width: imageWidth }}\n        aria-hidden=\"true\"\n      >\n        <img src={props.bannerImage} alt={imageAlt} className=\"max-w-[initial] h-[initial] max-h-[150px] object-contain\" />\n      </div>\n    );\n\n  return (\n    <div \n      ref={ref}\n      className={`${classNames.bannerCtn} ${isClickableClass} ${bannerClassName} banner-ctn`} \n      style={{ backgroundColor: bannerBgColor }} \n      data-automation-id={automationId}\n      role={regionAttributes.role}\n      aria-labelledby={regionAttributes['aria-labelledby']}\n      aria-describedby={regionAttributes['aria-describedby']}\n      tabIndex={regionAttributes.tabIndex}\n    >\n      {imagePosition === 'left' && renderImage()}\n      <div \n        className={`${classNames.bannerContentCtn} w-[100%] banner-content-ctn`} \n        {...bannerContentClickableProps}\n      >\n        <TitleTag id={titleId} className=\"banner-title\" tabIndex={providedTitleId ? -1 : undefined}>{title}</TitleTag>\n        {customContent ? <>{customContent}</> :\n        <span id={descriptionId} className=\"banner-description\">{description}</span>}\n        <div className=\"flex gap-3\" onClick={(e) => e.stopPropagation()}>\n          {hasLinkCta && (\n            <Button\n              type=\"link\"\n              className={classNames.bannerLinkCta}\n              onClick={onCtaClick}\n              label={ctaText}\n              ariaLabel={ctaAriaLabel}\n            />\n          )}\n          {hasButtonCta && (\n            <Button\n              type={buttonType}\n              size=\"sm\"\n              label={ctaText}\n              onClick={onCtaClick}\n              className={classNames?.bannerButton}\n              data-automation-id=\"banner-main-cta\"\n              ariaLabel={ctaAriaLabel}\n              disabled={disabledPrimaryButton}\n            />\n          )}\n          {hasSecondaryButtonCta && (\n            <Button\n              type={secondaryButtonType}\n              size=\"sm\"\n              label={secondaryCtaText}\n              onClick={onSecondaryCtaClick}\n              className={classNames?.secondaryBannerButton}\n              data-automation-id=\"banner-secondary-cta\"\n              ariaLabel={secondaryCtaAriaLabel}\n            />\n          )}\n        </div>\n      </div>\n      {imagePosition === 'right' && renderImage()}\n      {hasCloseIcon && (\n        <Icon\n          name={closeIconName}\n          className={classNames.bannerCloseIconCtn}\n          onClick={onClose}\n          ariaLabel=\"Close banner\"\n          shouldStopPropagation\n        />\n      )}\n    </div>\n  );\n});\n"],"names":["classNames","bannerCtn","bannerContentCtn","bannerLinkCta","bannerImageCtn","bannerCloseIconCtn","bannerButton","Banner","forwardRef","props","ref","bannerClassName","bannerBgColor","title","titleTag","TitleTag","description","hasImage","imagePosition","imageWidth","imageAlt","hasCloseIcon","closeIconName","onClose","onBannerClick","hasLinkCta","onCtaClick","onSecondaryCtaClick","hasButtonCta","buttonType","ctaText","ctaAriaLabel","hasSecondaryButtonCta","secondaryButtonType","secondaryCtaText","secondaryCtaAriaLabel","automationId","titleId","providedTitleId","disabledPrimaryButton","customContent","isClickableClass","useStableId","descriptionId","undefined","regionAttributes","getRegionAttributes","isFocusable","hasCta","pressProps","bannerContentPressProps","role","bannerContentRole","tabIndex","bannerContentTabIndex","useAccessiblePress","isNative","onClick","bannerContentClickableProps","renderImage","React","createElement","className","style","width","src","bannerImage","alt","backgroundColor","_extends","id","Fragment","e","stopPropagation","Button","type","label","ariaLabel","size","disabled","secondaryBannerButton","Icon","name","shouldStopPropagation"],"mappings":"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"}