se-design 1.0.77-dev-v1 → 1.0.77

package/dist/components/Banner/index.d.ts

@@ -5,7 +5,6 @@ export interface BannerProps {
     title: string | '';
     titleTag?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     description: string | '';
-    hasCustomContent?: boolean | false;
     customContent?: React.ReactNode;
     hasImage?: boolean | false;
     imagePosition?: 'left' | 'right' | '';

package/dist/index30.js

@@ -1,9 +1,9 @@
-import e, { forwardRef as K } from "react";
-import { Icon as M } from "./index6.js";
+import e, { forwardRef as J } from "react";
+import { Icon as K } from "./index6.js";
 import { Button as m } from "./index4.js";
-import { useStableId as I } from "./index199.js";
-import { getRegionAttributes as Q } from "./index66.js";
-import { useAccessiblePress as U } from "./index67.js";
+import { useStableId as h } from "./index199.js";
+import { getRegionAttributes as M } from "./index66.js";
+import { useAccessiblePress as Q } from "./index67.js";
 import "./index72.js";
 /* empty css         */
 function b() {
@@ -22,118 +22,117 @@ const n = {
   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) => {
+}, te = /* @__PURE__ */ J((a, t) => {
   const {
     bannerClassName: r,
     bannerBgColor: o,
-    title: h,
-    titleTag: k = "span",
+    title: k,
+    titleTag: v = "span",
     description: d,
-    hasImage: v,
+    hasImage: N,
     imagePosition: s = "right",
-    imageWidth: N = "30%",
-    imageAlt: B = "",
-    hasCloseIcon: E,
-    closeIconName: P,
-    onClose: L,
-    onBannerClick: l,
-    hasLinkCta: T,
+    imageWidth: B = "30%",
+    imageAlt: E = "",
+    hasCloseIcon: P,
+    closeIconName: L,
+    onClose: T,
+    onBannerClick: i,
+    hasLinkCta: $,
     onCtaClick: p,
-    onSecondaryCtaClick: $,
-    hasButtonCta: j,
-    buttonType: A = "secondary",
-    ctaText: C,
-    ctaAriaLabel: u,
-    hasSecondaryButtonCta: w = !1,
-    secondaryButtonType: R = "secondary",
-    secondaryCtaText: S,
-    secondaryCtaAriaLabel: O,
-    automationId: _ = "",
+    onSecondaryCtaClick: j,
+    hasButtonCta: A,
+    buttonType: w = "secondary",
+    ctaText: u,
+    ctaAriaLabel: C,
+    hasSecondaryButtonCta: R = !1,
+    secondaryButtonType: S = "secondary",
+    secondaryCtaText: O,
+    secondaryCtaAriaLabel: _,
+    automationId: z = "",
     titleId: c,
-    disabledPrimaryButton: z = !1,
-    hasCustomContent: F = !1,
-    customContent: W = null
-  } = a, g = l ? "cursor-pointer" : "", f = I(c, "banner-title"), y = I(void 0, "banner-description"), i = Q({
-    titleId: f,
-    descriptionId: d ? y : void 0,
+    disabledPrimaryButton: F = !1,
+    customContent: g = null
+  } = a, f = i ? "cursor-pointer" : "", y = h(c, "banner-title"), x = h(void 0, "banner-description"), l = M({
+    titleId: y,
+    descriptionId: d ? x : void 0,
     isFocusable: !!c
   }), {
-    pressProps: q,
-    role: D,
-    tabIndex: G
-  } = U({
+    pressProps: W,
+    role: q,
+    tabIndex: D
+  } = Q({
     isNative: !1,
-    onClick: l ? () => l() : void 0
-  }), H = l ? {
-    ...q,
-    role: D,
-    tabIndex: G
-  } : {}, x = () => v && /* @__PURE__ */ e.createElement("div", {
-    className: `${n.bannerImageCtn} ${g} banner-image-ctn ${s === "right" ? "mr-5 ml-0 justify-end" : "ml-5 mr-0 justify-start"} min-h-full`,
+    onClick: i ? () => i() : void 0
+  }), G = i ? {
+    ...W,
+    role: q,
+    tabIndex: D
+  } : {}, I = () => N && /* @__PURE__ */ e.createElement("div", {
+    className: `${n.bannerImageCtn} ${f} banner-image-ctn ${s === "right" ? "mr-5 ml-0 justify-end" : "ml-5 mr-0 justify-start"} min-h-full`,
     style: {
-      width: N
+      width: B
     },
-    onClick: l
+    onClick: i
   }, /* @__PURE__ */ e.createElement("img", {
     src: a.bannerImage,
-    alt: B,
+    alt: E,
     className: "max-w-[initial] h-[initial] max-h-[150px] object-contain"
   }));
   return /* @__PURE__ */ e.createElement("div", {
     ref: t,
-    className: `${n.bannerCtn} ${g} ${r} banner-ctn`,
+    className: `${n.bannerCtn} ${f} ${r} banner-ctn`,
     style: {
       backgroundColor: o
     },
-    "data-automation-id": _,
-    role: i.role,
-    "aria-labelledby": i["aria-labelledby"],
-    "aria-describedby": i["aria-describedby"],
-    tabIndex: i.tabIndex
-  }, s === "left" && x(), /* @__PURE__ */ e.createElement("div", b({
+    "data-automation-id": z,
+    role: l.role,
+    "aria-labelledby": l["aria-labelledby"],
+    "aria-describedby": l["aria-describedby"],
+    tabIndex: l.tabIndex
+  }, s === "left" && I(), /* @__PURE__ */ e.createElement("div", b({
     className: `${n.bannerContentCtn} w-[100%] banner-content-ctn`
-  }, H), /* @__PURE__ */ e.createElement(k, {
-    id: f,
+  }, G), /* @__PURE__ */ e.createElement(v, {
+    id: y,
     className: "banner-title",
     tabIndex: c ? -1 : void 0
-  }, h), F ? /* @__PURE__ */ e.createElement(e.Fragment, null, W) : /* @__PURE__ */ e.createElement("span", {
-    id: y,
+  }, k), g ? /* @__PURE__ */ e.createElement(e.Fragment, null, g) : /* @__PURE__ */ e.createElement("span", {
+    id: x,
     className: "banner-description"
   }, d), /* @__PURE__ */ e.createElement("div", {
     className: "flex gap-3",
-    onClick: (J) => J.stopPropagation()
-  }, T && /* @__PURE__ */ e.createElement(m, {
+    onClick: (H) => H.stopPropagation()
+  }, $ && /* @__PURE__ */ e.createElement(m, {
     type: "link",
     className: n.bannerLinkCta,
     onClick: p,
-    label: C,
-    ariaLabel: u
-  }), j && /* @__PURE__ */ e.createElement(m, {
-    type: A,
+    label: u,
+    ariaLabel: C
+  }), A && /* @__PURE__ */ e.createElement(m, {
+    type: w,
     size: "sm",
-    label: C,
+    label: u,
     onClick: p,
     className: n?.bannerButton,
     "data-automation-id": "banner-main-cta",
-    ariaLabel: u,
-    disabled: z
-  }), w && /* @__PURE__ */ e.createElement(m, {
-    type: R,
+    ariaLabel: C,
+    disabled: F
+  }), R && /* @__PURE__ */ e.createElement(m, {
+    type: S,
     size: "sm",
-    label: S,
-    onClick: $,
+    label: O,
+    onClick: j,
     className: n?.secondaryBannerButton,
     "data-automation-id": "banner-secondary-cta",
-    ariaLabel: O
-  }))), s === "right" && x(), E && /* @__PURE__ */ e.createElement(M, {
-    name: P,
+    ariaLabel: _
+  }))), s === "right" && I(), P && /* @__PURE__ */ e.createElement(K, {
+    name: L,
     className: n.bannerCloseIconCtn,
-    onClick: L,
+    onClick: T,
     ariaLabel: "Close banner",
     shouldStopPropagation: !0
   }));
 });
 export {
-  re as Banner
+  te as Banner
 };
 //# sourceMappingURL=index30.js.map

package/dist/index30.js.map

@@ -1 +1 @@
-{"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  hasCustomContent?: boolean | false;\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    hasCustomContent = 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 banner is clickable, make the content area keyboard-activatable (Enter/Space).\n  // We intentionally keep this as an extra tab stop (per dashboard banner behavior).\n  const { pressProps: bannerContentPressProps, role: bannerContentRole, tabIndex: bannerContentTabIndex } =\n    useAccessiblePress({\n      isNative: false,\n      onClick: onBannerClick ? () => onBannerClick() : undefined\n    });\n\n  const bannerContentClickableProps = 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        onClick={onBannerClick}\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        {hasCustomContent ? <>{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","hasCustomContent","customContent","isClickableClass","useStableId","descriptionId","undefined","regionAttributes","getRegionAttributes","isFocusable","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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"}
+{"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 banner is clickable, make the content area keyboard-activatable (Enter/Space).\n  // We intentionally keep this as an extra tab stop (per dashboard banner behavior).\n  const { pressProps: bannerContentPressProps, role: bannerContentRole, tabIndex: bannerContentTabIndex } =\n    useAccessiblePress({\n      isNative: false,\n      onClick: onBannerClick ? () => onBannerClick() : undefined\n    });\n\n  const bannerContentClickableProps = 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        onClick={onBannerClick}\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","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":";;;;;;;;;;;;;;;;;AAgDA,MAAMA,IAAkB;AAAA,EACtBC,WAAW;AAAA,EACXC,kBAAkB;AAAA,EAClBC,eAAe;AAAA,EACfC,gBAAgB;AAAA,EAChBC,oBACE;AAAA,EACFC,cAAc;AAChB,GAEaC,KAASC,gBAAAA,EAAwC,CAACC,GAAOC,MAAQ;AAC5E,QAAM;AAAA,IACJC,iBAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,UAAUC,IAAW;AAAA,IACrBC,aAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,eAAAA,IAAgB;AAAA,IAChBC,YAAAA,IAAa;AAAA,IACbC,UAAAA,IAAW;AAAA,IACXC,cAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,qBAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,YAAAA,IAAa;AAAA,IACbC,SAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,uBAAAA,IAAwB;AAAA,IACxBC,qBAAAA,IAAsB;AAAA,IACtBC,kBAAAA;AAAAA,IACAC,uBAAAA;AAAAA,IACAC,cAAAA,IAAe;AAAA,IACfC,SAASC;AAAAA,IACTC,uBAAAA,IAAwB;AAAA,IACxBC,eAAAA,IAAgB;AAAA,EAAA,IACd/B,GAEEgC,IAAmBjB,IAAgB,mBAAmB,IACtDa,IAAUK,EAAYJ,GAAiB,cAAc,GACrDK,IAAgBD,EAAYE,QAAW,oBAAoB,GAE3DC,IAAmBC,EAAoB;AAAA,IAC3CT,SAAAA;AAAAA,IACAM,eAAe3B,IAAc2B,IAAgBC;AAAAA,IAC7CG,aAAa,CAAC,CAACT;AAAAA,EAAAA,CAChB,GAIK;AAAA,IAAEU,YAAYC;AAAAA,IAAyBC,MAAMC;AAAAA,IAAmBC,UAAUC;AAAAA,EAAAA,IAC9EC,EAAmB;AAAA,IACjBC,UAAU;AAAA,IACVC,SAAShC,IAAgB,MAAMA,MAAkBoB;AAAAA,EAAAA,CAClD,GAEGa,IAA8BjC,IAChC;AAAA,IACE,GAAGyB;AAAAA,IACHC,MAAMC;AAAAA,IACNC,UAAUC;AAAAA,EAAAA,IAEZ,CAAA,GAEEK,IAAcA,MAClBzC,KACE0C,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,GAAG7D,EAAWI,cAAc,IAAIqC,CAAgB,qBAAqBvB,MAAkB,UAAU,0BAA0B,yBAAyB;AAAA,IAC/J4C,OAAO;AAAA,MAAEC,OAAO5C;AAAAA,IAAAA;AAAAA,IAChBqC,SAAShC;AAAAA,EAAAA,GAETmC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKI,KAAKvD,EAAMwD;AAAAA,IAAaC,KAAK9C;AAAAA,IAAUyC,WAAU;AAAA,EAAA,CAA4D,CAC/G;AAGT,SACEF,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACElD,KAAAA;AAAAA,IACAmD,WAAW,GAAG7D,EAAWC,SAAS,IAAIwC,CAAgB,IAAI9B,CAAe;AAAA,IACzEmD,OAAO;AAAA,MAAEK,iBAAiBvD;AAAAA,IAAAA;AAAAA,IAC1B,sBAAoBwB;AAAAA,IACpBc,MAAML,EAAiBK;AAAAA,IACvB,mBAAiBL,EAAiB,iBAAiB;AAAA,IACnD,oBAAkBA,EAAiB,kBAAkB;AAAA,IACrDO,UAAUP,EAAiBO;AAAAA,EAAAA,GAE1BlC,MAAkB,UAAUwC,EAAAA,GAC7BC,gBAAAA,EAAAC,cAAA,OAAAQ,EAAA;AAAA,IACEP,WAAW,GAAG7D,EAAWE,gBAAgB;AAAA,EAAA,GACrCuD,CAA2B,GAE/BE,gBAAAA,EAAAC,cAAC7C,GAAQ;AAAA,IAACsD,IAAIhC;AAAAA,IAASwB,WAAU;AAAA,IAAeT,UAAUd,IAAkB,KAAKM;AAAAA,EAAAA,GAAY/B,CAAgB,GAC5G2B,IAAgBmB,gBAAAA,EAAAC,cAAAD,EAAAW,UAAA,MAAG9B,CAAgB,IACpCmB,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMS,IAAI1B;AAAAA,IAAekB,WAAU;AAAA,EAAA,GAAsB7C,CAAkB,GAC3E2C,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAaL,SAAUe,CAAAA,MAAMA,EAAEC,gBAAAA;AAAAA,EAAgB,GAC3D/C,KACCkC,gBAAAA,EAAAC,cAACa,GAAM;AAAA,IACLC,MAAK;AAAA,IACLb,WAAW7D,EAAWG;AAAAA,IACtBqD,SAAS9B;AAAAA,IACTiD,OAAO7C;AAAAA,IACP8C,WAAW7C;AAAAA,EAAAA,CACZ,GAEFH,KACC+B,gBAAAA,EAAAC,cAACa,GAAM;AAAA,IACLC,MAAM7C;AAAAA,IACNgD,MAAK;AAAA,IACLF,OAAO7C;AAAAA,IACP0B,SAAS9B;AAAAA,IACTmC,WAAW7D,GAAYM;AAAAA,IACvB,sBAAmB;AAAA,IACnBsE,WAAW7C;AAAAA,IACX+C,UAAUvC;AAAAA,EAAAA,CACX,GAEFP,KACC2B,gBAAAA,EAAAC,cAACa,GAAM;AAAA,IACLC,MAAMzC;AAAAA,IACN4C,MAAK;AAAA,IACLF,OAAOzC;AAAAA,IACPsB,SAAS7B;AAAAA,IACTkC,WAAW7D,GAAY+E;AAAAA,IACvB,sBAAmB;AAAA,IACnBH,WAAWzC;AAAAA,EAAAA,CACZ,CAEA,CACF,GACJjB,MAAkB,WAAWwC,EAAAA,GAC7BrC,KACCsC,gBAAAA,EAAAC,cAACoB,GAAI;AAAA,IACHC,MAAM3D;AAAAA,IACNuC,WAAW7D,EAAWK;AAAAA,IACtBmD,SAASjC;AAAAA,IACTqD,WAAU;AAAA,IACVM,uBAAqB;AAAA,EAAA,CACtB,CAEA;AAET,CAAC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "se-design",
-  "version": "1.0.77-dev-v1",
+  "version": "1.0.77",
   "type": "module",
   "module": "dist/index.js",
   "exports": {