@wix/editor-react-components 1.2383.0 → 1.2385.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.
|
@@ -121,13 +121,49 @@ function statesRuntime(namespace, stateMapping) {
|
|
|
121
121
|
}
|
|
122
122
|
return classNames.join(" ");
|
|
123
123
|
}
|
|
124
|
-
var _namespace_$
|
|
124
|
+
var _namespace_$7 = "wds_1_297_0_colors";
|
|
125
|
+
classesRuntime.bind(null, _namespace_$7);
|
|
126
|
+
statesRuntime.bind(null, _namespace_$7);
|
|
127
|
+
var _namespace_$6 = "wds_1_297_0_defaultscrollbar";
|
|
125
128
|
classesRuntime.bind(null, _namespace_$6);
|
|
126
129
|
statesRuntime.bind(null, _namespace_$6);
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
130
|
+
const noop = () => {
|
|
131
|
+
};
|
|
132
|
+
let depLogger = {
|
|
133
|
+
log: noop
|
|
134
|
+
};
|
|
135
|
+
const LOG_PREFIX = `@wix/design-system: [WARNING] `;
|
|
136
|
+
if (process.env.NODE_ENV !== "production") {
|
|
137
|
+
class DeprecationLogger {
|
|
138
|
+
constructor() {
|
|
139
|
+
this.reportedMessages = /* @__PURE__ */ new Set();
|
|
140
|
+
this.printWarning = (msg) => {
|
|
141
|
+
const message = `${LOG_PREFIX}${msg}`;
|
|
142
|
+
if (console) {
|
|
143
|
+
console.warn(message);
|
|
144
|
+
}
|
|
145
|
+
try {
|
|
146
|
+
throw new Error(message);
|
|
147
|
+
} catch (x) {
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
this.log = this.log.bind(this);
|
|
151
|
+
}
|
|
152
|
+
/**
|
|
153
|
+
* Log a warning message, once per key. (Calling `log` twice with same key would result in one log)
|
|
154
|
+
*
|
|
155
|
+
* @memberof DeprecationLogger
|
|
156
|
+
*/
|
|
157
|
+
log(message) {
|
|
158
|
+
if (!this.reportedMessages.has(message)) {
|
|
159
|
+
this.reportedMessages.add(message);
|
|
160
|
+
this.printWarning(message);
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
depLogger = new DeprecationLogger();
|
|
165
|
+
}
|
|
166
|
+
const deprecationLog = (msg) => depLogger.log(msg);
|
|
131
167
|
const filterObject = (object, filter = () => true) => {
|
|
132
168
|
const output = {};
|
|
133
169
|
for (const key in object) {
|
|
@@ -137,13 +173,17 @@ const filterObject = (object, filter = () => true) => {
|
|
|
137
173
|
}
|
|
138
174
|
return output;
|
|
139
175
|
};
|
|
140
|
-
var _namespace_$
|
|
141
|
-
var _style_$3 = classesRuntime.bind(null, _namespace_$
|
|
142
|
-
statesRuntime.bind(null, _namespace_$
|
|
176
|
+
var _namespace_$5 = "wds_1_297_0_Box";
|
|
177
|
+
var _style_$3 = classesRuntime.bind(null, _namespace_$5);
|
|
178
|
+
statesRuntime.bind(null, _namespace_$5);
|
|
143
179
|
var st$3 = _style_$3;
|
|
144
|
-
var classes$3 = { "root": "
|
|
145
|
-
var vars$1 = { "gap": "--
|
|
146
|
-
var _namespace_$
|
|
180
|
+
var classes$3 = { "root": "wds_1_297_0_Box__root" };
|
|
181
|
+
var vars$1 = { "gap": "--wds_1_297_0_Box-gap" };
|
|
182
|
+
var _namespace_$4 = "wds_1_297_0_colorsjs";
|
|
183
|
+
classesRuntime.bind(null, _namespace_$4);
|
|
184
|
+
statesRuntime.bind(null, _namespace_$4);
|
|
185
|
+
var stVars$1 = { "D10": "var(--wds-color-black-100, var(--wsr-color-D10, #000624))", "D20": "var(--wds-color-black-200, var(--wsr-color-D20, #333853))", "D30": "var(--wds-color-black-300, var(--wsr-color-D30, #595D70))", "D40": "var(--wds-color-black-400, var(--wsr-color-D40, #868AA5))", "D50": "var(--wds-color-black-500, var(--wsr-color-D50, #ACAFC4))", "D55": "var(--wds-color-black-550, var(--wsr-color-D55, #CFD1DC))", "D60": "var(--wds-color-black-600, var(--wsr-color-D60, #DFE5EB))", "D70": "var(--wds-color-black-700, var(--wsr-color-D70, #ECEFF3))", "D75": "var(--wds-color-black-750, var(--wsr-color-D75, #F7F8F8))", "D80": "var(--wds-color-white, var(--wsr-color-D80, #FFFFFF))", "B00": "var(--wds-color-blue-0, var(--wsr-color-B00, #084EBD))", "B05": "var(--wds-color-blue-50, var(--wsr-color-B05, #0F62E6))", "B10": "var(--wds-color-blue-100, var(--wsr-color-B10, #116DFF))", "B20": "var(--wds-color-blue-200, var(--wsr-color-B20, #5999FF))", "B30": "var(--wds-color-blue-300, var(--wsr-color-B30, #A8CAFF))", "B40": "var(--wds-color-blue-400, var(--wsr-color-B40, #D6E6FE))", "B50": "var(--wds-color-blue-500, var(--wsr-color-B50, #E7F0FF))", "B60": "var(--wds-color-blue-600, var(--wsr-color-B60, #F4F7FF))", "R00": "var(--wds-color-red-0, var(--wsr-color-R00, #B81206))", "R05": "var(--wds-color-red-50, var(--wsr-color-R05, #D0180B))", "R10": "var(--wds-color-red-100, var(--wsr-color-R10, #E62214))", "R20": "var(--wds-color-red-200, var(--wsr-color-R20, #FF6D63))", "R30": "var(--wds-color-red-300, var(--wsr-color-R30, #F69891))", "R40": "var(--wds-color-red-400, var(--wsr-color-R40, #FBD0CD))", "R50": "var(--wds-color-red-500, var(--wsr-color-R50, #FDE3E1))", "R60": "var(--wds-color-red-600, var(--wsr-color-R60, #FDECEB))", "P00": "var(--wds-color-purple-0, var(--wsr-color-P00, #7416A5))", "P05": "var(--wds-color-purple-50, var(--wsr-color-P05, #8E1DD1))", "P10": "var(--wds-color-purple-100, var(--wsr-color-P10, #9A27D5))", "P20": "var(--wds-color-purple-200, var(--wsr-color-P20, #C161F0))", "P30": "var(--wds-color-purple-300, var(--wsr-color-P30, #CF8CF1))", "P40": "var(--wds-color-purple-400, var(--wsr-color-P40, #E3C3F4))", "P50": "var(--wds-color-purple-500, var(--wsr-color-P50, #F1E0F9))", "P60": "var(--wds-color-purple-600, var(--wsr-color-P60, #F7EDFC))", "G00": "var(--wds-color-green-0, var(--wsr-color-G00, #1D8649))", "G05": "var(--wds-color-green-50, var(--wsr-color-G05, #229954))", "G10": "var(--wds-color-green-100, var(--wsr-color-G10, #25A55A))", "G20": "var(--wds-color-green-200, var(--wsr-color-G20, #51B77B))", "G30": "var(--wds-color-green-300, var(--wsr-color-G30, #87CEA5))", "G40": "var(--wds-color-green-400, var(--wsr-color-G40, #C8E8D6))", "G50": "var(--wds-color-green-500, var(--wsr-color-G50, #E1F4EB))", "G60": "var(--wds-color-green-600, var(--wsr-color-G60, #E9F6EE))", "Y00": "var(--wds-color-yellow-0, var(--wsr-color-Y00, #D59900))", "Y05": "var(--wds-color-yellow-50, var(--wsr-color-Y05, #E7A600))", "Y10": "var(--wds-color-yellow-100, var(--wsr-color-Y10, #FFB700))", "Y20": "var(--wds-color-yellow-200, var(--wsr-color-Y20, #FFC23D))", "Y30": "var(--wds-color-yellow-300, var(--wsr-color-Y30, #FFD16E))", "Y40": "var(--wds-color-yellow-400, var(--wsr-color-Y40, #FFE2A5))", "Y50": "var(--wds-color-yellow-500, var(--wsr-color-Y50, #FFF0D1))", "Y60": "var(--wds-color-yellow-600, var(--wsr-color-Y60, #FFF6E5))", "O00": "var(--wds-color-orange-0, var(--wsr-color-O00, #DF4D00))", "O05": "var(--wds-color-orange-50, var(--wsr-color-O05, #F05300))", "O10": "var(--wds-color-orange-100, var(--wsr-color-O10, #FE620F))", "O20": "var(--wds-color-orange-200, var(--wsr-color-O20, #FF7D38))", "O30": "var(--wds-color-orange-300, var(--wsr-color-O30, #FCBD9C))", "O40": "var(--wds-color-orange-400, var(--wsr-color-O40, #FDDBC8))", "O50": "var(--wds-color-orange-500, var(--wsr-color-O50, #FEE5D7))", "O60": "var(--wds-color-orange-600, var(--wsr-color-O60, #FEEFE6))", "F00": "var(--wds-color-blue-300, var(--wsr-color-F00, #A6D0FF))", "A1": "var(--wsr-color-A1, #1684EA)", "A2": "var(--wsr-color-A2, #17B0E2)", "A3": "var(--wsr-color-A3, #6544F9)", "A4": "var(--wsr-color-A4, #3D9FA1)", "A5": "var(--wsr-color-A5, #D04091)", "A6": "var(--wsr-color-A6, #FDB10C)", "B1": "var(--wsr-color-B1, #FF66C5)", "B2": "var(--wsr-color-B2, #FF9F41)", "B3": "var(--wsr-color-B3, #F9677A)", "B4": "var(--wsr-color-B4, #1550AC)", "C1": "var(--wsr-color-C1, #54CE91)", "C2": "var(--wsr-color-C2, #1989E5)", "C3": "var(--wsr-color-C3, #64B4F6)", "C4": "var(--wsr-color-C4, #FF9290)", "D10-03": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 3%, transparent)", "D10-05": "var(--wds-color-black-100-transparent-5, var(--wsr-color-D10-05, rgba(0, 6, 36, 0.05)))", "D10-06": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 6%, transparent)", "D10-10": "var(--wds-color-black-100-transparent-10, var(--wsr-color-D10-10, rgba(0, 6, 36, 0.10)))", "D10-12": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 12%, transparent)", "D10-18": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 18%, transparent)", "D10-20": "var(--wds-color-black-100-transparent-20, var(--wsr-color-D10-20, rgba(0, 6, 36, 0.20)))", "D10-24": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 24%, transparent)", "D10-30": "var(--wds-color-black-100-transparent-30, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)))", "D10-36": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 36%, transparent)", "D10-42": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 42%, transparent)", "D10-66": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 66%, transparent)", "D10-90": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 90%, transparent)", "D10-96": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 96%, transparent)", "D20-48": "color-mix(in srgb, var(--wds-color-black-200, var(--wsr-color-D20, #333853)) 48%, transparent)", "D20-54": "color-mix(in srgb, var(--wds-color-black-200, var(--wsr-color-D20, #333853)) 54%, transparent)", "D20-60": "var(--wds-color-black-200-transparent-60, var(--wsr-color-D20-60, rgba(51, 56, 83, 0.60)))", "D20-72": "color-mix(in srgb, var(--wds-color-black-200, var(--wsr-color-D20, #333853)) 72%, transparent)", "D40-20": "var(--wds-color-black-300-transparent-20, var(--wsr-color-D40-20, rgba(134, 138, 165, 0.20)))", "D80-10": "var(--wds-color-white-transparent-10, var(--wsr-color-D80-10, rgba(255, 255, 255, 0.10)))", "D80-20": "var(--wds-color-white-transparent-20, var(--wsr-color-D80-20, rgba(255, 255, 255, 0.20)))", "D80-30": "var(--wds-color-white-transparent-30, var(--wsr-color-D80-30, rgba(255, 255, 255, 0.30)))", "D80-48": "color-mix(in srgb, var(--wds-color-white, var(--wsr-color-D80, #FFFFFF)) 48%, transparent)", "D80-60": "color-mix(in srgb, var(--wds-color-white, var(--wsr-color-D80, #FFFFFF)) 60%, transparent)", "D80-70": "var(--wds-color-white-transparent-70, var(--wsr-color-D80-70, rgba(255, 255, 255, 0.70)))", "B00-24": "color-mix(in srgb, var(--wds-color-blue-0, var(--wsr-color-B00, #084EBD)) 24%, transparent)", "B00-42": "color-mix(in srgb, var(--wds-color-blue-0, var(--wsr-color-B00, #084EBD)) 42%, transparent)", "B00-48": "color-mix(in srgb, var(--wds-color-blue-0, var(--wsr-color-B00, #084EBD)) 48%, transparent)", "D10-00": "var(--wds-color-black-100-transparent-0, var(--wsr-color-D10-00, rgba(22, 45, 61, 0.00)))", "D10-54": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 54%, transparent)", "D80-00": "var(--wds-color-white-transparent-0, var(--wsr-color-D80-00, rgba(255, 255, 255, 0)))", "D80-42": "color-mix(in srgb, var(--wds-color-white, var(--wsr-color-D80, #FFFFFF)) 42%, transparent)", "D80-50": "var(--wds-color-white-transparent-50, var(--wsr-color-D80-50, rgba(255, 255, 255, 0.50)))", "D80-66": "color-mix(in srgb, var(--wds-color-white, var(--wsr-color-D80, #FFFFFF)) 66%, transparent)", "D80-96": "color-mix(in srgb, var(--wds-color-white, var(--wsr-color-D80, #FFFFFF)) 96%, transparent)", "D80-97": "color-mix(in srgb, var(--wds-color-white, var(--wsr-color-D80, #FFFFFF)) 97%, transparent)", "B00-60": "color-mix(in srgb, var(--wds-color-blue-0, var(--wsr-color-B00, #084EBD)) 60%, transparent)", "B10-18": "color-mix(in srgb, var(--wds-color-blue-100, var(--wsr-color-B10, #116DFF)) 18%, transparent)", "THEME-COLOR-00": "var(--wds-color-blue-0, var(--wsr-color-B00, #084EBD))", "THEME-COLOR-05": "var(--wds-color-blue-50, var(--wsr-color-B05, #0F62E6))", "THEME-COLOR-10": "var(--wds-color-blue-100, var(--wsr-color-B10, #116DFF))", "THEME-COLOR-20": "var(--wds-color-blue-200, var(--wsr-color-B20, #5999FF))", "THEME-COLOR-30": "var(--wds-color-blue-300, var(--wsr-color-B30, #A8CAFF))", "THEME-COLOR-40": "var(--wds-color-blue-400, var(--wsr-color-B40, #D6E6FE))", "THEME-COLOR-50": "var(--wds-color-blue-500, var(--wsr-color-B50, #E7F0FF))", "THEME-COLOR-60": "var(--wds-color-blue-600, var(--wsr-color-B60, #F4F7FF))", "THEME-TEXT-COLOR-PRIMARY": "var(--wds-color-black-100, var(--wsr-color-D10, #000624))", "THEME-TEXT-COLOR-PRIMARY-LIGHT": "var(--wds-color-white, var(--wsr-color-D80, #FFFFFF))", "THEME-TEXT-COLOR-SECONDARY": "var(--wds-color-black-200, var(--wsr-color-D20, #333853))", "THEME-TEXT-COLOR-SECONDARY-LIGHT": "var(--wds-color-black-400, var(--wsr-color-D40, #868AA5))", "THEME-DIVIDER-COLOR": "var(--wds-color-black-600, var(--wsr-color-D60, #DFE5EB))", "Gradient-AI01": "var(--wds-color-fill-ai-primary, linear-gradient(60deg, #0021FF -31%, #116DFF 65%, #5FF2AE 96%))", "Gradient-AI02": "var(--wds-color-fill-ai-primary-hover, linear-gradient(60deg, #0021FF -177%, #116DFF 32%, #5FF2AE 96%))", "SECTION-HEADER-COLOR-BG": "var(--wds-section-header-fill-neutral, var(--wsr-section-header-color-bg, #f7f8f8))", "SECTION-HEADER-COLOR-BORDER": "var(--wds-color-border-dark-secondary, var(--wsr-section-header-color-border, #dfe5eb))" };
|
|
186
|
+
var _namespace_$3 = "wds_1_297_0_spacing";
|
|
147
187
|
classesRuntime.bind(null, _namespace_$3);
|
|
148
188
|
statesRuntime.bind(null, _namespace_$3);
|
|
149
189
|
var stVars = { "spacing01": "1px", "spacing02": "2px", "spacing03": "3px", "spacing06": "6px", "spacing12": "12px", "spacing18": "18px", "spacing24": "24px", "spacing30": "30px", "spacing36": "36px", "spacing42": "42px", "spacing48": "48px", "spacing78": "78px", "spacing90": "90px", "DefaultSpacing": "6px", "Spacing": "var(--wds-space-100, 6px)", "SP1": "calc(var(--wds-space-100, 6px) * 1)", "SP2": "calc(var(--wds-space-100, 6px) * 2)", "SP3": "calc(var(--wds-space-100, 6px) * 3)", "SP4": "calc(var(--wds-space-100, 6px) * 4)", "SP5": "calc(var(--wds-space-100, 6px) * 5)", "SP6": "calc(var(--wds-space-100, 6px) * 6)", "SP7": "calc(var(--wds-space-100, 6px) * 7)", "SP8": "calc(var(--wds-space-100, 6px) * 8)", "SP9": "calc(var(--wds-space-100, 6px) * 9)", "SP10": "calc(var(--wds-space-100, 6px) * 10)" };
|
|
@@ -200,6 +240,11 @@ const getColorStyles = (props) => {
|
|
|
200
240
|
return styles2;
|
|
201
241
|
};
|
|
202
242
|
const Box = forwardRef(({ inline = false, direction = DIRECTION.horizontal, children, className, align, verticalAlign, dataHook, gap, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginTop, marginRight, marginBottom, marginLeft, minWidth, maxWidth, width, minHeight, maxHeight, height, color, backgroundColor, border, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, style, role, ariaLabel, "data-hook": dataHookByKebabCase, ...nativeStyles }, ref) => {
|
|
243
|
+
useEffect(() => {
|
|
244
|
+
if (typeof dataHookByKebabCase !== "undefined") {
|
|
245
|
+
deprecationLog('<Box/> - prop "data-hook" is deprecated and will be removed in next major release, please use "dataHook" instead.');
|
|
246
|
+
}
|
|
247
|
+
}, [dataHookByKebabCase]);
|
|
203
248
|
const rootClassNames = st$3(classes$3.root, {
|
|
204
249
|
inline,
|
|
205
250
|
direction,
|
|
@@ -246,12 +291,12 @@ const Box = forwardRef(({ inline = false, direction = DIRECTION.horizontal, chil
|
|
|
246
291
|
return React__default.createElement("div", { "aria-label": ariaLabel, role, tabIndex, "data-hook": dataHook, className: rootClassNames, style: rootStylesFiltered, ref }, children);
|
|
247
292
|
});
|
|
248
293
|
Box.displayName = "Box";
|
|
249
|
-
var _namespace_$2 = "
|
|
294
|
+
var _namespace_$2 = "wds_1_297_0_SkeletonGroup";
|
|
250
295
|
var _style_$2 = classesRuntime.bind(null, _namespace_$2);
|
|
251
296
|
statesRuntime.bind(null, _namespace_$2);
|
|
252
297
|
var st$2 = _style_$2;
|
|
253
|
-
var classes$2 = { "root": "
|
|
254
|
-
var vars = { "color": "--
|
|
298
|
+
var classes$2 = { "root": "wds_1_297_0_SkeletonGroup__root", "animator": "wds_1_297_0_SkeletonGroup__animator" };
|
|
299
|
+
var vars = { "color": "--wds_1_297_0_SkeletonGroup-color" };
|
|
255
300
|
const SkeletonGroupContext = React__default.createContext(void 0);
|
|
256
301
|
function SkeletonGroup({ dataHook, className, skin = "light", children, backgroundColor }) {
|
|
257
302
|
return React__default.createElement(
|
|
@@ -264,11 +309,11 @@ function SkeletonGroup({ dataHook, className, skin = "light", children, backgrou
|
|
|
264
309
|
);
|
|
265
310
|
}
|
|
266
311
|
SkeletonGroup.displayName = "SkeletonGroup";
|
|
267
|
-
var _namespace_$1 = "
|
|
312
|
+
var _namespace_$1 = "wds_1_297_0_SkeletonRectangle";
|
|
268
313
|
var _style_$1 = classesRuntime.bind(null, _namespace_$1);
|
|
269
314
|
statesRuntime.bind(null, _namespace_$1);
|
|
270
315
|
var st$1 = _style_$1;
|
|
271
|
-
var classes$1 = { "root": "
|
|
316
|
+
var classes$1 = { "root": "wds_1_297_0_SkeletonRectangle__root" };
|
|
272
317
|
const DEFAULT_HEIGHT = "100%";
|
|
273
318
|
const DEFAULT_WIDTH$1 = "100%";
|
|
274
319
|
const DEFAULT_SKIN = "light";
|
|
@@ -284,11 +329,11 @@ function SkeletonRectangle(props) {
|
|
|
284
329
|
});
|
|
285
330
|
}
|
|
286
331
|
SkeletonRectangle.displayName = "SkeletonRectangle";
|
|
287
|
-
var _namespace_ = "
|
|
332
|
+
var _namespace_ = "wds_1_297_0_SkeletonLine";
|
|
288
333
|
var _style_ = classesRuntime.bind(null, _namespace_);
|
|
289
334
|
statesRuntime.bind(null, _namespace_);
|
|
290
335
|
var st = _style_;
|
|
291
|
-
var classes = { "root": "
|
|
336
|
+
var classes = { "root": "wds_1_297_0_SkeletonLine__root" };
|
|
292
337
|
const HEIGHT = "11px";
|
|
293
338
|
const DEFAULT_WIDTH = "100%";
|
|
294
339
|
const SkeletonLine = ({ dataHook, className, width = DEFAULT_WIDTH, margin, marginLeft, marginRight, marginTop, marginBottom }) => {
|