se-design 1.0.76 → 1.0.77
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/style.css +1 -1
- package/dist/components/Banner/index.d.ts +1 -0
- package/dist/components/Paywall/index.d.ts +1 -1
- package/dist/index197.js.map +1 -1
- package/dist/index30.js +82 -81
- package/dist/index30.js.map +1 -1
- package/dist/index32.js +11 -10
- package/dist/index42.js +8 -7
- package/dist/index43.js +7 -6
- package/dist/index55.js +17 -16
- package/dist/index65.js +39 -38
- package/dist/index65.js.map +1 -1
- package/dist/index7.js +8 -7
- package/package.json +1 -1
package/dist/index30.js
CHANGED
|
@@ -1,137 +1,138 @@
|
|
|
1
|
-
import e, { forwardRef as
|
|
2
|
-
import { Icon as
|
|
3
|
-
import { Button as
|
|
4
|
-
import { useStableId as
|
|
5
|
-
import { getRegionAttributes as
|
|
6
|
-
import { useAccessiblePress as
|
|
1
|
+
import e, { forwardRef as J } from "react";
|
|
2
|
+
import { Icon as K } from "./index6.js";
|
|
3
|
+
import { Button as m } from "./index4.js";
|
|
4
|
+
import { useStableId as h } from "./index199.js";
|
|
5
|
+
import { getRegionAttributes as M } from "./index66.js";
|
|
6
|
+
import { useAccessiblePress as Q } from "./index67.js";
|
|
7
7
|
import "./index72.js";
|
|
8
8
|
/* empty css */
|
|
9
|
-
function
|
|
10
|
-
return
|
|
9
|
+
function b() {
|
|
10
|
+
return b = Object.assign ? Object.assign.bind() : function(a) {
|
|
11
11
|
for (var t = 1; t < arguments.length; t++) {
|
|
12
12
|
var r = arguments[t];
|
|
13
|
-
for (var o in r) ({}).hasOwnProperty.call(r, o) && (
|
|
13
|
+
for (var o in r) ({}).hasOwnProperty.call(r, o) && (a[o] = r[o]);
|
|
14
14
|
}
|
|
15
|
-
return
|
|
16
|
-
},
|
|
15
|
+
return a;
|
|
16
|
+
}, b.apply(null, arguments);
|
|
17
17
|
}
|
|
18
|
-
const
|
|
18
|
+
const n = {
|
|
19
19
|
bannerCtn: "relative rounded-[12px] flex pr-3.5",
|
|
20
20
|
bannerContentCtn: "pt-5 pl-6 pb-5 pr-2 flex flex-col gap-2",
|
|
21
21
|
bannerLinkCta: "text-[#1088e7] cursor-pointer text-base leading-6 hover: text-[#0078d4]",
|
|
22
22
|
bannerImageCtn: "flex",
|
|
23
23
|
bannerCloseIconCtn: "absolute top-[12px] right-[12px] cursor-pointer hover:bg-[var(--color-gray-100)] rounded-full p-1 inline-flex items-center justify-center",
|
|
24
24
|
bannerButton: "self-start"
|
|
25
|
-
},
|
|
25
|
+
}, te = /* @__PURE__ */ J((a, t) => {
|
|
26
26
|
const {
|
|
27
27
|
bannerClassName: r,
|
|
28
28
|
bannerBgColor: o,
|
|
29
|
-
title:
|
|
30
|
-
titleTag:
|
|
31
|
-
description:
|
|
32
|
-
hasImage:
|
|
29
|
+
title: k,
|
|
30
|
+
titleTag: v = "span",
|
|
31
|
+
description: d,
|
|
32
|
+
hasImage: N,
|
|
33
33
|
imagePosition: s = "right",
|
|
34
|
-
imageWidth:
|
|
35
|
-
imageAlt:
|
|
36
|
-
hasCloseIcon:
|
|
37
|
-
closeIconName:
|
|
38
|
-
onClose:
|
|
34
|
+
imageWidth: B = "30%",
|
|
35
|
+
imageAlt: E = "",
|
|
36
|
+
hasCloseIcon: P,
|
|
37
|
+
closeIconName: L,
|
|
38
|
+
onClose: T,
|
|
39
39
|
onBannerClick: i,
|
|
40
|
-
hasLinkCta:
|
|
40
|
+
hasLinkCta: $,
|
|
41
41
|
onCtaClick: p,
|
|
42
|
-
onSecondaryCtaClick:
|
|
43
|
-
hasButtonCta:
|
|
44
|
-
buttonType:
|
|
45
|
-
ctaText:
|
|
46
|
-
ctaAriaLabel:
|
|
47
|
-
hasSecondaryButtonCta:
|
|
48
|
-
secondaryButtonType:
|
|
49
|
-
secondaryCtaText:
|
|
50
|
-
secondaryCtaAriaLabel:
|
|
51
|
-
automationId:
|
|
42
|
+
onSecondaryCtaClick: j,
|
|
43
|
+
hasButtonCta: A,
|
|
44
|
+
buttonType: w = "secondary",
|
|
45
|
+
ctaText: u,
|
|
46
|
+
ctaAriaLabel: C,
|
|
47
|
+
hasSecondaryButtonCta: R = !1,
|
|
48
|
+
secondaryButtonType: S = "secondary",
|
|
49
|
+
secondaryCtaText: O,
|
|
50
|
+
secondaryCtaAriaLabel: _,
|
|
51
|
+
automationId: z = "",
|
|
52
52
|
titleId: c,
|
|
53
|
-
disabledPrimaryButton:
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
53
|
+
disabledPrimaryButton: F = !1,
|
|
54
|
+
customContent: g = null
|
|
55
|
+
} = a, f = i ? "cursor-pointer" : "", y = h(c, "banner-title"), x = h(void 0, "banner-description"), l = M({
|
|
56
|
+
titleId: y,
|
|
57
|
+
descriptionId: d ? x : void 0,
|
|
57
58
|
isFocusable: !!c
|
|
58
59
|
}), {
|
|
59
|
-
pressProps:
|
|
60
|
-
role:
|
|
61
|
-
tabIndex:
|
|
62
|
-
} =
|
|
60
|
+
pressProps: W,
|
|
61
|
+
role: q,
|
|
62
|
+
tabIndex: D
|
|
63
|
+
} = Q({
|
|
63
64
|
isNative: !1,
|
|
64
65
|
onClick: i ? () => i() : void 0
|
|
65
|
-
}),
|
|
66
|
-
...
|
|
67
|
-
role:
|
|
68
|
-
tabIndex:
|
|
69
|
-
} : {},
|
|
70
|
-
className: `${
|
|
66
|
+
}), G = i ? {
|
|
67
|
+
...W,
|
|
68
|
+
role: q,
|
|
69
|
+
tabIndex: D
|
|
70
|
+
} : {}, I = () => N && /* @__PURE__ */ e.createElement("div", {
|
|
71
|
+
className: `${n.bannerImageCtn} ${f} banner-image-ctn ${s === "right" ? "mr-5 ml-0 justify-end" : "ml-5 mr-0 justify-start"} min-h-full`,
|
|
71
72
|
style: {
|
|
72
|
-
width:
|
|
73
|
+
width: B
|
|
73
74
|
},
|
|
74
75
|
onClick: i
|
|
75
76
|
}, /* @__PURE__ */ e.createElement("img", {
|
|
76
|
-
src:
|
|
77
|
-
alt:
|
|
77
|
+
src: a.bannerImage,
|
|
78
|
+
alt: E,
|
|
78
79
|
className: "max-w-[initial] h-[initial] max-h-[150px] object-contain"
|
|
79
80
|
}));
|
|
80
81
|
return /* @__PURE__ */ e.createElement("div", {
|
|
81
82
|
ref: t,
|
|
82
|
-
className: `${
|
|
83
|
+
className: `${n.bannerCtn} ${f} ${r} banner-ctn`,
|
|
83
84
|
style: {
|
|
84
85
|
backgroundColor: o
|
|
85
86
|
},
|
|
86
|
-
"data-automation-id":
|
|
87
|
+
"data-automation-id": z,
|
|
87
88
|
role: l.role,
|
|
88
89
|
"aria-labelledby": l["aria-labelledby"],
|
|
89
90
|
"aria-describedby": l["aria-describedby"],
|
|
90
91
|
tabIndex: l.tabIndex
|
|
91
|
-
}, s === "left" &&
|
|
92
|
-
className: `${
|
|
93
|
-
},
|
|
94
|
-
id:
|
|
92
|
+
}, s === "left" && I(), /* @__PURE__ */ e.createElement("div", b({
|
|
93
|
+
className: `${n.bannerContentCtn} w-[100%] banner-content-ctn`
|
|
94
|
+
}, G), /* @__PURE__ */ e.createElement(v, {
|
|
95
|
+
id: y,
|
|
95
96
|
className: "banner-title",
|
|
96
97
|
tabIndex: c ? -1 : void 0
|
|
97
|
-
},
|
|
98
|
-
id:
|
|
98
|
+
}, k), g ? /* @__PURE__ */ e.createElement(e.Fragment, null, g) : /* @__PURE__ */ e.createElement("span", {
|
|
99
|
+
id: x,
|
|
99
100
|
className: "banner-description"
|
|
100
|
-
},
|
|
101
|
+
}, d), /* @__PURE__ */ e.createElement("div", {
|
|
101
102
|
className: "flex gap-3",
|
|
102
|
-
onClick: (
|
|
103
|
-
},
|
|
103
|
+
onClick: (H) => H.stopPropagation()
|
|
104
|
+
}, $ && /* @__PURE__ */ e.createElement(m, {
|
|
104
105
|
type: "link",
|
|
105
|
-
className:
|
|
106
|
+
className: n.bannerLinkCta,
|
|
106
107
|
onClick: p,
|
|
107
|
-
label:
|
|
108
|
-
ariaLabel:
|
|
109
|
-
}),
|
|
110
|
-
type:
|
|
108
|
+
label: u,
|
|
109
|
+
ariaLabel: C
|
|
110
|
+
}), A && /* @__PURE__ */ e.createElement(m, {
|
|
111
|
+
type: w,
|
|
111
112
|
size: "sm",
|
|
112
|
-
label:
|
|
113
|
+
label: u,
|
|
113
114
|
onClick: p,
|
|
114
|
-
className:
|
|
115
|
+
className: n?.bannerButton,
|
|
115
116
|
"data-automation-id": "banner-main-cta",
|
|
116
|
-
ariaLabel:
|
|
117
|
-
disabled:
|
|
118
|
-
}),
|
|
119
|
-
type:
|
|
117
|
+
ariaLabel: C,
|
|
118
|
+
disabled: F
|
|
119
|
+
}), R && /* @__PURE__ */ e.createElement(m, {
|
|
120
|
+
type: S,
|
|
120
121
|
size: "sm",
|
|
121
|
-
label:
|
|
122
|
-
onClick:
|
|
123
|
-
className:
|
|
122
|
+
label: O,
|
|
123
|
+
onClick: j,
|
|
124
|
+
className: n?.secondaryBannerButton,
|
|
124
125
|
"data-automation-id": "banner-secondary-cta",
|
|
125
|
-
ariaLabel:
|
|
126
|
-
}))), s === "right" &&
|
|
127
|
-
name:
|
|
128
|
-
className:
|
|
129
|
-
onClick:
|
|
126
|
+
ariaLabel: _
|
|
127
|
+
}))), s === "right" && I(), P && /* @__PURE__ */ e.createElement(K, {
|
|
128
|
+
name: L,
|
|
129
|
+
className: n.bannerCloseIconCtn,
|
|
130
|
+
onClick: T,
|
|
130
131
|
ariaLabel: "Close banner",
|
|
131
132
|
shouldStopPropagation: !0
|
|
132
133
|
}));
|
|
133
134
|
});
|
|
134
135
|
export {
|
|
135
|
-
|
|
136
|
+
te as Banner
|
|
136
137
|
};
|
|
137
138
|
//# sourceMappingURL=index30.js.map
|
package/dist/index30.js.map
CHANGED
|
@@ -1 +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 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 } = 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 <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","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","e","stopPropagation","Button","type","label","ariaLabel","size","disabled","secondaryBannerButton","Icon","name","shouldStopPropagation"],"mappings":";;;;;;;;;;;;;;;;;AA+CA,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,EAAA,IACtB9B,GAEE+B,IAAmBhB,IAAgB,mBAAmB,IACtDa,IAAUI,EAAYH,GAAiB,cAAc,GACrDI,IAAgBD,EAAYE,QAAW,oBAAoB,GAE3DC,IAAmBC,EAAoB;AAAA,IAC3CR,SAAAA;AAAAA,IACAK,eAAe1B,IAAc0B,IAAgBC;AAAAA,IAC7CG,aAAa,CAAC,CAACR;AAAAA,EAAAA,CAChB,GAIK;AAAA,IAAES,YAAYC;AAAAA,IAAyBC,MAAMC;AAAAA,IAAmBC,UAAUC;AAAAA,EAAAA,IAC9EC,EAAmB;AAAA,IACjBC,UAAU;AAAA,IACVC,SAAS/B,IAAgB,MAAMA,MAAkBmB;AAAAA,EAAAA,CAClD,GAEGa,IAA8BhC,IAChC;AAAA,IACE,GAAGwB;AAAAA,IACHC,MAAMC;AAAAA,IACNC,UAAUC;AAAAA,EAAAA,IAEZ,CAAA,GAEEK,IAAcA,MAClBxC,KACEyC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,GAAG5D,EAAWI,cAAc,IAAIoC,CAAgB,qBAAqBtB,MAAkB,UAAU,0BAA0B,yBAAyB;AAAA,IAC/J2C,OAAO;AAAA,MAAEC,OAAO3C;AAAAA,IAAAA;AAAAA,IAChBoC,SAAS/B;AAAAA,EAAAA,GAETkC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKI,KAAKtD,EAAMuD;AAAAA,IAAaC,KAAK7C;AAAAA,IAAUwC,WAAU;AAAA,EAAA,CAA4D,CAC/G;AAGT,SACEF,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEjD,KAAAA;AAAAA,IACAkD,WAAW,GAAG5D,EAAWC,SAAS,IAAIuC,CAAgB,IAAI7B,CAAe;AAAA,IACzEkD,OAAO;AAAA,MAAEK,iBAAiBtD;AAAAA,IAAAA;AAAAA,IAC1B,sBAAoBwB;AAAAA,IACpBa,MAAML,EAAiBK;AAAAA,IACvB,mBAAiBL,EAAiB,iBAAiB;AAAA,IACnD,oBAAkBA,EAAiB,kBAAkB;AAAA,IACrDO,UAAUP,EAAiBO;AAAAA,EAAAA,GAE1BjC,MAAkB,UAAUuC,EAAAA,GAC7BC,gBAAAA,EAAAC,cAAA,OAAAQ,EAAA;AAAA,IACEP,WAAW,GAAG5D,EAAWE,gBAAgB;AAAA,EAAA,GACrCsD,CAA2B,GAE/BE,gBAAAA,EAAAC,cAAC5C,GAAQ;AAAA,IAACqD,IAAI/B;AAAAA,IAASuB,WAAU;AAAA,IAAeT,UAAUb,IAAkB,KAAKK;AAAAA,EAAAA,GAAY9B,CAAgB,GAC7G6C,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMS,IAAI1B;AAAAA,IAAekB,WAAU;AAAA,EAAA,GAAsB5C,CAAkB,GAC3E0C,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAaL,SAAUc,CAAAA,MAAMA,EAAEC,gBAAAA;AAAAA,EAAgB,GAC3D7C,KACCiC,gBAAAA,EAAAC,cAACY,GAAM;AAAA,IACLC,MAAK;AAAA,IACLZ,WAAW5D,EAAWG;AAAAA,IACtBoD,SAAS7B;AAAAA,IACT+C,OAAO3C;AAAAA,IACP4C,WAAW3C;AAAAA,EAAAA,CACZ,GAEFH,KACC8B,gBAAAA,EAAAC,cAACY,GAAM;AAAA,IACLC,MAAM3C;AAAAA,IACN8C,MAAK;AAAA,IACLF,OAAO3C;AAAAA,IACPyB,SAAS7B;AAAAA,IACTkC,WAAW5D,GAAYM;AAAAA,IACvB,sBAAmB;AAAA,IACnBoE,WAAW3C;AAAAA,IACX6C,UAAUrC;AAAAA,EAAAA,CACX,GAEFP,KACC0B,gBAAAA,EAAAC,cAACY,GAAM;AAAA,IACLC,MAAMvC;AAAAA,IACN0C,MAAK;AAAA,IACLF,OAAOvC;AAAAA,IACPqB,SAAS5B;AAAAA,IACTiC,WAAW5D,GAAY6E;AAAAA,IACvB,sBAAmB;AAAA,IACnBH,WAAWvC;AAAAA,EAAAA,CACZ,CAEA,CACF,GACJjB,MAAkB,WAAWuC,EAAAA,GAC7BpC,KACCqC,gBAAAA,EAAAC,cAACmB,GAAI;AAAA,IACHC,MAAMzD;AAAAA,IACNsC,WAAW5D,EAAWK;AAAAA,IACtBkD,SAAShC;AAAAA,IACTmD,WAAU;AAAA,IACVM,uBAAqB;AAAA,EAAA,CACtB,CAEA;AAET,CAAC;"}
|
|
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 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":"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"}
|
package/dist/index32.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import e from "react";
|
|
2
2
|
import { Button as N } from "./index4.js";
|
|
3
3
|
import { Badge as I } from "./index10.js";
|
|
4
|
-
import { Icon as
|
|
4
|
+
import { Icon as d } from "./index6.js";
|
|
5
5
|
/* empty css */
|
|
6
6
|
const t = {
|
|
7
7
|
widgetCtn: "flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]",
|
|
@@ -21,16 +21,16 @@ const t = {
|
|
|
21
21
|
requestFeatureImageCtn: "w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]",
|
|
22
22
|
requestFeatureDescriptionCtn: "flex flex-col"
|
|
23
23
|
}, B = ({
|
|
24
|
-
widgetClassName:
|
|
24
|
+
widgetClassName: g = "",
|
|
25
25
|
widgetType: a = "general",
|
|
26
26
|
widgetTitle: r = "",
|
|
27
27
|
widgetDescription: l = "",
|
|
28
28
|
widgetImage: p,
|
|
29
|
-
hasImage:
|
|
29
|
+
hasImage: f = !1,
|
|
30
30
|
hasButtonCta: n = !1,
|
|
31
31
|
hasLinkCta: i = !1,
|
|
32
32
|
ctaText: o = "",
|
|
33
|
-
hasBadge:
|
|
33
|
+
hasBadge: x = !1,
|
|
34
34
|
badgeText: w = "",
|
|
35
35
|
buttonBgColor: u = "secondary",
|
|
36
36
|
onCtaClick: b,
|
|
@@ -38,7 +38,7 @@ const t = {
|
|
|
38
38
|
webinarDateInfo: c,
|
|
39
39
|
webinarSpeaker: s
|
|
40
40
|
}) => {
|
|
41
|
-
const E =
|
|
41
|
+
const E = x && /* @__PURE__ */ e.createElement(I, {
|
|
42
42
|
label: w,
|
|
43
43
|
className: t.widgetBadge,
|
|
44
44
|
bgColor: "var(--color-yellow-50)",
|
|
@@ -52,14 +52,14 @@ const t = {
|
|
|
52
52
|
label: o,
|
|
53
53
|
className: `${t.widgetButtonCta} mt-[4px]`,
|
|
54
54
|
onClick: b
|
|
55
|
-
})), C =
|
|
55
|
+
})), C = f && /* @__PURE__ */ e.createElement("div", {
|
|
56
56
|
className: `${t.widgetImageCtn} widget-image-ctn`
|
|
57
57
|
}, /* @__PURE__ */ e.createElement("img", {
|
|
58
58
|
src: p,
|
|
59
59
|
alt: "widget-image"
|
|
60
60
|
}));
|
|
61
61
|
return /* @__PURE__ */ e.createElement("div", {
|
|
62
|
-
className: `${t.widgetCtn} ${
|
|
62
|
+
className: `${t.widgetCtn} ${g} widget-ctn`,
|
|
63
63
|
onClick: v
|
|
64
64
|
}, a !== "general" && C, /* @__PURE__ */ e.createElement("div", {
|
|
65
65
|
className: t.descriptionCtn
|
|
@@ -71,14 +71,14 @@ const t = {
|
|
|
71
71
|
className: t.webinarInfoCtn
|
|
72
72
|
}, s && /* @__PURE__ */ e.createElement("div", {
|
|
73
73
|
className: `${t.webinarDescriptionInfo} align-baseline`
|
|
74
|
-
}, /* @__PURE__ */ e.createElement(
|
|
74
|
+
}, /* @__PURE__ */ e.createElement(d, {
|
|
75
75
|
name: "people",
|
|
76
76
|
className: "relative top-[2px]"
|
|
77
77
|
}), /* @__PURE__ */ e.createElement("span", {
|
|
78
78
|
className: t.webinarSpeaker
|
|
79
79
|
}, s)), c && /* @__PURE__ */ e.createElement("div", {
|
|
80
80
|
className: `${t.webinarTimeInfo} align-baseline mb-[4px]`
|
|
81
|
-
}, /* @__PURE__ */ e.createElement(
|
|
81
|
+
}, /* @__PURE__ */ e.createElement(d, {
|
|
82
82
|
name: "clock",
|
|
83
83
|
className: "relative top-[2px]"
|
|
84
84
|
}), /* @__PURE__ */ e.createElement("span", {
|
|
@@ -96,6 +96,7 @@ const t = {
|
|
|
96
96
|
}, l), m)) : m));
|
|
97
97
|
};
|
|
98
98
|
export {
|
|
99
|
-
B as Widget
|
|
99
|
+
B as Widget,
|
|
100
|
+
B as default
|
|
100
101
|
};
|
|
101
102
|
//# sourceMappingURL=index32.js.map
|
package/dist/index42.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import e, { useState as g, useRef as p } from "react";
|
|
2
2
|
import { Icon as c } from "./index6.js";
|
|
3
|
-
import { ProgressBar as
|
|
3
|
+
import { ProgressBar as f } from "./index41.js";
|
|
4
4
|
/* empty css */
|
|
5
5
|
const r = {
|
|
6
6
|
gettingStartedWidgetCtn: "border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4",
|
|
@@ -14,7 +14,7 @@ const r = {
|
|
|
14
14
|
}) => {
|
|
15
15
|
const [n, l] = g(!1), o = p(null), i = () => {
|
|
16
16
|
l(!n);
|
|
17
|
-
},
|
|
17
|
+
}, d = (t) => t ? "var(--color-green-500)" : "var(--color-gray-200)";
|
|
18
18
|
return /* @__PURE__ */ e.createElement("div", {
|
|
19
19
|
className: `${r.gettingStartedWidgetCtn} ${s} getting-started-widget-ctn`
|
|
20
20
|
}, /* @__PURE__ */ e.createElement("div", {
|
|
@@ -27,7 +27,7 @@ const r = {
|
|
|
27
27
|
onClick: i
|
|
28
28
|
})), /* @__PURE__ */ e.createElement("div", {
|
|
29
29
|
className: "mt-[12px]"
|
|
30
|
-
}, /* @__PURE__ */ e.createElement(
|
|
30
|
+
}, /* @__PURE__ */ e.createElement(f, {
|
|
31
31
|
totalTasks: a.length,
|
|
32
32
|
completedTasks: a.filter((t) => t.isComplete).length,
|
|
33
33
|
progressBarCtnClassName: "get-started-progress-bar-ctn"
|
|
@@ -37,18 +37,19 @@ const r = {
|
|
|
37
37
|
style: {
|
|
38
38
|
maxHeight: n ? `${o.current?.scrollHeight}px` : "0px"
|
|
39
39
|
}
|
|
40
|
-
}, a.map((t,
|
|
41
|
-
key:
|
|
40
|
+
}, a.map((t, m) => /* @__PURE__ */ e.createElement("div", {
|
|
41
|
+
key: m,
|
|
42
42
|
className: r.actionItemCtn
|
|
43
43
|
}, /* @__PURE__ */ e.createElement(c, {
|
|
44
44
|
name: "checked-circle",
|
|
45
|
-
stroke:
|
|
45
|
+
stroke: d(t.isComplete)
|
|
46
46
|
}), /* @__PURE__ */ e.createElement("span", {
|
|
47
47
|
className: t.isComplete ? "text-[var(--color-gray-500)]" : "text-[var(--color-gray-900)] cursor-pointer",
|
|
48
48
|
onClick: t?.handleActionItemClick
|
|
49
49
|
}, t.label)))));
|
|
50
50
|
};
|
|
51
51
|
export {
|
|
52
|
-
E as GetStartedWidget
|
|
52
|
+
E as GetStartedWidget,
|
|
53
|
+
E as default
|
|
53
54
|
};
|
|
54
55
|
//# sourceMappingURL=index42.js.map
|
package/dist/index43.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import e, { useState as p } from "react";
|
|
2
|
-
import { Icon as
|
|
2
|
+
import { Icon as a } from "./index6.js";
|
|
3
3
|
import { Button as w } from "./index4.js";
|
|
4
4
|
/* empty css */
|
|
5
5
|
const r = {
|
|
@@ -15,7 +15,7 @@ const r = {
|
|
|
15
15
|
customAlertClassBtn: "bg-[var(--color-red-500)] text-[var(--color-white)] hover:bg-[var(--color-red-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]",
|
|
16
16
|
customNudgeClassBtn: "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]"
|
|
17
17
|
}, B = ({
|
|
18
|
-
messageBarCtnClassName:
|
|
18
|
+
messageBarCtnClassName: l = "",
|
|
19
19
|
messageBarType: o = "info",
|
|
20
20
|
message: s = "",
|
|
21
21
|
hasCloseIcon: c = !1,
|
|
@@ -46,7 +46,7 @@ const r = {
|
|
|
46
46
|
}
|
|
47
47
|
}, [o]);
|
|
48
48
|
return /* @__PURE__ */ e.createElement("div", {
|
|
49
|
-
className: `se-design-message-bar ${
|
|
49
|
+
className: `se-design-message-bar ${l} ${r.messageBarCtn} ${r[o]} ${v ? "show" : "hide"}`,
|
|
50
50
|
"data-automation-id": u
|
|
51
51
|
}, /* @__PURE__ */ e.createElement("div", {
|
|
52
52
|
className: r.messageCtn
|
|
@@ -54,7 +54,7 @@ const r = {
|
|
|
54
54
|
className: "inline-flex items-center"
|
|
55
55
|
}, /* @__PURE__ */ e.createElement("span", {
|
|
56
56
|
className: f
|
|
57
|
-
}, /* @__PURE__ */ e.createElement(
|
|
57
|
+
}, /* @__PURE__ */ e.createElement(a, {
|
|
58
58
|
name: "info",
|
|
59
59
|
className: "inline-block h-fit relative top-[3px] mr-1"
|
|
60
60
|
}), s, n && /* @__PURE__ */ e.createElement(w, {
|
|
@@ -64,13 +64,14 @@ const r = {
|
|
|
64
64
|
onClick: m,
|
|
65
65
|
className: `${g} ml-2 alert-btn`,
|
|
66
66
|
automationId: "message-bar-cta"
|
|
67
|
-
})))), c && /* @__PURE__ */ e.createElement(
|
|
67
|
+
})))), c && /* @__PURE__ */ e.createElement(a, {
|
|
68
68
|
name: "close",
|
|
69
69
|
className: r.closeIconCtn,
|
|
70
70
|
onClick: d
|
|
71
71
|
}));
|
|
72
72
|
};
|
|
73
73
|
export {
|
|
74
|
-
B as MessageBar
|
|
74
|
+
B as MessageBar,
|
|
75
|
+
B as default
|
|
75
76
|
};
|
|
76
77
|
//# sourceMappingURL=index43.js.map
|
package/dist/index55.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import t from "react";
|
|
2
2
|
/* empty css */
|
|
3
3
|
const n = ({
|
|
4
4
|
element: e,
|
|
@@ -15,12 +15,12 @@ const n = ({
|
|
|
15
15
|
"--shimmer-base-color": s,
|
|
16
16
|
"--shimmer-highlight-color": m
|
|
17
17
|
}, r = `se-design-shimmer-element se-design-shimmer-${e.type}`;
|
|
18
|
-
return /* @__PURE__ */
|
|
18
|
+
return /* @__PURE__ */ t.createElement("div", {
|
|
19
19
|
className: r,
|
|
20
20
|
style: i
|
|
21
|
-
}, e.children && e.children.map((
|
|
21
|
+
}, e.children && e.children.map((a, p) => /* @__PURE__ */ t.createElement(n, {
|
|
22
22
|
key: p,
|
|
23
|
-
element:
|
|
23
|
+
element: a,
|
|
24
24
|
animationDuration: d,
|
|
25
25
|
baseColor: s,
|
|
26
26
|
highlightColor: m
|
|
@@ -40,48 +40,48 @@ const n = ({
|
|
|
40
40
|
alignItems: e.alignItems,
|
|
41
41
|
flex: e.flex
|
|
42
42
|
};
|
|
43
|
-
return /* @__PURE__ */
|
|
43
|
+
return /* @__PURE__ */ t.createElement("div", {
|
|
44
44
|
className: `se-design-shimmer-container ${e.className || ""}`,
|
|
45
45
|
style: i
|
|
46
|
-
}, e.children.map((r,
|
|
47
|
-
key:
|
|
46
|
+
}, e.children.map((r, a) => r.type === "container" ? /* @__PURE__ */ t.createElement(y, {
|
|
47
|
+
key: a,
|
|
48
48
|
container: r,
|
|
49
49
|
animationDuration: d,
|
|
50
50
|
baseColor: s,
|
|
51
51
|
highlightColor: m
|
|
52
|
-
}) : /* @__PURE__ */
|
|
53
|
-
key:
|
|
52
|
+
}) : /* @__PURE__ */ t.createElement(n, {
|
|
53
|
+
key: a,
|
|
54
54
|
element: r,
|
|
55
55
|
animationDuration: d,
|
|
56
56
|
baseColor: s,
|
|
57
57
|
highlightColor: m
|
|
58
58
|
})));
|
|
59
|
-
},
|
|
59
|
+
}, l = ({
|
|
60
60
|
structure: e,
|
|
61
61
|
className: d = "",
|
|
62
62
|
animationDuration: s = 3,
|
|
63
63
|
baseColor: m = "var(--color-gray-600)",
|
|
64
64
|
highlightColor: i = "var(--color-gray-500)",
|
|
65
65
|
width: r,
|
|
66
|
-
height:
|
|
66
|
+
height: a
|
|
67
67
|
}) => {
|
|
68
68
|
const p = {
|
|
69
69
|
width: r ? typeof r == "number" ? `${r}px` : r : "100%",
|
|
70
|
-
height:
|
|
70
|
+
height: a ? typeof a == "number" ? `${a}px` : a : "auto",
|
|
71
71
|
"--shimmer-duration": `${s}s`,
|
|
72
72
|
"--shimmer-base-color": m,
|
|
73
73
|
"--shimmer-highlight-color": i
|
|
74
74
|
};
|
|
75
|
-
return /* @__PURE__ */
|
|
75
|
+
return /* @__PURE__ */ t.createElement("div", {
|
|
76
76
|
className: `se-design-shimmer-loader ${d}`,
|
|
77
77
|
style: p
|
|
78
|
-
}, e.map((c, o) => c.type === "container" ? /* @__PURE__ */
|
|
78
|
+
}, e.map((c, o) => c.type === "container" ? /* @__PURE__ */ t.createElement(y, {
|
|
79
79
|
key: o,
|
|
80
80
|
container: c,
|
|
81
81
|
animationDuration: s,
|
|
82
82
|
baseColor: m,
|
|
83
83
|
highlightColor: i
|
|
84
|
-
}) : /* @__PURE__ */
|
|
84
|
+
}) : /* @__PURE__ */ t.createElement(n, {
|
|
85
85
|
key: o,
|
|
86
86
|
element: c,
|
|
87
87
|
animationDuration: s,
|
|
@@ -90,6 +90,7 @@ const n = ({
|
|
|
90
90
|
})));
|
|
91
91
|
};
|
|
92
92
|
export {
|
|
93
|
-
|
|
93
|
+
l as ShimmerLoader,
|
|
94
|
+
l as default
|
|
94
95
|
};
|
|
95
96
|
//# sourceMappingURL=index55.js.map
|