@khanacademy/wonder-blocks-form 7.1.9 → 7.1.11

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.
Files changed (4) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/es/index.js +15 -1140
  3. package/dist/index.js +15 -1142
  4. package/package.json +6 -7
package/dist/index.js CHANGED
@@ -2,9 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _extends = require('@babel/runtime/helpers/extends');
5
+ var jsxRuntime = require('react/jsx-runtime');
6
6
  var React = require('react');
7
- var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
8
7
  var aphrodite = require('aphrodite');
9
8
  var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
10
9
  var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
@@ -34,1163 +33,37 @@ function _interopNamespace(e) {
34
33
  return Object.freeze(n);
35
34
  }
36
35
 
37
- var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
38
36
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
39
- var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
40
37
  var checkIcon__default = /*#__PURE__*/_interopDefaultLegacy(checkIcon);
41
38
  var minusIcon__default = /*#__PURE__*/_interopDefaultLegacy(minusIcon);
42
39
 
43
- const _excluded$7 = ["checked", "disabled", "error", "groupName", "id", "testId"];
44
- function mapCheckedToAriaChecked(value) {
45
- switch (value) {
46
- case true:
47
- return "true";
48
- case false:
49
- return "false";
50
- default:
51
- return "mixed";
52
- }
53
- }
54
- const size$1 = wonderBlocksTokens.spacing.medium_16;
55
- const checkSize = wonderBlocksTokens.spacing.small_12;
56
- const StyledInput$2 = wonderBlocksCore.addStyle("input");
57
- const CheckboxCore = React__namespace.forwardRef(function CheckboxCore(props, ref) {
58
- const {
59
- checked,
60
- disabled,
61
- error,
62
- groupName,
63
- id,
64
- testId
65
- } = props,
66
- sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$7);
67
- const innerRef = React__namespace.useRef(null);
68
- React__namespace.useEffect(() => {
69
- if (innerRef.current != null) {
70
- innerRef.current.indeterminate = checked == null;
71
- }
72
- }, [checked, innerRef]);
73
- const handleChange = () => {
74
- return;
75
- };
76
- const stateStyles = _generateStyles$1(checked, error);
77
- const defaultStyle = [sharedStyles$1.inputReset, sharedStyles$1.default, !disabled && stateStyles.default, disabled && sharedStyles$1.disabled];
78
- const checkboxIcon = React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
79
- color: disabled ? wonderBlocksTokens.semanticColor.icon.disabled : wonderBlocksTokens.semanticColor.icon.inverse,
80
- icon: checked ? checkIcon__default["default"] : minusIcon__default["default"],
81
- size: "small",
82
- style: [sharedStyles$1.checkboxIcon, {
83
- width: checkSize,
84
- height: checkSize
85
- }]
86
- });
87
- const ariaChecked = mapCheckedToAriaChecked(checked);
88
- return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$2, _extends__default["default"]({}, sharedProps, {
89
- ref: node => {
90
- innerRef.current = node;
91
- if (typeof ref === "function") {
92
- ref(node);
93
- } else if (ref != null) {
94
- ref.current = node;
95
- }
96
- },
97
- type: "checkbox",
98
- "aria-checked": ariaChecked,
99
- "aria-invalid": error,
100
- checked: checked != null ? checked : undefined,
101
- disabled: disabled,
102
- id: id,
103
- name: groupName,
104
- onChange: handleChange,
105
- style: defaultStyle,
106
- "data-testid": testId
107
- })), checked || checked == null ? checkboxIcon : React__namespace.createElement(React__namespace.Fragment, null));
108
- });
109
- const disabledState$1 = {
110
- border: wonderBlocksTokens.semanticColor.action.secondary.disabled.border,
111
- background: wonderBlocksTokens.semanticColor.action.secondary.disabled.background
112
- };
113
- const sharedStyles$1 = aphrodite.StyleSheet.create({
114
- inputReset: {
115
- appearance: "none",
116
- WebkitAppearance: "none",
117
- MozAppearance: "none"
118
- },
119
- default: {
120
- height: size$1,
121
- width: size$1,
122
- minHeight: size$1,
123
- minWidth: size$1,
124
- margin: 0,
125
- outline: "none",
126
- boxSizing: "border-box",
127
- borderStyle: "solid",
128
- borderWidth: wonderBlocksTokens.border.width.thin,
129
- borderRadius: 3
130
- },
131
- disabled: {
132
- cursor: "auto",
133
- backgroundColor: disabledState$1.background,
134
- borderColor: disabledState$1.border,
135
- borderWidth: wonderBlocksTokens.border.width.thin
136
- },
137
- checkboxIcon: {
138
- position: "absolute",
139
- pointerEvents: "none",
140
- margin: (size$1 - checkSize) / 2
141
- }
142
- });
143
- const styles$6 = {};
144
- const _generateStyles$1 = (checked, error) => {
145
- const styleKey = `${String(checked)}-${String(error)}`;
146
- if (styles$6[styleKey]) {
147
- return styles$6[styleKey];
148
- }
149
- const isCheckedOrIndeterminate = checked || checked == null;
150
- const actionType = error ? "destructive" : "progressive";
151
- const styleType = isCheckedOrIndeterminate ? "primary" : "secondary";
152
- const colorAction = wonderBlocksTokens.semanticColor.action[styleType][actionType];
153
- const states = {
154
- default: {
155
- border: colorAction.default.border,
156
- background: colorAction.default.background
157
- },
158
- error: {
159
- border: wonderBlocksTokens.semanticColor.status.critical.foreground,
160
- background: wonderBlocksTokens.semanticColor.status.critical.background
161
- }
162
- };
163
- let newStyles = {};
164
- if (isCheckedOrIndeterminate) {
165
- newStyles = {
166
- default: {
167
- backgroundColor: states.default.background,
168
- borderColor: states.default.border,
169
- ":focus-visible": {
170
- outline: `${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
171
- outlineOffset: 1
172
- },
173
- ":hover": {
174
- outline: `${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,
175
- outlineOffset: 1
176
- },
177
- ":active": {
178
- outline: `${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,
179
- outlineOffset: 1,
180
- background: colorAction.press.background
181
- }
182
- }
183
- };
184
- } else {
185
- const currentState = error ? states.error : states.default;
186
- newStyles = {
187
- default: {
188
- backgroundColor: currentState.background,
189
- borderColor: currentState.border,
190
- ":focus-visible": {
191
- backgroundColor: error ? states.error.background : colorAction.hover.background,
192
- outline: `${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
193
- outlineOffset: -1
194
- },
195
- ":hover": {
196
- backgroundColor: error ? states.error.background : colorAction.hover.background,
197
- outline: `${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,
198
- outlineOffset: -1
199
- },
200
- ":active": {
201
- backgroundColor: colorAction.press.background,
202
- outline: `${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,
203
- outlineOffset: -1
204
- }
205
- }
206
- };
207
- }
208
- styles$6[styleKey] = aphrodite.StyleSheet.create(newStyles);
209
- return styles$6[styleKey];
210
- };
40
+ function mapCheckedToAriaChecked(value){switch(value){case true:return "true";case false:return "false";default:return "mixed"}}const size$1=wonderBlocksTokens.spacing.medium_16;const checkSize=wonderBlocksTokens.spacing.small_12;const StyledInput$2=wonderBlocksCore.addStyle("input");const CheckboxCore=React__namespace.forwardRef(function CheckboxCore(props,ref){const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const innerRef=React__namespace.useRef(null);React__namespace.useEffect(()=>{if(innerRef.current!=null){innerRef.current.indeterminate=checked==null;}},[checked,innerRef]);const handleChange=()=>{return};const stateStyles=_generateStyles$1(checked,error);const defaultStyle=[sharedStyles$1.inputReset,sharedStyles$1.default,!disabled&&stateStyles.default,disabled&&sharedStyles$1.disabled];const checkboxIcon=jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{color:disabled?wonderBlocksTokens.semanticColor.icon.disabled:wonderBlocksTokens.semanticColor.icon.inverse,icon:checked?checkIcon__default["default"]:minusIcon__default["default"],size:"small",style:[sharedStyles$1.checkboxIcon,{width:checkSize,height:checkSize}]});const ariaChecked=mapCheckedToAriaChecked(checked);return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsx(StyledInput$2,{...sharedProps,ref:node=>{innerRef.current=node;if(typeof ref==="function"){ref(node);}else if(ref!=null){ref.current=node;}},type:"checkbox","aria-checked":ariaChecked,"aria-invalid":error,checked:checked??undefined,disabled:disabled,id:id,name:groupName,onChange:handleChange,style:defaultStyle,"data-testid":testId}),checked||checked==null?checkboxIcon:jsxRuntime.jsx(jsxRuntime.Fragment,{})]})});const disabledState$1={border:wonderBlocksTokens.semanticColor.action.secondary.disabled.border,background:wonderBlocksTokens.semanticColor.action.secondary.disabled.background};const sharedStyles$1=aphrodite.StyleSheet.create({inputReset:{appearance:"none",WebkitAppearance:"none",MozAppearance:"none"},default:{height:size$1,width:size$1,minHeight:size$1,minWidth:size$1,margin:0,outline:"none",boxSizing:"border-box",borderStyle:"solid",borderWidth:wonderBlocksTokens.border.width.thin,borderRadius:3},disabled:{cursor:"auto",backgroundColor:disabledState$1.background,borderColor:disabledState$1.border,borderWidth:wonderBlocksTokens.border.width.thin},checkboxIcon:{position:"absolute",pointerEvents:"none",margin:(size$1-checkSize)/2}});const styles$6={};const _generateStyles$1=(checked,error)=>{const styleKey=`${String(checked)}-${String(error)}`;if(styles$6[styleKey]){return styles$6[styleKey]}const isCheckedOrIndeterminate=checked||checked==null;const actionType=error?"destructive":"progressive";const styleType=isCheckedOrIndeterminate?"primary":"secondary";const colorAction=wonderBlocksTokens.semanticColor.action[styleType][actionType];const states={default:{border:colorAction.default.border,background:colorAction.default.background},error:{border:wonderBlocksTokens.semanticColor.status.critical.foreground,background:wonderBlocksTokens.semanticColor.status.critical.background}};let newStyles={};if(isCheckedOrIndeterminate){newStyles={default:{backgroundColor:states.default.background,borderColor:states.default.border,":focus-visible":{outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:1},":hover":{outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:1},":active":{outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,outlineOffset:1,background:colorAction.press.background}}};}else {const currentState=error?states.error:states.default;newStyles={default:{backgroundColor:currentState.background,borderColor:currentState.border,":focus-visible":{backgroundColor:error?states.error.background:colorAction.hover.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-1},":hover":{backgroundColor:error?states.error.background:colorAction.hover.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:-1},":active":{backgroundColor:colorAction.press.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,outlineOffset:-1}}};}styles$6[styleKey]=aphrodite.StyleSheet.create(newStyles);return styles$6[styleKey]};
211
41
 
212
- const _excluded$6 = ["checked", "disabled", "error", "groupName", "id", "testId"];
213
- const StyledInput$1 = wonderBlocksCore.addStyle("input");
214
- const RadioCore = React__namespace.forwardRef(function RadioCore(props, ref) {
215
- const handleChange = () => {
216
- return;
217
- };
218
- const {
219
- checked,
220
- disabled,
221
- error,
222
- groupName,
223
- id,
224
- testId
225
- } = props,
226
- sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$6);
227
- const stateStyles = _generateStyles(checked, error);
228
- const defaultStyle = [sharedStyles.inputReset, sharedStyles.default, !disabled && stateStyles.default, disabled && sharedStyles.disabled];
229
- return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$1, _extends__default["default"]({}, sharedProps, {
230
- type: "radio",
231
- "aria-invalid": error,
232
- checked: checked != null ? checked : undefined,
233
- disabled: disabled,
234
- id: id,
235
- name: groupName,
236
- onChange: handleChange,
237
- style: defaultStyle,
238
- "data-testid": testId,
239
- ref: ref
240
- })), disabled && checked && React__namespace.createElement("span", {
241
- style: disabledChecked
242
- }));
243
- });
244
- const disabledState = {
245
- border: wonderBlocksTokens.semanticColor.action.secondary.disabled.border,
246
- background: wonderBlocksTokens.semanticColor.action.secondary.disabled.background
247
- };
248
- const size = 16;
249
- const disabledChecked = {
250
- position: "absolute",
251
- top: size / 4,
252
- left: size / 4,
253
- height: size / 2,
254
- width: size / 2,
255
- borderRadius: wonderBlocksTokens.border.radius.radius_full,
256
- backgroundColor: wonderBlocksTokens.semanticColor.action.primary.disabled.background
257
- };
258
- const sharedStyles = aphrodite.StyleSheet.create({
259
- inputReset: {
260
- appearance: "none",
261
- WebkitAppearance: "none",
262
- MozAppearance: "none"
263
- },
264
- default: {
265
- height: size,
266
- width: size,
267
- minHeight: size,
268
- minWidth: size,
269
- margin: 0,
270
- outline: "none",
271
- boxSizing: "border-box",
272
- borderStyle: "solid",
273
- borderWidth: wonderBlocksTokens.border.width.thin,
274
- borderRadius: wonderBlocksTokens.border.radius.radius_full
275
- },
276
- disabled: {
277
- cursor: "auto",
278
- backgroundColor: disabledState.background,
279
- borderColor: disabledState.border,
280
- borderWidth: wonderBlocksTokens.border.width.thin
281
- }
282
- });
283
- const styles$5 = {};
284
- const _generateStyles = (checked, error) => {
285
- const styleKey = `${String(checked)}-${String(error)}`;
286
- if (styles$5[styleKey]) {
287
- return styles$5[styleKey];
288
- }
289
- const actionType = error ? "destructive" : "progressive";
290
- const colorAction = wonderBlocksTokens.semanticColor.action.secondary[actionType];
291
- const states = {
292
- unchecked: {
293
- border: wonderBlocksTokens.semanticColor.border.strong,
294
- background: colorAction.default.background
295
- },
296
- checked: {
297
- border: colorAction.default.foreground,
298
- background: colorAction.default.background
299
- },
300
- error: {
301
- border: wonderBlocksTokens.semanticColor.status.critical.foreground,
302
- background: wonderBlocksTokens.semanticColor.status.critical.background
303
- }
304
- };
305
- let newStyles = {};
306
- if (checked) {
307
- newStyles = {
308
- default: {
309
- backgroundColor: states.checked.background,
310
- borderColor: states.checked.border,
311
- borderWidth: size / 4,
312
- ":focus-visible": {
313
- outline: `${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
314
- outlineOffset: 1
315
- },
316
- ":hover": {
317
- outline: `${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,
318
- outlineOffset: 1
319
- },
320
- ":active": {
321
- outline: `${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,
322
- outlineOffset: 1,
323
- borderColor: colorAction.press.border
324
- }
325
- }
326
- };
327
- } else {
328
- const currentState = error ? states.error : states.unchecked;
329
- newStyles = {
330
- default: {
331
- backgroundColor: currentState.background,
332
- borderColor: currentState.border,
333
- ":focus-visible": {
334
- backgroundColor: error ? states.error.background : colorAction.hover.background,
335
- outline: `${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
336
- outlineOffset: -1
337
- },
338
- ":hover": {
339
- backgroundColor: error ? states.error.background : colorAction.hover.background,
340
- outline: `${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,
341
- outlineOffset: -1
342
- },
343
- ":active": {
344
- backgroundColor: colorAction.press.background,
345
- outline: `${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,
346
- outlineOffset: -1
347
- }
348
- }
349
- };
350
- }
351
- styles$5[styleKey] = aphrodite.StyleSheet.create(newStyles);
352
- return styles$5[styleKey];
353
- };
42
+ const StyledInput$1=wonderBlocksCore.addStyle("input");const RadioCore=React__namespace.forwardRef(function RadioCore(props,ref){const handleChange=()=>{return};const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const stateStyles=_generateStyles(checked,error);const defaultStyle=[sharedStyles.inputReset,sharedStyles.default,!disabled&&stateStyles.default,disabled&&sharedStyles.disabled];return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsx(StyledInput$1,{...sharedProps,type:"radio","aria-invalid":error,checked:checked??undefined,disabled:disabled,id:id,name:groupName,onChange:handleChange,style:defaultStyle,"data-testid":testId,ref:ref}),disabled&&checked&&jsxRuntime.jsx("span",{style:disabledChecked})]})});const disabledState={border:wonderBlocksTokens.semanticColor.action.secondary.disabled.border,background:wonderBlocksTokens.semanticColor.action.secondary.disabled.background};const size=16;const disabledChecked={position:"absolute",top:size/4,left:size/4,height:size/2,width:size/2,borderRadius:wonderBlocksTokens.border.radius.radius_full,backgroundColor:wonderBlocksTokens.semanticColor.action.primary.disabled.background};const sharedStyles=aphrodite.StyleSheet.create({inputReset:{appearance:"none",WebkitAppearance:"none",MozAppearance:"none"},default:{height:size,width:size,minHeight:size,minWidth:size,margin:0,outline:"none",boxSizing:"border-box",borderStyle:"solid",borderWidth:wonderBlocksTokens.border.width.thin,borderRadius:wonderBlocksTokens.border.radius.radius_full},disabled:{cursor:"auto",backgroundColor:disabledState.background,borderColor:disabledState.border,borderWidth:wonderBlocksTokens.border.width.thin}});const styles$5={};const _generateStyles=(checked,error)=>{const styleKey=`${String(checked)}-${String(error)}`;if(styles$5[styleKey]){return styles$5[styleKey]}const actionType=error?"destructive":"progressive";const colorAction=wonderBlocksTokens.semanticColor.action.secondary[actionType];const states={unchecked:{border:wonderBlocksTokens.semanticColor.border.strong,background:colorAction.default.background},checked:{border:colorAction.default.foreground,background:colorAction.default.background},error:{border:wonderBlocksTokens.semanticColor.status.critical.foreground,background:wonderBlocksTokens.semanticColor.status.critical.background}};let newStyles={};if(checked){newStyles={default:{backgroundColor:states.checked.background,borderColor:states.checked.border,borderWidth:size/4,":focus-visible":{outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:1},":hover":{outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:1},":active":{outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,outlineOffset:1,borderColor:colorAction.press.border}}};}else {const currentState=error?states.error:states.unchecked;newStyles={default:{backgroundColor:currentState.background,borderColor:currentState.border,":focus-visible":{backgroundColor:error?states.error.background:colorAction.hover.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-1},":hover":{backgroundColor:error?states.error.background:colorAction.hover.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:-1},":active":{backgroundColor:colorAction.press.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,outlineOffset:-1}}};}styles$5[styleKey]=aphrodite.StyleSheet.create(newStyles);return styles$5[styleKey]};
354
43
 
355
- const _excluded$5 = ["checked", "description", "disabled", "error", "id", "label", "onChange", "style", "className", "variant"];
356
- const ChoiceInternal = React__namespace.forwardRef(function ChoiceInternal(props, ref) {
357
- const {
358
- checked,
359
- description,
360
- disabled = false,
361
- error = false,
362
- id,
363
- label,
364
- onChange,
365
- style,
366
- className,
367
- variant
368
- } = props,
369
- coreProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$5);
370
- const handleClick = () => {
371
- if (variant === "radio" && checked) {
372
- return;
373
- }
374
- onChange(!checked);
375
- };
376
- const getChoiceCoreComponent = () => {
377
- if (variant === "radio") {
378
- return RadioCore;
379
- } else {
380
- return CheckboxCore;
381
- }
382
- };
383
- const getLabel = id => {
384
- return React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
385
- style: [styles$4.label, disabled && styles$4.disabledLabel]
386
- }, React__namespace.createElement("label", {
387
- htmlFor: id
388
- }, label));
389
- };
390
- const getDescription = id => {
391
- return React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
392
- style: styles$4.description,
393
- id: id
394
- }, description);
395
- };
396
- const ChoiceCore = getChoiceCoreComponent();
397
- return (React__namespace.createElement(wonderBlocksCore.Id, {
398
- id: id
399
- }, uniqueId => {
400
- const descriptionId = description ? `${uniqueId}-description` : undefined;
401
- return React__namespace.createElement(wonderBlocksCore.View, {
402
- style: style,
403
- className: className
404
- }, React__namespace.createElement(wonderBlocksCore.View, {
405
- style: styles$4.wrapper,
406
- tabIndex: -1
407
- }, React__namespace.createElement(ChoiceCore, _extends__default["default"]({}, coreProps, {
408
- id: uniqueId,
409
- checked: checked,
410
- "aria-describedby": descriptionId,
411
- onClick: handleClick,
412
- disabled: disabled,
413
- error: error,
414
- ref: ref
415
- })), React__namespace.createElement(wonderBlocksLayout.Strut, {
416
- size: wonderBlocksTokens.spacing.xSmall_8
417
- }), label && getLabel(uniqueId)), description && getDescription(descriptionId));
418
- })
419
- );
420
- });
421
- const styles$4 = aphrodite.StyleSheet.create({
422
- wrapper: {
423
- flexDirection: "row",
424
- alignItems: "flex-start",
425
- outline: "none"
426
- },
427
- label: {
428
- marginTop: -2
429
- },
430
- disabledLabel: {
431
- color: wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground
432
- },
433
- description: {
434
- marginLeft: wonderBlocksTokens.spacing.medium_16 + wonderBlocksTokens.spacing.xSmall_8,
435
- marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
436
- color: wonderBlocksTokens.semanticColor.text.secondary
437
- }
438
- });
44
+ const ChoiceInternal=React__namespace.forwardRef(function ChoiceInternal(props,ref){const{checked,description,disabled=false,error=false,id,label,onChange,style,className,variant,...coreProps}=props;const handleClick=()=>{if(variant==="radio"&&checked){return}onChange(!checked);};const getChoiceCoreComponent=()=>{if(variant==="radio"){return RadioCore}else {return CheckboxCore}};const getLabel=id=>{return jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{style:[styles$4.label,disabled&&styles$4.disabledLabel],children:jsxRuntime.jsx("label",{htmlFor:id,children:label})})};const getDescription=id=>{return jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:styles$4.description,id:id,children:description})};const ChoiceCore=getChoiceCoreComponent();return jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueId=>{const descriptionId=description?`${uniqueId}-description`:undefined;return jsxRuntime.jsxs(wonderBlocksCore.View,{style:style,className:className,children:[jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles$4.wrapper,tabIndex:-1,children:[jsxRuntime.jsx(ChoiceCore,{...coreProps,id:uniqueId,checked:checked,"aria-describedby":descriptionId,onClick:handleClick,disabled:disabled,error:error,ref:ref}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),label&&getLabel(uniqueId)]}),description&&getDescription(descriptionId)]})}})});const styles$4=aphrodite.StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"flex-start",outline:"none"},label:{marginTop:-2},disabledLabel:{color:wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground},description:{marginLeft:wonderBlocksTokens.spacing.medium_16+wonderBlocksTokens.spacing.xSmall_8,marginTop:wonderBlocksTokens.spacing.xxxSmall_4,color:wonderBlocksTokens.semanticColor.text.secondary}});
439
45
 
440
- const Checkbox = React__namespace.forwardRef(function Checkbox(props, ref) {
441
- const {
442
- disabled = false,
443
- error = false
444
- } = props;
445
- return React__namespace.createElement(ChoiceInternal, _extends__default["default"]({}, props, {
446
- variant: "checkbox",
447
- disabled: disabled,
448
- error: error,
449
- ref: ref
450
- }));
451
- });
46
+ const Checkbox=React__namespace.forwardRef(function Checkbox(props,ref){const{disabled=false,error=false}=props;return jsxRuntime.jsx(ChoiceInternal,{...props,variant:"checkbox",disabled:disabled,error:error,ref:ref})});
452
47
 
453
- const _excluded$4 = ["disabled", "error"];
454
- const Radio = React__namespace.forwardRef(function Radio(props, ref) {
455
- const {
456
- disabled = false,
457
- error = false
458
- } = props,
459
- otherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$4);
460
- return React__namespace.createElement(ChoiceInternal, _extends__default["default"]({}, otherProps, {
461
- variant: "radio",
462
- disabled: disabled,
463
- error: error,
464
- ref: ref
465
- }));
466
- });
48
+ const Radio=React__namespace.forwardRef(function Radio(props,ref){const{disabled=false,error=false,...otherProps}=props;return jsxRuntime.jsx(ChoiceInternal,{...otherProps,variant:"radio",disabled:disabled,error:error,ref:ref})});
467
49
 
468
- const _excluded$3 = ["checked", "disabled", "onChange", "value", "variant"];
469
- const Choice = React__namespace.forwardRef(function Choice(props, ref) {
470
- const {
471
- checked = false,
472
- disabled = false,
473
- onChange = () => {},
474
- variant
475
- } = props,
476
- remainingProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$3);
477
- const getChoiceComponent = variant => {
478
- if (variant === "checkbox") {
479
- return Checkbox;
480
- } else {
481
- return Radio;
482
- }
483
- };
484
- const ChoiceComponent = getChoiceComponent(variant);
485
- return React__namespace.createElement(ChoiceComponent, _extends__default["default"]({}, remainingProps, {
486
- checked: checked,
487
- disabled: disabled,
488
- onChange: onChange,
489
- ref: ref
490
- }));
491
- });
50
+ const Choice=React__namespace.forwardRef(function Choice(props,ref){const{checked=false,disabled=false,onChange=()=>{},value,variant,...remainingProps}=props;const getChoiceComponent=variant=>{if(variant==="checkbox"){return Checkbox}else {return Radio}};const ChoiceComponent=getChoiceComponent(variant);return jsxRuntime.jsx(ChoiceComponent,{...remainingProps,checked:checked,disabled:disabled,onChange:onChange,ref:ref})});
492
51
 
493
- const styles$3 = aphrodite.StyleSheet.create({
494
- fieldset: {
495
- display: "flex",
496
- flexDirection: "column",
497
- border: "none",
498
- padding: 0,
499
- margin: 0
500
- },
501
- legend: {
502
- padding: 0,
503
- width: "100%"
504
- },
505
- description: {
506
- marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
507
- color: wonderBlocksTokens.semanticColor.text.secondary
508
- },
509
- error: {
510
- marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
511
- color: wonderBlocksTokens.semanticColor.status.critical.foreground
512
- },
513
- defaultLineGap: {
514
- marginTop: wonderBlocksTokens.spacing.xSmall_8
515
- }
516
- });
52
+ const styles$3=aphrodite.StyleSheet.create({fieldset:{display:"flex",flexDirection:"column",border:"none",padding:0,margin:0},legend:{padding:0,width:"100%"},description:{marginTop:wonderBlocksTokens.spacing.xxxSmall_4,color:wonderBlocksTokens.semanticColor.text.secondary},error:{marginTop:wonderBlocksTokens.spacing.xxxSmall_4,color:wonderBlocksTokens.semanticColor.status.critical.foreground},defaultLineGap:{marginTop:wonderBlocksTokens.spacing.xSmall_8}});
517
53
 
518
- const StyledFieldset$1 = wonderBlocksCore.addStyle("fieldset");
519
- const StyledLegend$1 = wonderBlocksCore.addStyle("legend");
520
- const CheckboxGroup = React__namespace.forwardRef(function CheckboxGroup(props, ref) {
521
- const {
522
- children,
523
- label,
524
- description,
525
- errorMessage,
526
- groupName,
527
- onChange,
528
- selectedValues,
529
- style,
530
- testId
531
- } = props;
532
- const handleChange = (changedValue, originalCheckedState) => {
533
- if (originalCheckedState) {
534
- const index = selectedValues.indexOf(changedValue);
535
- const updatedSelection = [...selectedValues.slice(0, index), ...selectedValues.slice(index + 1)];
536
- onChange(updatedSelection);
537
- } else {
538
- onChange([...selectedValues, changedValue]);
539
- }
540
- };
541
- const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
542
- return React__namespace.createElement(StyledFieldset$1, {
543
- "data-testid": testId,
544
- style: [styles$3.fieldset, style],
545
- ref: ref
546
- }, label && React__namespace.createElement(StyledLegend$1, {
547
- style: styles$3.legend
548
- }, React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, label)), description && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
549
- style: styles$3.description
550
- }, description), errorMessage && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
551
- style: styles$3.error
552
- }, errorMessage), (label || description || errorMessage) && React__namespace.createElement(wonderBlocksLayout.Strut, {
553
- size: wonderBlocksTokens.spacing.small_12
554
- }), allChildren.map((child, index) => {
555
- const {
556
- style,
557
- value
558
- } = child.props;
559
- const checked = selectedValues.includes(value);
560
- return React__namespace.cloneElement(child, {
561
- checked: checked,
562
- error: !!errorMessage,
563
- groupName: groupName,
564
- id: `${groupName}-${value}`,
565
- key: value,
566
- onChange: () => handleChange(value, checked),
567
- style: [index > 0 && styles$3.defaultLineGap, style],
568
- variant: "checkbox"
569
- });
570
- }));
571
- });
54
+ const StyledFieldset$1=wonderBlocksCore.addStyle("fieldset");const StyledLegend$1=wonderBlocksCore.addStyle("legend");const CheckboxGroup=React__namespace.forwardRef(function CheckboxGroup(props,ref){const{children,label,description,errorMessage,groupName,onChange,selectedValues,style,testId}=props;const handleChange=(changedValue,originalCheckedState)=>{if(originalCheckedState){const index=selectedValues.indexOf(changedValue);const updatedSelection=[...selectedValues.slice(0,index),...selectedValues.slice(index+1)];onChange(updatedSelection);}else {onChange([...selectedValues,changedValue]);}};const allChildren=React__namespace.Children.toArray(children).filter(Boolean);return jsxRuntime.jsxs(StyledFieldset$1,{"data-testid":testId,style:[styles$3.fieldset,style],ref:ref,children:[label&&jsxRuntime.jsx(StyledLegend$1,{style:styles$3.legend,children:jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{children:label})}),description&&jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:styles$3.description,children:description}),errorMessage&&jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:styles$3.error,children:errorMessage}),(label||description||errorMessage)&&jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),allChildren.map((child,index)=>{const{style,value}=child.props;const checked=selectedValues.includes(value);return React__namespace.cloneElement(child,{checked:checked,error:!!errorMessage,groupName:groupName,id:`${groupName}-${value}`,key:value,onChange:()=>handleChange(value,checked),style:[index>0&&styles$3.defaultLineGap,style],variant:"checkbox"})})]})});
572
55
 
573
- const StyledFieldset = wonderBlocksCore.addStyle("fieldset");
574
- const StyledLegend = wonderBlocksCore.addStyle("legend");
575
- const RadioGroup = React__namespace.forwardRef(function RadioGroup(props, ref) {
576
- const {
577
- children,
578
- label,
579
- description,
580
- errorMessage,
581
- groupName,
582
- onChange,
583
- selectedValue,
584
- style,
585
- testId
586
- } = props;
587
- const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
588
- return React__namespace.createElement(StyledFieldset, {
589
- "data-testid": testId,
590
- style: [styles$3.fieldset, style],
591
- ref: ref
592
- }, label && React__namespace.createElement(StyledLegend, {
593
- style: styles$3.legend
594
- }, React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, label)), description && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
595
- style: styles$3.description
596
- }, description), errorMessage && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
597
- style: styles$3.error
598
- }, errorMessage), (label || description || errorMessage) && React__namespace.createElement(wonderBlocksLayout.Strut, {
599
- size: wonderBlocksTokens.spacing.small_12
600
- }), allChildren.map((child, index) => {
601
- const {
602
- style,
603
- value
604
- } = child.props;
605
- const checked = selectedValue === value;
606
- return React__namespace.cloneElement(child, {
607
- checked: checked,
608
- error: !!errorMessage,
609
- groupName: groupName,
610
- id: `${groupName}-${value}`,
611
- key: value,
612
- onChange: () => onChange(value),
613
- style: [index > 0 && styles$3.defaultLineGap, style],
614
- variant: "radio"
615
- });
616
- }));
617
- });
56
+ const StyledFieldset=wonderBlocksCore.addStyle("fieldset");const StyledLegend=wonderBlocksCore.addStyle("legend");const RadioGroup=React__namespace.forwardRef(function RadioGroup(props,ref){const{children,label,description,errorMessage,groupName,onChange,selectedValue,style,testId}=props;const allChildren=React__namespace.Children.toArray(children).filter(Boolean);return jsxRuntime.jsxs(StyledFieldset,{"data-testid":testId,style:[styles$3.fieldset,style],ref:ref,children:[label&&jsxRuntime.jsx(StyledLegend,{style:styles$3.legend,children:jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{children:label})}),description&&jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:styles$3.description,children:description}),errorMessage&&jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:styles$3.error,children:errorMessage}),(label||description||errorMessage)&&jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),allChildren.map((child,index)=>{const{style,value}=child.props;const checked=selectedValue===value;return React__namespace.cloneElement(child,{checked:checked,error:!!errorMessage,groupName:groupName,id:`${groupName}-${value}`,key:value,onChange:()=>onChange(value),style:[index>0&&styles$3.defaultLineGap,style],variant:"radio"})})]})});
618
57
 
619
- const defaultErrorMessage = "This field is required.";
620
- const useFieldValidation = ({
621
- value,
622
- disabled: _disabled = false,
623
- validate,
624
- onValidate,
625
- required: _required = false,
626
- instantValidation: _instantValidation = true
627
- }) => {
628
- const [errorMessage, setErrorMessage] = React__namespace.useState(() => validate && value !== "" && !_disabled && validate(value) || null);
629
- const onChangeValidation = newValue => {
630
- if (_instantValidation) {
631
- handleValidation(newValue);
632
- } else {
633
- setErrorMessage(null);
634
- if (onValidate) {
635
- onValidate(null);
636
- }
637
- }
638
- };
639
- const onBlurValidation = newValue => {
640
- if (!_instantValidation) {
641
- if (newValue || _required) {
642
- handleValidation(newValue);
643
- }
644
- }
645
- };
646
- const handleValidation = newValue => {
647
- if (_disabled) {
648
- return;
649
- }
650
- if (validate) {
651
- const error = validate(newValue) || null;
652
- setErrorMessage(error);
653
- if (onValidate) {
654
- onValidate(error);
655
- }
656
- } else if (_required) {
657
- const requiredString = typeof _required === "string" ? _required : defaultErrorMessage;
658
- const error = newValue ? null : requiredString;
659
- setErrorMessage(error);
660
- if (onValidate) {
661
- onValidate(error);
662
- }
663
- }
664
- };
665
- wonderBlocksCore.useOnMountEffect(() => {
666
- if (value !== "") {
667
- handleValidation(value);
668
- }
669
- });
670
- return {
671
- errorMessage,
672
- onBlurValidation,
673
- onChangeValidation
674
- };
675
- };
58
+ const defaultErrorMessage="This field is required.";const useFieldValidation=({value,disabled=false,validate,onValidate,required=false,instantValidation=true})=>{const[errorMessage,setErrorMessage]=React__namespace.useState(()=>validate&&value!==""&&!disabled&&validate(value)||null);const onChangeValidation=newValue=>{if(instantValidation){handleValidation(newValue);}else {setErrorMessage(null);if(onValidate){onValidate(null);}}};const onBlurValidation=newValue=>{if(!instantValidation){if(newValue||required){handleValidation(newValue);}}};const handleValidation=newValue=>{if(disabled){return}if(validate){const error=validate(newValue)||null;setErrorMessage(error);if(onValidate){onValidate(error);}}else if(required){const requiredString=typeof required==="string"?required:defaultErrorMessage;const error=newValue?null:requiredString;setErrorMessage(error);if(onValidate){onValidate(error);}}};wonderBlocksCore.useOnMountEffect(()=>{if(value!==""){handleValidation(value);}});return {errorMessage,onBlurValidation,onChangeValidation}};
676
59
 
677
- const _excluded$2 = ["id", "type", "value", "name", "disabled", "error", "validate", "onValidate", "required", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "instantValidation", "onKeyDown", "onChange", "onFocus", "onBlur"];
678
- const StyledInput = wonderBlocksCore.addStyle("input");
679
- const TextField = props => {
680
- const {
681
- id,
682
- type = "text",
683
- value,
684
- name,
685
- disabled = false,
686
- error,
687
- validate,
688
- onValidate,
689
- required,
690
- placeholder,
691
- style,
692
- testId,
693
- readOnly,
694
- autoFocus,
695
- autoComplete,
696
- forwardedRef,
697
- instantValidation = true,
698
- onKeyDown,
699
- onChange,
700
- onFocus,
701
- onBlur
702
- } = props,
703
- otherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$2);
704
- const {
705
- errorMessage,
706
- onBlurValidation,
707
- onChangeValidation
708
- } = useFieldValidation({
709
- value,
710
- required,
711
- disabled,
712
- instantValidation,
713
- validate,
714
- onValidate
715
- });
716
- const hasError = error || !!errorMessage;
717
- const handleChange = event => {
718
- const newValue = event.target.value;
719
- onChangeValidation(newValue);
720
- onChange(newValue);
721
- };
722
- const handleFocus = event => {
723
- if (onFocus) {
724
- onFocus(event);
725
- }
726
- };
727
- const handleBlur = event => {
728
- onBlurValidation(event.target.value);
729
- if (onBlur) {
730
- onBlur(event);
731
- }
732
- };
733
- return React__namespace.createElement(wonderBlocksCore.Id, {
734
- id: id
735
- }, uniqueId => React__namespace.createElement(StyledInput, _extends__default["default"]({
736
- style: [styles$2.input, wonderBlocksTypography.styles.LabelMedium, styles$2.default, !disabled && styles$2.defaultFocus, disabled && styles$2.disabled, hasError && styles$2.error, style],
737
- id: uniqueId,
738
- type: type,
739
- placeholder: placeholder,
740
- value: value,
741
- name: name,
742
- "aria-disabled": disabled,
743
- "aria-required": !!required,
744
- onChange: handleChange,
745
- onKeyDown: disabled ? undefined : onKeyDown,
746
- onFocus: handleFocus,
747
- onBlur: handleBlur,
748
- "data-testid": testId,
749
- readOnly: readOnly || disabled,
750
- autoFocus: autoFocus,
751
- autoComplete: autoComplete,
752
- ref: forwardedRef,
753
- "aria-invalid": hasError
754
- }, otherProps)));
755
- };
756
- const states$1 = {
757
- default: {
758
- border: wonderBlocksTokens.semanticColor.border.strong,
759
- background: wonderBlocksTokens.semanticColor.surface.primary,
760
- foreground: wonderBlocksTokens.semanticColor.text.primary
761
- },
762
- disabled: {
763
- border: wonderBlocksTokens.semanticColor.action.secondary.disabled.border,
764
- background: wonderBlocksTokens.semanticColor.action.secondary.disabled.background,
765
- foreground: wonderBlocksTokens.semanticColor.text.secondary
766
- },
767
- error: {
768
- border: wonderBlocksTokens.semanticColor.status.critical.foreground,
769
- background: wonderBlocksTokens.semanticColor.status.critical.background,
770
- foreground: wonderBlocksTokens.semanticColor.text.primary
771
- }
772
- };
773
- const styles$2 = aphrodite.StyleSheet.create({
774
- input: {
775
- width: "100%",
776
- height: 40,
777
- borderRadius: wonderBlocksTokens.border.radius.radius_040,
778
- boxSizing: "border-box",
779
- paddingLeft: wonderBlocksTokens.spacing.medium_16,
780
- margin: 0
781
- },
782
- default: {
783
- background: states$1.default.background,
784
- border: `${wonderBlocksTokens.border.width.thin} solid ${states$1.default.border}`,
785
- color: states$1.default.foreground,
786
- "::placeholder": {
787
- color: wonderBlocksTokens.semanticColor.text.secondary
788
- }
789
- },
790
- defaultFocus: {
791
- ":focus-visible": {
792
- borderColor: wonderBlocksTokens.semanticColor.focus.outer,
793
- outline: `${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
794
- outlineOffset: -2
795
- }
796
- },
797
- error: {
798
- background: states$1.error.background,
799
- border: `${wonderBlocksTokens.border.width.thin} solid ${states$1.error.border}`,
800
- color: states$1.error.foreground,
801
- "::placeholder": {
802
- color: wonderBlocksTokens.semanticColor.text.secondary
803
- },
804
- ":focus-visible": {
805
- outlineColor: wonderBlocksTokens.semanticColor.focus.outer,
806
- outline: `${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`
807
- }
808
- },
809
- disabled: {
810
- background: states$1.disabled.background,
811
- border: `${wonderBlocksTokens.border.width.thin} solid ${states$1.disabled.border}`,
812
- color: states$1.disabled.foreground,
813
- "::placeholder": {
814
- color: states$1.disabled.foreground
815
- },
816
- cursor: "not-allowed",
817
- ":focus-visible": {
818
- outline: `${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
819
- outlineOffset: -3
820
- }
821
- }
822
- });
823
- var TextField$1 = React__namespace.forwardRef((props, ref) => React__namespace.createElement(TextField, _extends__default["default"]({}, props, {
824
- forwardedRef: ref
825
- })));
60
+ const StyledInput=wonderBlocksCore.addStyle("input");const TextField=props=>{const{id,type="text",value,name,disabled=false,error,validate,onValidate,required,placeholder,style,testId,readOnly,autoFocus,autoComplete,forwardedRef,instantValidation=true,onKeyDown,onChange,onFocus,onBlur,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,required,disabled,instantValidation,validate,onValidate});const hasError=error||!!errorMessage;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);};const handleFocus=event=>{if(onFocus){onFocus(event);}};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};return jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueId=>jsxRuntime.jsx(StyledInput,{style:[styles$2.input,wonderBlocksTypography.styles.LabelMedium,styles$2.default,!disabled&&styles$2.defaultFocus,disabled&&styles$2.disabled,hasError&&styles$2.error,style],id:uniqueId,type:type,placeholder:placeholder,value:value,name:name,"aria-disabled":disabled,"aria-required":!!required,onChange:handleChange,onKeyDown:disabled?undefined:onKeyDown,onFocus:handleFocus,onBlur:handleBlur,"data-testid":testId,readOnly:readOnly||disabled,autoFocus:autoFocus,autoComplete:autoComplete,ref:forwardedRef,"aria-invalid":hasError,...otherProps})})};const states$1={default:{border:wonderBlocksTokens.semanticColor.border.strong,background:wonderBlocksTokens.semanticColor.surface.primary,foreground:wonderBlocksTokens.semanticColor.text.primary},disabled:{border:wonderBlocksTokens.semanticColor.action.secondary.disabled.border,background:wonderBlocksTokens.semanticColor.action.secondary.disabled.background,foreground:wonderBlocksTokens.semanticColor.text.secondary},error:{border:wonderBlocksTokens.semanticColor.status.critical.foreground,background:wonderBlocksTokens.semanticColor.status.critical.background,foreground:wonderBlocksTokens.semanticColor.text.primary}};const styles$2=aphrodite.StyleSheet.create({input:{width:"100%",height:40,borderRadius:wonderBlocksTokens.border.radius.radius_040,boxSizing:"border-box",paddingLeft:wonderBlocksTokens.spacing.medium_16,margin:0},default:{background:states$1.default.background,border:`${wonderBlocksTokens.border.width.thin} solid ${states$1.default.border}`,color:states$1.default.foreground,"::placeholder":{color:wonderBlocksTokens.semanticColor.text.secondary}},defaultFocus:{":focus-visible":{borderColor:wonderBlocksTokens.semanticColor.focus.outer,outline:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-2}},error:{background:states$1.error.background,border:`${wonderBlocksTokens.border.width.thin} solid ${states$1.error.border}`,color:states$1.error.foreground,"::placeholder":{color:wonderBlocksTokens.semanticColor.text.secondary},":focus-visible":{outlineColor:wonderBlocksTokens.semanticColor.focus.outer,outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`}},disabled:{background:states$1.disabled.background,border:`${wonderBlocksTokens.border.width.thin} solid ${states$1.disabled.border}`,color:states$1.disabled.foreground,"::placeholder":{color:states$1.disabled.foreground},cursor:"not-allowed",":focus-visible":{outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-3}}});var TextField$1 = React__namespace.forwardRef((props,ref)=>jsxRuntime.jsx(TextField,{...props,forwardedRef:ref}));
826
61
 
827
- const StyledSpan = wonderBlocksCore.addStyle("span");
828
- class FieldHeading extends React__namespace.Component {
829
- renderLabel() {
830
- const {
831
- label,
832
- id,
833
- required,
834
- testId
835
- } = this.props;
836
- const requiredIcon = React__namespace.createElement(StyledSpan, {
837
- style: styles$1.required,
838
- "aria-hidden": true
839
- }, " ", "*");
840
- return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
841
- style: styles$1.label,
842
- tag: "label",
843
- htmlFor: id && `${id}-field`,
844
- testId: testId && `${testId}-label`
845
- }, label, required && requiredIcon), React__namespace.createElement(wonderBlocksLayout.Strut, {
846
- size: wonderBlocksTokens.spacing.xxxSmall_4
847
- }));
848
- }
849
- maybeRenderDescription() {
850
- const {
851
- description,
852
- testId
853
- } = this.props;
854
- if (!description) {
855
- return null;
856
- }
857
- return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
858
- style: styles$1.description,
859
- testId: testId && `${testId}-description`
860
- }, description), React__namespace.createElement(wonderBlocksLayout.Strut, {
861
- size: wonderBlocksTokens.spacing.xxxSmall_4
862
- }));
863
- }
864
- maybeRenderError() {
865
- const {
866
- error,
867
- id,
868
- testId
869
- } = this.props;
870
- if (!error) {
871
- return null;
872
- }
873
- return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksLayout.Strut, {
874
- size: wonderBlocksTokens.spacing.small_12
875
- }), React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
876
- style: styles$1.error,
877
- role: "alert",
878
- id: id && `${id}-error`,
879
- testId: testId && `${testId}-error`
880
- }, error));
881
- }
882
- render() {
883
- const {
884
- field,
885
- style
886
- } = this.props;
887
- return React__namespace.createElement(wonderBlocksCore.View, {
888
- style: style
889
- }, this.renderLabel(), this.maybeRenderDescription(), React__namespace.createElement(wonderBlocksLayout.Strut, {
890
- size: wonderBlocksTokens.spacing.xSmall_8
891
- }), field, this.maybeRenderError());
892
- }
893
- }
894
- const styles$1 = aphrodite.StyleSheet.create({
895
- label: {
896
- color: wonderBlocksTokens.semanticColor.text.primary
897
- },
898
- description: {
899
- color: wonderBlocksTokens.semanticColor.text.secondary
900
- },
901
- error: {
902
- color: wonderBlocksTokens.semanticColor.status.critical.foreground
903
- },
904
- required: {
905
- color: wonderBlocksTokens.semanticColor.status.critical.foreground
906
- }
907
- });
62
+ const StyledSpan=wonderBlocksCore.addStyle("span");class FieldHeading extends React__namespace.Component{renderLabel(){const{label,id,required,testId}=this.props;const requiredIcon=jsxRuntime.jsxs(StyledSpan,{style:styles$1.required,"aria-hidden":true,children:[" ","*"]});return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsxs(wonderBlocksTypography.LabelMedium,{style:styles$1.label,tag:"label",htmlFor:id&&`${id}-field`,testId:testId&&`${testId}-label`,children:[label,required&&requiredIcon]}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4})]})}maybeRenderDescription(){const{description,testId}=this.props;if(!description){return null}return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:styles$1.description,testId:testId&&`${testId}-description`,children:description}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4})]})}maybeRenderError(){const{error,id,testId}=this.props;if(!error){return null}return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:styles$1.error,role:"alert",id:id&&`${id}-error`,testId:testId&&`${testId}-error`,children:error})]})}render(){const{field,style}=this.props;return jsxRuntime.jsxs(wonderBlocksCore.View,{style:style,children:[this.renderLabel(),this.maybeRenderDescription(),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),field,this.maybeRenderError()]})}}const styles$1=aphrodite.StyleSheet.create({label:{color:wonderBlocksTokens.semanticColor.text.primary},description:{color:wonderBlocksTokens.semanticColor.text.secondary},error:{color:wonderBlocksTokens.semanticColor.status.critical.foreground},required:{color:wonderBlocksTokens.semanticColor.status.critical.foreground}});
908
63
 
909
- const _excluded$1 = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "name", "onValidate", "onFocus", "onBlur"];
910
- class LabeledTextField extends React__namespace.Component {
911
- constructor(props) {
912
- super(props);
913
- this.handleValidate = errorMessage => {
914
- const {
915
- onValidate
916
- } = this.props;
917
- this.setState({
918
- error: errorMessage
919
- }, () => {
920
- if (onValidate) {
921
- onValidate(errorMessage);
922
- }
923
- });
924
- };
925
- this.handleFocus = event => {
926
- const {
927
- onFocus
928
- } = this.props;
929
- this.setState({
930
- focused: true
931
- }, () => {
932
- if (onFocus) {
933
- onFocus(event);
934
- }
935
- });
936
- };
937
- this.handleBlur = event => {
938
- const {
939
- onBlur
940
- } = this.props;
941
- this.setState({
942
- focused: false
943
- }, () => {
944
- if (onBlur) {
945
- onBlur(event);
946
- }
947
- });
948
- };
949
- this.state = {
950
- error: null,
951
- focused: false
952
- };
953
- }
954
- render() {
955
- const _this$props = this.props,
956
- {
957
- id,
958
- type,
959
- label,
960
- description,
961
- value,
962
- disabled,
963
- required,
964
- validate,
965
- onChange,
966
- onKeyDown,
967
- placeholder,
968
- style,
969
- testId,
970
- readOnly,
971
- autoComplete,
972
- forwardedRef,
973
- ariaDescribedby,
974
- name
975
- } = _this$props,
976
- otherProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$1);
977
- return React__namespace.createElement(wonderBlocksCore.Id, {
978
- id: id
979
- }, uniqueId => React__namespace.createElement(FieldHeading, {
980
- id: uniqueId,
981
- testId: testId,
982
- style: style,
983
- field: React__namespace.createElement(TextField$1, _extends__default["default"]({
984
- id: `${uniqueId}-field`,
985
- "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
986
- "aria-required": required ? "true" : "false",
987
- required: required,
988
- testId: testId && `${testId}-field`,
989
- type: type,
990
- value: value,
991
- placeholder: placeholder,
992
- disabled: disabled,
993
- validate: validate,
994
- onValidate: this.handleValidate,
995
- onChange: onChange,
996
- onKeyDown: onKeyDown,
997
- onFocus: this.handleFocus,
998
- onBlur: this.handleBlur,
999
- readOnly: readOnly,
1000
- autoComplete: autoComplete,
1001
- ref: forwardedRef,
1002
- name: name
1003
- }, otherProps)),
1004
- label: label,
1005
- description: description,
1006
- required: !!required,
1007
- error: !this.state.focused && this.state.error || ""
1008
- }));
1009
- }
1010
- }
1011
- LabeledTextField.defaultProps = {
1012
- type: "text",
1013
- disabled: false
1014
- };
1015
- var labeledTextField = React__namespace.forwardRef((props, ref) => React__namespace.createElement(LabeledTextField, _extends__default["default"]({}, props, {
1016
- forwardedRef: ref
1017
- })));
64
+ class LabeledTextField extends React__namespace.Component{render(){const{id,type,label,description,value,disabled,required,validate,onChange,onKeyDown,placeholder,style,testId,readOnly,autoComplete,forwardedRef,ariaDescribedby,name,onValidate,onFocus,onBlur,...otherProps}=this.props;return jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueId=>jsxRuntime.jsx(FieldHeading,{id:uniqueId,testId:testId,style:style,field:jsxRuntime.jsx(TextField$1,{id:`${uniqueId}-field`,"aria-describedby":ariaDescribedby?ariaDescribedby:`${uniqueId}-error`,"aria-required":required?"true":"false",required:required,testId:testId&&`${testId}-field`,type:type,value:value,placeholder:placeholder,disabled:disabled,validate:validate,onValidate:this.handleValidate,onChange:onChange,onKeyDown:onKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,readOnly:readOnly,autoComplete:autoComplete,ref:forwardedRef,name:name,...otherProps}),label:label,description:description,required:!!required,error:!this.state.focused&&this.state.error||""})})}constructor(props){super(props),this.handleValidate=errorMessage=>{const{onValidate}=this.props;this.setState({error:errorMessage},()=>{if(onValidate){onValidate(errorMessage);}});},this.handleFocus=event=>{const{onFocus}=this.props;this.setState({focused:true},()=>{if(onFocus){onFocus(event);}});},this.handleBlur=event=>{const{onBlur}=this.props;this.setState({focused:false},()=>{if(onBlur){onBlur(event);}});};this.state={error:null,focused:false};}}LabeledTextField.defaultProps={type:"text",disabled:false};var labeledTextField = React__namespace.forwardRef((props,ref)=>jsxRuntime.jsx(LabeledTextField,{...props,forwardedRef:ref}));
1018
65
 
1019
- const _excluded = ["onChange", "value", "placeholder", "disabled", "id", "testId", "style", "readOnly", "autoComplete", "name", "className", "autoFocus", "rows", "spellCheck", "wrap", "minLength", "maxLength", "onClick", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "validate", "onValidate", "required", "resizeType", "rootStyle", "error", "instantValidation"];
1020
- const StyledTextarea = wonderBlocksCore.addStyle("textarea");
1021
- const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
1022
- const {
1023
- onChange,
1024
- value,
1025
- placeholder,
1026
- disabled,
1027
- id,
1028
- testId,
1029
- style,
1030
- readOnly,
1031
- autoComplete,
1032
- name,
1033
- className,
1034
- autoFocus,
1035
- rows,
1036
- spellCheck,
1037
- wrap,
1038
- minLength,
1039
- maxLength,
1040
- onClick,
1041
- onKeyDown,
1042
- onKeyUp,
1043
- onFocus,
1044
- onBlur,
1045
- validate,
1046
- onValidate,
1047
- required,
1048
- resizeType,
1049
- rootStyle,
1050
- error,
1051
- instantValidation = true
1052
- } = props,
1053
- otherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
1054
- const {
1055
- errorMessage,
1056
- onBlurValidation,
1057
- onChangeValidation
1058
- } = useFieldValidation({
1059
- value,
1060
- disabled,
1061
- validate,
1062
- onValidate,
1063
- required,
1064
- instantValidation
1065
- });
1066
- const hasError = error || !!errorMessage;
1067
- const generatedUniqueId = React.useId();
1068
- const uniqueId = id != null ? id : generatedUniqueId;
1069
- const handleChange = event => {
1070
- const newValue = event.target.value;
1071
- onChangeValidation(newValue);
1072
- onChange(newValue);
1073
- };
1074
- const handleBlur = event => {
1075
- onBlurValidation(event.target.value);
1076
- if (onBlur) {
1077
- onBlur(event);
1078
- }
1079
- };
1080
- return React__namespace.createElement(wonderBlocksCore.View, {
1081
- style: [{
1082
- width: "100%"
1083
- }, rootStyle]
1084
- }, React__namespace.createElement(StyledTextarea, _extends__default["default"]({
1085
- id: uniqueId,
1086
- "data-testid": testId,
1087
- ref: ref,
1088
- className: className,
1089
- style: [styles.textarea, wonderBlocksTypography.styles.LabelMedium, resizeType && resizeStyles[resizeType], styles.default, !disabled && styles.defaultFocus, disabled && styles.disabled, hasError && styles.error, style],
1090
- value: value,
1091
- onChange: handleChange,
1092
- placeholder: placeholder,
1093
- "aria-disabled": disabled,
1094
- readOnly: readOnly || disabled,
1095
- autoComplete: autoComplete,
1096
- name: name,
1097
- autoFocus: autoFocus,
1098
- rows: rows,
1099
- spellCheck: spellCheck,
1100
- wrap: wrap,
1101
- minLength: minLength,
1102
- maxLength: maxLength,
1103
- "aria-required": !!required,
1104
- onClick: disabled ? undefined : onClick,
1105
- onKeyDown: disabled ? undefined : onKeyDown,
1106
- onKeyUp: disabled ? undefined : onKeyUp,
1107
- onFocus: onFocus,
1108
- onBlur: handleBlur,
1109
- required: !!required
1110
- }, otherProps, {
1111
- "aria-invalid": hasError
1112
- })));
1113
- });
1114
- const VERTICAL_SPACING_PX = 10;
1115
- const states = {
1116
- default: {
1117
- border: wonderBlocksTokens.semanticColor.border.strong,
1118
- background: wonderBlocksTokens.semanticColor.surface.primary,
1119
- foreground: wonderBlocksTokens.semanticColor.text.primary
1120
- },
1121
- disabled: {
1122
- border: wonderBlocksTokens.semanticColor.action.secondary.disabled.border,
1123
- background: wonderBlocksTokens.semanticColor.action.secondary.disabled.background,
1124
- foreground: wonderBlocksTokens.semanticColor.text.secondary
1125
- },
1126
- error: {
1127
- border: wonderBlocksTokens.semanticColor.status.critical.foreground,
1128
- background: wonderBlocksTokens.semanticColor.status.critical.background,
1129
- foreground: wonderBlocksTokens.semanticColor.text.primary
1130
- }
1131
- };
1132
- const styles = aphrodite.StyleSheet.create({
1133
- textarea: {
1134
- borderRadius: wonderBlocksTokens.border.radius.radius_040,
1135
- boxSizing: "border-box",
1136
- padding: `${VERTICAL_SPACING_PX}px ${wonderBlocksTokens.spacing.medium_16}px`,
1137
- minHeight: `${VERTICAL_SPACING_PX * 2 + wonderBlocksTokens.font.lineHeight.medium + 2}px`
1138
- },
1139
- default: {
1140
- background: states.default.background,
1141
- border: `${wonderBlocksTokens.border.width.thin} solid ${states.default.border}`,
1142
- color: states.default.foreground,
1143
- "::placeholder": {
1144
- color: wonderBlocksTokens.semanticColor.text.secondary
1145
- }
1146
- },
1147
- defaultFocus: {
1148
- ":focus-visible": {
1149
- borderColor: wonderBlocksTokens.semanticColor.focus.outer,
1150
- outline: `${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
1151
- outlineOffset: -2
1152
- }
1153
- },
1154
- disabled: {
1155
- background: states.disabled.background,
1156
- border: `${wonderBlocksTokens.border.width.thin} solid ${states.disabled.border}`,
1157
- color: states.disabled.foreground,
1158
- "::placeholder": {
1159
- color: states.disabled.foreground
1160
- },
1161
- cursor: "not-allowed",
1162
- ":focus-visible": {
1163
- outline: `${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
1164
- outlineOffset: -3
1165
- }
1166
- },
1167
- error: {
1168
- background: states.error.background,
1169
- border: `${wonderBlocksTokens.border.width.thin} solid ${states.error.border}`,
1170
- color: states.error.foreground,
1171
- "::placeholder": {
1172
- color: wonderBlocksTokens.semanticColor.text.secondary
1173
- },
1174
- ":focus-visible": {
1175
- outline: `${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
1176
- borderColor: states.error.border
1177
- }
1178
- }
1179
- });
1180
- const resizeStyles = aphrodite.StyleSheet.create({
1181
- both: {
1182
- resize: "both"
1183
- },
1184
- none: {
1185
- resize: "none"
1186
- },
1187
- horizontal: {
1188
- resize: "horizontal"
1189
- },
1190
- vertical: {
1191
- resize: "vertical"
1192
- }
1193
- });
66
+ const StyledTextarea=wonderBlocksCore.addStyle("textarea");const TextArea=React__namespace.forwardRef(function TextArea(props,ref){const{onChange,value,placeholder,disabled,id,testId,style,readOnly,autoComplete,name,className,autoFocus,rows,spellCheck,wrap,minLength,maxLength,onClick,onKeyDown,onKeyUp,onFocus,onBlur,validate,onValidate,required,resizeType,rootStyle,error,instantValidation=true,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,disabled,validate,onValidate,required,instantValidation});const hasError=error||!!errorMessage;const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};return jsxRuntime.jsx(wonderBlocksCore.View,{style:[{width:"100%"},rootStyle],children:jsxRuntime.jsx(StyledTextarea,{id:uniqueId,"data-testid":testId,ref:ref,className:className,style:[styles.textarea,wonderBlocksTypography.styles.LabelMedium,resizeType&&resizeStyles[resizeType],styles.default,!disabled&&styles.defaultFocus,disabled&&styles.disabled,hasError&&styles.error,style],value:value,onChange:handleChange,placeholder:placeholder,"aria-disabled":disabled,readOnly:readOnly||disabled,autoComplete:autoComplete,name:name,autoFocus:autoFocus,rows:rows,spellCheck:spellCheck,wrap:wrap,minLength:minLength,maxLength:maxLength,"aria-required":!!required,onClick:disabled?undefined:onClick,onKeyDown:disabled?undefined:onKeyDown,onKeyUp:disabled?undefined:onKeyUp,onFocus:onFocus,onBlur:handleBlur,required:!!required,...otherProps,"aria-invalid":hasError})})});const VERTICAL_SPACING_PX=10;const states={default:{border:wonderBlocksTokens.semanticColor.border.strong,background:wonderBlocksTokens.semanticColor.surface.primary,foreground:wonderBlocksTokens.semanticColor.text.primary},disabled:{border:wonderBlocksTokens.semanticColor.action.secondary.disabled.border,background:wonderBlocksTokens.semanticColor.action.secondary.disabled.background,foreground:wonderBlocksTokens.semanticColor.text.secondary},error:{border:wonderBlocksTokens.semanticColor.status.critical.foreground,background:wonderBlocksTokens.semanticColor.status.critical.background,foreground:wonderBlocksTokens.semanticColor.text.primary}};const styles=aphrodite.StyleSheet.create({textarea:{borderRadius:wonderBlocksTokens.border.radius.radius_040,boxSizing:"border-box",padding:`${VERTICAL_SPACING_PX}px ${wonderBlocksTokens.spacing.medium_16}px`,minHeight:`calc(${VERTICAL_SPACING_PX*2+2}px + ${wonderBlocksTokens.font.lineHeight.medium})`},default:{background:states.default.background,border:`${wonderBlocksTokens.border.width.thin} solid ${states.default.border}`,color:states.default.foreground,"::placeholder":{color:wonderBlocksTokens.semanticColor.text.secondary}},defaultFocus:{":focus-visible":{borderColor:wonderBlocksTokens.semanticColor.focus.outer,outline:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-2}},disabled:{background:states.disabled.background,border:`${wonderBlocksTokens.border.width.thin} solid ${states.disabled.border}`,color:states.disabled.foreground,"::placeholder":{color:states.disabled.foreground},cursor:"not-allowed",":focus-visible":{outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-3}},error:{background:states.error.background,border:`${wonderBlocksTokens.border.width.thin} solid ${states.error.border}`,color:states.error.foreground,"::placeholder":{color:wonderBlocksTokens.semanticColor.text.secondary},":focus-visible":{outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,borderColor:states.error.border}}});const resizeStyles=aphrodite.StyleSheet.create({both:{resize:"both"},none:{resize:"none"},horizontal:{resize:"horizontal"},vertical:{resize:"vertical"}});
1194
67
 
1195
68
  exports.Checkbox = Checkbox;
1196
69
  exports.CheckboxGroup = CheckboxGroup;