@telefonica/mistica 14.5.0 → 14.7.0
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/css/mistica.css +1 -1
- package/dist/avatar.css-mistica.js +1 -1
- package/dist/avatar.d.ts +1 -0
- package/dist/avatar.js +20 -18
- package/dist/badge.css-mistica.js +3 -3
- package/dist/boxed.d.ts +2 -1
- package/dist/boxed.js +17 -18
- package/dist/button-fixed-footer-layout.d.ts +1 -2
- package/dist/button-group.css-mistica.js +3 -3
- package/dist/button-group.d.ts +1 -1
- package/dist/button-layout.css-mistica.js +12 -12
- package/dist/button-layout.d.ts +1 -2
- package/dist/button.css-mistica.js +22 -22
- package/dist/button.d.ts +1 -1
- package/dist/button.js +93 -90
- package/dist/callout.css-mistica.js +1 -1
- package/dist/callout.d.ts +1 -1
- package/dist/callout.js +13 -9
- package/dist/card.css-mistica.js +8 -8
- package/dist/card.d.ts +3 -3
- package/dist/card.js +105 -93
- package/dist/carousel.css-mistica.js +7 -7
- package/dist/checkbox.css-mistica.js +9 -9
- package/dist/chip.css-mistica.js +11 -10
- package/dist/chip.css.d.ts +1 -1
- package/dist/chip.js +21 -20
- package/dist/circle.css-mistica.js +1 -1
- package/dist/credit-card-number-field.css-mistica.js +3 -3
- package/dist/cvv-field.css-mistica.js +3 -3
- package/dist/date-time-picker.js +7 -6
- package/dist/dialog.css-mistica.js +7 -7
- package/dist/dialog.d.ts +1 -1
- package/dist/double-field.css-mistica.js +4 -4
- package/dist/double-field.d.ts +10 -10
- package/dist/empty-state-card.css-mistica.js +2 -2
- package/dist/empty-state-card.d.ts +1 -1
- package/dist/empty-state.css-mistica.js +2 -2
- package/dist/empty-state.d.ts +2 -1
- package/dist/feedback.css-mistica.js +5 -5
- package/dist/feedback.d.ts +1 -0
- package/dist/feedback.js +86 -87
- package/dist/fixed-footer-layout.css-mistica.js +5 -5
- package/dist/header.d.ts +2 -2
- package/dist/hero.css-mistica.js +5 -5
- package/dist/hero.d.ts +4 -4
- package/dist/highlighted-card.css-mistica.js +4 -4
- package/dist/highlighted-card.d.ts +1 -2
- package/dist/highlighted-card.js +2 -0
- package/dist/icon-button.css-mistica.js +1 -1
- package/dist/image.css-mistica.js +1 -1
- package/dist/image.js +16 -16
- package/dist/index.d.ts +7 -2
- package/dist/index.js +9 -1
- package/dist/list.css-mistica.js +9 -9
- package/dist/loading-bar.css-mistica.js +6 -6
- package/dist/logo.d.ts +34 -0
- package/dist/logo.js +629 -0
- package/dist/maybe-dismissable.css-mistica.js +4 -4
- package/dist/menu.css-mistica.js +1 -1
- package/dist/navigation-bar.css-mistica.js +16 -16
- package/dist/navigation-bar.d.ts +2 -6
- package/dist/navigation-bar.js +99 -266
- package/dist/navigation-breadcrumbs.css-mistica.js +1 -1
- package/dist/package-version.js +1 -1
- package/dist/password-field.css-mistica.js +2 -2
- package/dist/popover.css-mistica.js +10 -10
- package/dist/progress-bar.css-mistica.js +2 -2
- package/dist/radio-button.css-mistica.js +9 -9
- package/dist/responsive-layout.css-mistica.js +8 -5
- package/dist/responsive-layout.css.d.ts +4 -1
- package/dist/responsive-layout.d.ts +2 -0
- package/dist/responsive-layout.js +7 -9
- package/dist/screen-reader-only.css-mistica.js +1 -1
- package/dist/select.css-mistica.js +14 -14
- package/dist/skeleton-base.js +3 -3
- package/dist/skeletons.css-mistica.js +4 -4
- package/dist/skins/blau.js +7 -1
- package/dist/skins/defaults.d.ts +3 -0
- package/dist/skins/defaults.js +48 -0
- package/dist/skins/movistar-legacy.js +7 -1
- package/dist/skins/movistar.js +7 -1
- package/dist/skins/o2-classic.js +6 -0
- package/dist/skins/o2.js +9 -3
- package/dist/skins/skin-contract.css-mistica.js +203 -185
- package/dist/skins/skin-contract.css.d.ts +18 -0
- package/dist/skins/telefonica.js +19 -1
- package/dist/skins/types.d.ts +21 -0
- package/dist/skins/vivo.js +7 -1
- package/dist/snackbar.css-mistica.js +8 -8
- package/dist/spinner.css-mistica.js +1 -1
- package/dist/sprinkles.css-mistica.js +360 -312
- package/dist/sprinkles.css.d.ts +1 -1
- package/dist/stepper.css-mistica.js +9 -9
- package/dist/switch-component.css-mistica.js +23 -23
- package/dist/tabs.css-mistica.js +14 -14
- package/dist/tag.css-mistica.js +2 -2
- package/dist/tag.js +12 -12
- package/dist/text-field-base.css-mistica.js +10 -10
- package/dist/text-field-components.css-mistica.js +10 -10
- package/dist/text-link.css-mistica.js +5 -5
- package/dist/theme-context-provider.js +38 -58
- package/dist/theme-variant-context.d.ts +4 -1
- package/dist/theme-variant-context.js +9 -8
- package/dist/tooltip.css-mistica.js +2 -2
- package/dist/touchable.css-mistica.js +1 -1
- package/dist/utils/aspect-ratio-support.css-mistica.js +4 -4
- package/dist/utils/renders-element.d.ts +1 -1
- package/dist/video.css-mistica.js +1 -1
- package/dist/video.js +16 -15
- package/dist-es/avatar.css-mistica.js +1 -1
- package/dist-es/avatar.js +28 -26
- package/dist-es/badge.css-mistica.js +2 -2
- package/dist-es/boxed.js +25 -26
- package/dist-es/button-group.css-mistica.js +2 -2
- package/dist-es/button-layout.css-mistica.js +7 -7
- package/dist-es/button.css-mistica.js +9 -9
- package/dist-es/button.js +128 -125
- package/dist-es/callout.css-mistica.js +1 -1
- package/dist-es/callout.js +28 -24
- package/dist-es/card.css-mistica.js +2 -2
- package/dist-es/card.js +141 -129
- package/dist-es/carousel.css-mistica.js +2 -2
- package/dist-es/checkbox.css-mistica.js +6 -6
- package/dist-es/chip.css-mistica.js +9 -8
- package/dist-es/chip.js +37 -36
- package/dist-es/circle.css-mistica.js +1 -1
- package/dist-es/credit-card-number-field.css-mistica.js +3 -3
- package/dist-es/cvv-field.css-mistica.js +2 -2
- package/dist-es/date-time-picker.js +13 -12
- package/dist-es/dialog.css-mistica.js +5 -5
- package/dist-es/double-field.css-mistica.js +4 -4
- package/dist-es/empty-state-card.css-mistica.js +2 -2
- package/dist-es/empty-state.css-mistica.js +2 -2
- package/dist-es/feedback.css-mistica.js +2 -2
- package/dist-es/feedback.js +109 -110
- package/dist-es/fixed-footer-layout.css-mistica.js +3 -3
- package/dist-es/hero.css-mistica.js +2 -2
- package/dist-es/highlighted-card.css-mistica.js +4 -4
- package/dist-es/highlighted-card.js +9 -7
- package/dist-es/icon-button.css-mistica.js +1 -1
- package/dist-es/image.css-mistica.js +1 -1
- package/dist-es/image.js +18 -18
- package/dist-es/index.js +1698 -1697
- package/dist-es/list.css-mistica.js +2 -2
- package/dist-es/loading-bar.css-mistica.js +2 -2
- package/dist-es/logo.js +607 -0
- package/dist-es/maybe-dismissable.css-mistica.js +2 -2
- package/dist-es/menu.css-mistica.js +1 -1
- package/dist-es/navigation-bar.css-mistica.js +11 -11
- package/dist-es/navigation-bar.js +171 -337
- package/dist-es/navigation-breadcrumbs.css-mistica.js +1 -1
- package/dist-es/package-version.js +1 -1
- package/dist-es/password-field.css-mistica.js +2 -2
- package/dist-es/popover.css-mistica.js +2 -2
- package/dist-es/progress-bar.css-mistica.js +2 -2
- package/dist-es/radio-button.css-mistica.js +6 -6
- package/dist-es/responsive-layout.css-mistica.js +5 -2
- package/dist-es/responsive-layout.js +16 -18
- package/dist-es/screen-reader-only.css-mistica.js +1 -1
- package/dist-es/select.css-mistica.js +11 -11
- package/dist-es/skeleton-base.js +7 -7
- package/dist-es/skeletons.css-mistica.js +2 -2
- package/dist-es/skins/blau.js +7 -1
- package/dist-es/skins/defaults.js +35 -0
- package/dist-es/skins/movistar-legacy.js +7 -1
- package/dist-es/skins/movistar.js +7 -1
- package/dist-es/skins/o2-classic.js +6 -0
- package/dist-es/skins/o2.js +9 -3
- package/dist-es/skins/skin-contract.css-mistica.js +203 -185
- package/dist-es/skins/telefonica.js +19 -1
- package/dist-es/skins/vivo.js +7 -1
- package/dist-es/snackbar.css-mistica.js +2 -2
- package/dist-es/spinner.css-mistica.js +1 -1
- package/dist-es/sprinkles.css-mistica.js +360 -312
- package/dist-es/stepper.css-mistica.js +2 -2
- package/dist-es/style.css +1 -1
- package/dist-es/switch-component.css-mistica.js +19 -19
- package/dist-es/tabs.css-mistica.js +10 -10
- package/dist-es/tag.css-mistica.js +2 -2
- package/dist-es/tag.js +27 -27
- package/dist-es/text-field-base.css-mistica.js +2 -2
- package/dist-es/text-field-components.css-mistica.js +2 -2
- package/dist-es/text-link.css-mistica.js +5 -5
- package/dist-es/theme-context-provider.js +72 -92
- package/dist-es/theme-variant-context.js +9 -9
- package/dist-es/tooltip.css-mistica.js +2 -2
- package/dist-es/touchable.css-mistica.js +1 -1
- package/dist-es/utils/aspect-ratio-support.css-mistica.js +3 -3
- package/dist-es/video.css-mistica.js +1 -1
- package/dist-es/video.js +17 -16
- package/package.json +3 -3
package/dist-es/button.js
CHANGED
|
@@ -77,208 +77,211 @@ function _objectWithoutPropertiesLoose(source, excluded) {
|
|
|
77
77
|
}
|
|
78
78
|
return target;
|
|
79
79
|
}
|
|
80
|
-
import * as
|
|
81
|
-
import
|
|
82
|
-
import
|
|
80
|
+
import * as a from "react";
|
|
81
|
+
import R from "classnames";
|
|
82
|
+
import F from "./spinner.js";
|
|
83
83
|
import { BaseTouchable as d } from "./touchable.js";
|
|
84
|
-
import { useIsInverseVariant as
|
|
85
|
-
import { useForm as
|
|
86
|
-
import { pxToRem as
|
|
87
|
-
import { Text as
|
|
88
|
-
import
|
|
89
|
-
import { getTextFromChildren as
|
|
90
|
-
import { useTrackingConfig as
|
|
91
|
-
import { useTheme as
|
|
92
|
-
import { flattenChildren as
|
|
93
|
-
import { SMALL_ICON_SIZE as
|
|
94
|
-
import { jsxs as
|
|
95
|
-
const
|
|
96
|
-
let { content: e , defaultIconSize:
|
|
97
|
-
const u =
|
|
84
|
+
import { useIsInverseVariant as L } from "./theme-variant-context.js";
|
|
85
|
+
import { useForm as B } from "./form-context.js";
|
|
86
|
+
import { pxToRem as O } from "./utils/css.js";
|
|
87
|
+
import { Text as z, Text3 as X, Text2 as M } from "./text.js";
|
|
88
|
+
import W from "./box.js";
|
|
89
|
+
import { getTextFromChildren as P } from "./utils/common.js";
|
|
90
|
+
import { useTrackingConfig as Z, eventNames as C, eventCategories as D, eventActions as G } from "./utils/analytics.js";
|
|
91
|
+
import { useTheme as j } from "./hooks.js";
|
|
92
|
+
import { flattenChildren as $ } from "./skins/utils.js";
|
|
93
|
+
import { SMALL_ICON_SIZE as V, ICON_SIZE as H, SMALL_SPINNER_SIZE as q, SPINNER_SIZE as J, inverseVariants as K, variants as Q, small as U, isLoading as Y, textContent as p, loadingFiller as ee, ICON_MARGIN_PX as T, X_SMALL_PADDING_PX as te, X_PADDING_PX as ne, loadingContent as re, link as ie, inverseLink as oe, alignedLink as ae, textContentLink as se } from "./button.css-mistica.js";
|
|
94
|
+
import { jsxs as A, Fragment as ce, jsx as t } from "./_virtual/jsx-runtime.js";
|
|
95
|
+
const I = (param)=>{
|
|
96
|
+
let { content: e , defaultIconSize: n , renderText: i } = param;
|
|
97
|
+
const u = $(e), f = u.length, c = [];
|
|
98
98
|
let o = [];
|
|
99
|
-
const
|
|
100
|
-
|
|
99
|
+
const l = ()=>{
|
|
100
|
+
c.push(/* @__PURE__ */ t(a.Fragment, {
|
|
101
101
|
children: i(o)
|
|
102
|
-
},
|
|
102
|
+
}, c.length)), o = [];
|
|
103
103
|
};
|
|
104
|
-
return u.forEach((
|
|
105
|
-
var
|
|
106
|
-
const
|
|
107
|
-
if (/*#__PURE__*/
|
|
108
|
-
o.length &&
|
|
109
|
-
const
|
|
110
|
-
|
|
104
|
+
return u.forEach((s, m)=>{
|
|
105
|
+
var g;
|
|
106
|
+
const b = m === 0, r = m === f - 1;
|
|
107
|
+
if (/*#__PURE__*/ a.isValidElement(s)) {
|
|
108
|
+
o.length && l();
|
|
109
|
+
const N = (g = s.props.size) != null ? g : n;
|
|
110
|
+
c.push(/* @__PURE__ */ t("div", {
|
|
111
111
|
style: {
|
|
112
112
|
display: "flex",
|
|
113
113
|
alignItems: "center",
|
|
114
|
-
marginLeft:
|
|
115
|
-
marginRight:
|
|
114
|
+
marginLeft: b ? 0 : T,
|
|
115
|
+
marginRight: r ? 0 : T
|
|
116
116
|
},
|
|
117
|
-
children: /*#__PURE__*/
|
|
118
|
-
size:
|
|
117
|
+
children: /*#__PURE__*/ a.cloneElement(s, {
|
|
118
|
+
size: O(N)
|
|
119
119
|
})
|
|
120
|
-
},
|
|
121
|
-
} else o.push(
|
|
122
|
-
}),
|
|
123
|
-
},
|
|
124
|
-
var
|
|
125
|
-
const { eventFormat: i } =
|
|
126
|
-
|
|
127
|
-
|
|
120
|
+
}, c.length));
|
|
121
|
+
} else o.push(s), r && l();
|
|
122
|
+
}), c;
|
|
123
|
+
}, w = /*#__PURE__*/ a.forwardRef((e, n)=>{
|
|
124
|
+
var x;
|
|
125
|
+
const { eventFormat: i } = Z(), { formStatus: u , formId: f } = B(), c = L(), { loadingText: o } = e, l = !!e.submit, s = u === "sending", [m, b] = a.useState(!1), r = e.showSpinner || s && l || m, [h, g] = a.useState(!!r);
|
|
126
|
+
a.useEffect(()=>{
|
|
127
|
+
r && !h && g(!0);
|
|
128
128
|
}, [
|
|
129
|
-
|
|
130
|
-
|
|
129
|
+
r,
|
|
130
|
+
h,
|
|
131
131
|
u
|
|
132
132
|
]);
|
|
133
|
-
const
|
|
134
|
-
name:
|
|
133
|
+
const N = ()=>i === "google-analytics-4" ? {
|
|
134
|
+
name: C.userInteraction,
|
|
135
135
|
component_type: `${e.type}_button`,
|
|
136
|
-
component_copy:
|
|
136
|
+
component_copy: P(e.children)
|
|
137
137
|
} : {
|
|
138
|
-
category:
|
|
138
|
+
category: D.userInteraction,
|
|
139
139
|
action: `${e.type}_button_tapped`,
|
|
140
|
-
label:
|
|
141
|
-
},
|
|
140
|
+
label: P(e.children)
|
|
141
|
+
}, S = e.small ? V : H, y = O(e.small ? q : J), _ = (E)=>e.small ? /* @__PURE__ */ t(z, {
|
|
142
142
|
size: 14,
|
|
143
143
|
lineHeight: 20,
|
|
144
144
|
weight: "medium",
|
|
145
145
|
truncate: 1,
|
|
146
146
|
color: "inherit",
|
|
147
147
|
as: "div",
|
|
148
|
-
children:
|
|
149
|
-
}) : /* @__PURE__ */ t(
|
|
148
|
+
children: E
|
|
149
|
+
}) : /* @__PURE__ */ t(X, {
|
|
150
150
|
medium: !0,
|
|
151
151
|
truncate: 1,
|
|
152
152
|
color: "inherit",
|
|
153
153
|
as: "div",
|
|
154
|
-
children:
|
|
155
|
-
}),
|
|
156
|
-
ref:
|
|
157
|
-
className:
|
|
158
|
-
[
|
|
159
|
-
[
|
|
154
|
+
children: E
|
|
155
|
+
}), v = {
|
|
156
|
+
ref: n,
|
|
157
|
+
className: R(c ? K[e.type] : Q[e.type], e.className, {
|
|
158
|
+
[U]: e.small,
|
|
159
|
+
[Y]: r
|
|
160
160
|
}),
|
|
161
161
|
style: _objectSpread({
|
|
162
162
|
cursor: e.fake ? "pointer" : void 0
|
|
163
163
|
}, e.style),
|
|
164
|
-
trackingEvent: (
|
|
164
|
+
trackingEvent: (x = e.trackingEvent) != null ? x : e.trackEvent ? N() : void 0,
|
|
165
165
|
dataAttributes: e.dataAttributes,
|
|
166
166
|
"aria-controls": e["aria-controls"],
|
|
167
167
|
"aria-expanded": e["aria-expanded"],
|
|
168
168
|
tabIndex: e.tabIndex,
|
|
169
|
-
children: /* @__PURE__ */
|
|
169
|
+
children: /* @__PURE__ */ A(ce, {
|
|
170
170
|
children: [
|
|
171
171
|
/* @__PURE__ */ t("div", {
|
|
172
|
-
"aria-hidden":
|
|
173
|
-
className:
|
|
174
|
-
children:
|
|
172
|
+
"aria-hidden": r ? !0 : void 0,
|
|
173
|
+
className: p,
|
|
174
|
+
children: I({
|
|
175
175
|
content: e.children,
|
|
176
|
-
defaultIconSize:
|
|
177
|
-
renderText:
|
|
176
|
+
defaultIconSize: S,
|
|
177
|
+
renderText: _
|
|
178
178
|
})
|
|
179
179
|
}),
|
|
180
180
|
/* @__PURE__ */ t("div", {
|
|
181
|
-
className:
|
|
181
|
+
className: ee,
|
|
182
182
|
"aria-hidden": !0,
|
|
183
183
|
style: {
|
|
184
|
-
paddingLeft:
|
|
185
|
-
paddingRight:
|
|
184
|
+
paddingLeft: y,
|
|
185
|
+
paddingRight: T + 2 * (e.small ? te : ne)
|
|
186
186
|
},
|
|
187
|
-
children:
|
|
187
|
+
children: I({
|
|
188
188
|
content: o,
|
|
189
|
-
defaultIconSize:
|
|
190
|
-
renderText:
|
|
189
|
+
defaultIconSize: S,
|
|
190
|
+
renderText: _
|
|
191
191
|
})
|
|
192
192
|
}),
|
|
193
|
-
/* @__PURE__ */
|
|
194
|
-
"aria-hidden":
|
|
195
|
-
className:
|
|
193
|
+
/* @__PURE__ */ A("div", {
|
|
194
|
+
"aria-hidden": r ? void 0 : !0,
|
|
195
|
+
className: re,
|
|
196
196
|
onTransitionEnd: ()=>{
|
|
197
|
-
|
|
197
|
+
r !== h && g(r);
|
|
198
198
|
},
|
|
199
199
|
children: [
|
|
200
|
-
|
|
200
|
+
h ? /* @__PURE__ */ t(F, {
|
|
201
201
|
rolePresentation: !!o,
|
|
202
202
|
color: "currentcolor",
|
|
203
203
|
delay: "0s",
|
|
204
|
-
size:
|
|
204
|
+
size: y
|
|
205
205
|
}) : /* @__PURE__ */ t("div", {
|
|
206
206
|
style: {
|
|
207
207
|
display: "inline-block",
|
|
208
|
-
width:
|
|
209
|
-
height:
|
|
208
|
+
width: y,
|
|
209
|
+
height: y
|
|
210
210
|
}
|
|
211
211
|
}),
|
|
212
|
-
o ? /* @__PURE__ */ t(
|
|
212
|
+
o ? /* @__PURE__ */ t(W, {
|
|
213
213
|
paddingLeft: 8,
|
|
214
|
-
children:
|
|
214
|
+
children: I({
|
|
215
215
|
content: o,
|
|
216
|
-
defaultIconSize:
|
|
217
|
-
renderText:
|
|
216
|
+
defaultIconSize: S,
|
|
217
|
+
renderText: _
|
|
218
218
|
})
|
|
219
219
|
}) : null
|
|
220
220
|
]
|
|
221
221
|
})
|
|
222
222
|
]
|
|
223
223
|
}),
|
|
224
|
-
disabled: e.disabled ||
|
|
224
|
+
disabled: e.disabled || r || s,
|
|
225
225
|
role: "button"
|
|
226
226
|
};
|
|
227
227
|
if (process.env.NODE_ENV !== "production" && (e.to === "" || e.href === "")) throw Error("to or href props are empty strings");
|
|
228
228
|
if (e.fake) return /* @__PURE__ */ t(d, _objectSpreadProps(_objectSpread({
|
|
229
229
|
maybe: !0
|
|
230
|
-
},
|
|
230
|
+
}, v), {
|
|
231
231
|
role: "presentation",
|
|
232
232
|
"aria-hidden": "true"
|
|
233
233
|
}));
|
|
234
234
|
if (e.submit) return /* @__PURE__ */ t(d, _objectSpread({
|
|
235
235
|
type: "submit",
|
|
236
|
-
formId:
|
|
236
|
+
formId: f,
|
|
237
237
|
onPress: ()=>{}
|
|
238
|
-
},
|
|
239
|
-
if (e.onPress) return /* @__PURE__ */ t(d, _objectSpreadProps(_objectSpread({},
|
|
240
|
-
onPress:
|
|
238
|
+
}, v));
|
|
239
|
+
if (e.onPress) return /* @__PURE__ */ t(d, _objectSpreadProps(_objectSpread({}, v), {
|
|
240
|
+
onPress: (E)=>{
|
|
241
|
+
const k = e.onPress(E);
|
|
242
|
+
k && (b(!0), k.finally(()=>b(!1)));
|
|
243
|
+
}
|
|
241
244
|
}));
|
|
242
|
-
if (e.to || e.to === "") return /* @__PURE__ */ t(d, _objectSpreadProps(_objectSpread({},
|
|
245
|
+
if (e.to || e.to === "") return /* @__PURE__ */ t(d, _objectSpreadProps(_objectSpread({}, v), {
|
|
243
246
|
to: e.to,
|
|
244
247
|
fullPageOnWebView: e.fullPageOnWebView
|
|
245
248
|
}));
|
|
246
|
-
if (e.href || e.href === "") return /* @__PURE__ */ t(d, _objectSpreadProps(_objectSpread({},
|
|
249
|
+
if (e.href || e.href === "") return /* @__PURE__ */ t(d, _objectSpreadProps(_objectSpread({}, v), {
|
|
247
250
|
href: e.href,
|
|
248
251
|
newTab: e.newTab,
|
|
249
252
|
loadOnTop: e.loadOnTop
|
|
250
253
|
}));
|
|
251
254
|
if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
|
|
252
255
|
return null;
|
|
253
|
-
}),
|
|
254
|
-
var
|
|
255
|
-
const { formStatus: i } =
|
|
256
|
-
name:
|
|
256
|
+
}), Se = /*#__PURE__*/ a.forwardRef((e, n)=>{
|
|
257
|
+
var s;
|
|
258
|
+
const { formStatus: i } = B(), u = L(), { analytics: f } = j(), c = ()=>f.eventFormat === "google-analytics-4" ? {
|
|
259
|
+
name: C.userInteraction,
|
|
257
260
|
component_type: "link",
|
|
258
|
-
component_copy:
|
|
261
|
+
component_copy: P(e.children)
|
|
259
262
|
} : {
|
|
260
|
-
category:
|
|
261
|
-
action:
|
|
262
|
-
label:
|
|
263
|
-
}, o = (
|
|
263
|
+
category: D.userInteraction,
|
|
264
|
+
action: G.linkTapped,
|
|
265
|
+
label: P(e.children)
|
|
266
|
+
}, o = (m)=>/* @__PURE__ */ t(M, {
|
|
264
267
|
medium: !0,
|
|
265
268
|
truncate: 1,
|
|
266
269
|
color: "inherit",
|
|
267
|
-
children:
|
|
268
|
-
}),
|
|
269
|
-
className:
|
|
270
|
-
[
|
|
271
|
-
[
|
|
270
|
+
children: m
|
|
271
|
+
}), l = {
|
|
272
|
+
className: R(ie, {
|
|
273
|
+
[oe]: u,
|
|
274
|
+
[ae]: e.aligned
|
|
272
275
|
}),
|
|
273
|
-
trackingEvent: (
|
|
276
|
+
trackingEvent: (s = e.trackingEvent) != null ? s : e.trackEvent ? c() : void 0,
|
|
274
277
|
dataAttributes: _objectSpread({
|
|
275
278
|
"component-name": "ButtonLink"
|
|
276
279
|
}, e.dataAttributes),
|
|
277
280
|
children: /* @__PURE__ */ t("div", {
|
|
278
|
-
className:
|
|
279
|
-
children:
|
|
281
|
+
className: se,
|
|
282
|
+
children: I({
|
|
280
283
|
content: e.children,
|
|
281
|
-
defaultIconSize:
|
|
284
|
+
defaultIconSize: V,
|
|
282
285
|
renderText: o
|
|
283
286
|
})
|
|
284
287
|
}),
|
|
@@ -286,59 +289,59 @@ const y = (param)=>{
|
|
|
286
289
|
};
|
|
287
290
|
if (process.env.NODE_ENV !== "production" && (e.to === "" || e.href === "")) throw Error("to or href props are empty strings");
|
|
288
291
|
if (e.onPress) return /* @__PURE__ */ t(d, _objectSpreadProps(_objectSpread({
|
|
289
|
-
ref:
|
|
290
|
-
},
|
|
292
|
+
ref: n
|
|
293
|
+
}, l), {
|
|
291
294
|
onPress: e.onPress
|
|
292
295
|
}));
|
|
293
296
|
if (e.to || e.to === "") return /* @__PURE__ */ t(d, _objectSpreadProps(_objectSpread({
|
|
294
|
-
ref:
|
|
295
|
-
},
|
|
297
|
+
ref: n
|
|
298
|
+
}, l), {
|
|
296
299
|
to: e.to,
|
|
297
300
|
fullPageOnWebView: e.fullPageOnWebView
|
|
298
301
|
}));
|
|
299
302
|
if (e.href || e.href === "") return /* @__PURE__ */ t(d, _objectSpreadProps(_objectSpread({
|
|
300
|
-
ref:
|
|
301
|
-
},
|
|
303
|
+
ref: n
|
|
304
|
+
}, l), {
|
|
302
305
|
href: e.href,
|
|
303
306
|
newTab: e.newTab
|
|
304
307
|
}));
|
|
305
308
|
if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
|
|
306
309
|
return null;
|
|
307
|
-
}),
|
|
308
|
-
var { dataAttributes: e } = _param,
|
|
310
|
+
}), _e = /*#__PURE__*/ a.forwardRef((_param, i)=>/* @__PURE__ */ {
|
|
311
|
+
var { dataAttributes: e } = _param, n = _objectWithoutProperties(_param, [
|
|
309
312
|
"dataAttributes"
|
|
310
313
|
]);
|
|
311
|
-
return t(
|
|
314
|
+
return t(w, _objectSpreadProps(_objectSpread({
|
|
312
315
|
dataAttributes: _objectSpread({
|
|
313
316
|
"component-name": "ButtonPrimary"
|
|
314
317
|
}, e)
|
|
315
|
-
},
|
|
318
|
+
}, n), {
|
|
316
319
|
ref: i,
|
|
317
320
|
type: "primary"
|
|
318
321
|
}));
|
|
319
|
-
}),
|
|
320
|
-
var { dataAttributes: e } = _param,
|
|
322
|
+
}), Te = /*#__PURE__*/ a.forwardRef((_param, i)=>/* @__PURE__ */ {
|
|
323
|
+
var { dataAttributes: e } = _param, n = _objectWithoutProperties(_param, [
|
|
321
324
|
"dataAttributes"
|
|
322
325
|
]);
|
|
323
|
-
return t(
|
|
326
|
+
return t(w, _objectSpreadProps(_objectSpread({
|
|
324
327
|
dataAttributes: _objectSpread({
|
|
325
328
|
"component-name": "ButtonSecondary"
|
|
326
329
|
}, e)
|
|
327
|
-
},
|
|
330
|
+
}, n), {
|
|
328
331
|
ref: i,
|
|
329
332
|
type: "secondary"
|
|
330
333
|
}));
|
|
331
|
-
}),
|
|
332
|
-
var { dataAttributes: e } = _param,
|
|
334
|
+
}), we = /*#__PURE__*/ a.forwardRef((_param, i)=>/* @__PURE__ */ {
|
|
335
|
+
var { dataAttributes: e } = _param, n = _objectWithoutProperties(_param, [
|
|
333
336
|
"dataAttributes"
|
|
334
337
|
]);
|
|
335
|
-
return t(
|
|
338
|
+
return t(w, _objectSpreadProps(_objectSpread({
|
|
336
339
|
dataAttributes: _objectSpread({
|
|
337
340
|
"component-name": "ButtonDanger"
|
|
338
341
|
}, e)
|
|
339
|
-
},
|
|
342
|
+
}, n), {
|
|
340
343
|
ref: i,
|
|
341
344
|
type: "danger"
|
|
342
345
|
}));
|
|
343
346
|
});
|
|
344
|
-
export {
|
|
347
|
+
export { we as ButtonDanger, Se as ButtonLink, _e as ButtonPrimary, Te as ButtonSecondary };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import "./sprinkles.css.ts.vanilla.js";
|
|
2
2
|
import "./callout.css.ts.vanilla.js";
|
|
3
|
-
var y = "_14g0jmy1
|
|
3
|
+
var y = "_14g0jmy1 _1y2v1nf6g _1y2v1nf6u _1y2v1nf78 _1y2v1nf7m _1y2v1nf5o _1y2v1nf9v _1y2v1nfa4", _ = "_14g0jmy3 _1y2v1nf6a";
|
|
4
4
|
export { y as container, _ as content };
|
package/dist-es/callout.js
CHANGED
|
@@ -54,27 +54,31 @@ import c from "./stack.js";
|
|
|
54
54
|
import h from "./inline.js";
|
|
55
55
|
import g from "./box.js";
|
|
56
56
|
import { useTheme as x } from "./hooks.js";
|
|
57
|
-
import {
|
|
58
|
-
import { Text3 as
|
|
59
|
-
import
|
|
60
|
-
import
|
|
61
|
-
import
|
|
62
|
-
import
|
|
57
|
+
import { useThemeVariant as v, ThemeVariant as k } from "./theme-variant-context.js";
|
|
58
|
+
import { Text3 as C, Text2 as I } from "./text.js";
|
|
59
|
+
import T from "./generated/mistica-icons/icon-close-regular.js";
|
|
60
|
+
import b from "./icon-button.js";
|
|
61
|
+
import y from "classnames";
|
|
62
|
+
import B from "./button-group.js";
|
|
63
63
|
import { container as j, content as z } from "./callout.css-mistica.js";
|
|
64
64
|
import { sprinkles as A } from "./sprinkles.css-mistica.js";
|
|
65
65
|
import { vars as e } from "./skins/skin-contract.css-mistica.js";
|
|
66
66
|
import { getPrefixedDataAttributes as N } from "./utils/dom.js";
|
|
67
|
-
import { jsx as r, jsxs as
|
|
67
|
+
import { jsx as r, jsxs as t } from "./_virtual/jsx-runtime.js";
|
|
68
68
|
const O = (param)=>{
|
|
69
|
-
let { title:
|
|
70
|
-
const u =
|
|
69
|
+
let { title: n , description: p , icon: i , onClose: a , button: l , secondaryButton: s , buttonLink: m , "aria-label": o , dataAttributes: f } = param;
|
|
70
|
+
const u = v(), { texts: d } = x();
|
|
71
71
|
return /* @__PURE__ */ r("section", _objectSpreadProps(_objectSpread({
|
|
72
|
-
className:
|
|
73
|
-
background:
|
|
72
|
+
className: y(j, A({
|
|
73
|
+
background: {
|
|
74
|
+
inverse: e.colors.backgroundContainer,
|
|
75
|
+
alternative: e.colors.backgroundContainer,
|
|
76
|
+
default: e.colors.backgroundContainerAlternative
|
|
77
|
+
}[u]
|
|
74
78
|
})),
|
|
75
|
-
"aria-label":
|
|
79
|
+
"aria-label": o != null ? o : n
|
|
76
80
|
}, N(f, "Callout")), {
|
|
77
|
-
children: /* @__PURE__ */
|
|
81
|
+
children: /* @__PURE__ */ t(k, {
|
|
78
82
|
isInverse: !1,
|
|
79
83
|
children: [
|
|
80
84
|
i && /* @__PURE__ */ r(g, {
|
|
@@ -83,23 +87,23 @@ const O = (param)=>{
|
|
|
83
87
|
}),
|
|
84
88
|
/* @__PURE__ */ r("div", {
|
|
85
89
|
className: z,
|
|
86
|
-
children: /* @__PURE__ */
|
|
90
|
+
children: /* @__PURE__ */ t(c, {
|
|
87
91
|
space: 16,
|
|
88
92
|
children: [
|
|
89
|
-
/* @__PURE__ */
|
|
93
|
+
/* @__PURE__ */ t(h, {
|
|
90
94
|
fullWidth: !0,
|
|
91
95
|
alignItems: "flex-start",
|
|
92
96
|
space: "between",
|
|
93
97
|
children: [
|
|
94
|
-
/* @__PURE__ */
|
|
98
|
+
/* @__PURE__ */ t(c, {
|
|
95
99
|
space: 4,
|
|
96
100
|
children: [
|
|
97
|
-
/* @__PURE__ */ r(
|
|
101
|
+
/* @__PURE__ */ r(C, {
|
|
98
102
|
as: "h2",
|
|
99
103
|
regular: !0,
|
|
100
|
-
children:
|
|
104
|
+
children: n
|
|
101
105
|
}),
|
|
102
|
-
/* @__PURE__ */ r(
|
|
106
|
+
/* @__PURE__ */ r(I, {
|
|
103
107
|
as: "p",
|
|
104
108
|
regular: !0,
|
|
105
109
|
color: e.colors.textSecondary,
|
|
@@ -107,7 +111,7 @@ const O = (param)=>{
|
|
|
107
111
|
})
|
|
108
112
|
]
|
|
109
113
|
}),
|
|
110
|
-
|
|
114
|
+
a && /* @__PURE__ */ r(b, {
|
|
111
115
|
size: 40,
|
|
112
116
|
style: {
|
|
113
117
|
display: "flex",
|
|
@@ -115,18 +119,18 @@ const O = (param)=>{
|
|
|
115
119
|
alignItems: "center",
|
|
116
120
|
justifyContent: "center"
|
|
117
121
|
},
|
|
118
|
-
onPress:
|
|
122
|
+
onPress: a,
|
|
119
123
|
"aria-label": d.closeButtonLabel,
|
|
120
|
-
children: /* @__PURE__ */ r(
|
|
124
|
+
children: /* @__PURE__ */ r(T, {
|
|
121
125
|
size: 24,
|
|
122
126
|
color: e.colors.neutralHigh
|
|
123
127
|
})
|
|
124
128
|
})
|
|
125
129
|
]
|
|
126
130
|
}),
|
|
127
|
-
(l ||
|
|
131
|
+
(l || s || m) && /* @__PURE__ */ r(B, {
|
|
128
132
|
primaryButton: l,
|
|
129
|
-
secondaryButton:
|
|
133
|
+
secondaryButton: s,
|
|
130
134
|
link: m
|
|
131
135
|
})
|
|
132
136
|
]
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import "./sprinkles.css.ts.vanilla.js";
|
|
2
2
|
import "./card.css.ts.vanilla.js";
|
|
3
|
-
var _ = "_15e54s91
|
|
4
|
-
export { _ as actions, y as boxed, f as cardAction, a as cardActionIconButton, r as cardActionInverse,
|
|
3
|
+
var _ = "_15e54s91 _1y2v1nf5o _1y2v1nf6a _1y2v1nf64", y = "_15e54s93 _1y2v1nf5o", f = "_15e54s9j _1y2v1nf84 _1y2v1nf8j _1y2v1nf5o _1y2v1nf63 _1y2v1nf5x _1y2v1nf9n", a = "_1y2v1nf5o _1y2v1nf86 _1y2v1nf8l _1y2v1nf63 _1y2v1nf5x", r = "_15e54s9k _1y2v1nf84 _1y2v1nf8j _1y2v1nf5o _1y2v1nf63 _1y2v1nf5x _1y2v1nf9n", o = "_15e54s98 _1y2v1nf78 _1y2v1nf7m _1y2v1nf6h _1y2v1nf6v _1y2v1nf5o _1y2v1nf6a _1y2v1nf5u _1y2v1nf7v", e = "_15e54s9f _1y2v1nf5o _1y2v1nf6a _1y2v1nf5u _1y2v1nf60", d = "_15e54s9g", s = "_1y2v1nf5o _1y2v1nf5u _1y2v1nf8b _1y2v1nf7v", t = "_15e54s96 _1y2v1nf78 _1y2v1nf7m _1y2v1nf5o _1y2v1nf6a _1y2v1nf6g _1y2v1nf6v _1y2v1nf5u _1y2v1nf60", i = "_15e54s9a _1y2v1nf6g _1y2v1nf6u _1y2v1nf78 _1y2v1nf7m _1y2v1nf5o _1y2v1nf8b _1y2v1nf5u _1y2v1nf60 _1y2v1nf6a", c = "_15e54s9c _1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h _1y2v1nf5o _1y2v1nf8b _1y2v1nf7v _1y2v1nf9m _1y2v1nf5i", p = "_15e54s9d _1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h _1y2v1nf5o _1y2v1nf8b _1y2v1nf7v _1y2v1nf9m _1y2v1nf5i";
|
|
4
|
+
export { _ as actions, y as boxed, f as cardAction, a as cardActionIconButton, r as cardActionInverse, o as dataCard, e as displayCard, d as displayCardGradient, s as mediaCard, t as mediaCardContent, i as snapCard, c as snapCardTouchableHover, p as snapCardTouchableHoverTransparent };
|