@workday/canvas-kit-docs 14.0.0-alpha.1230-next.0 → 14.0.0-alpha.1233-next.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.
Files changed (43) hide show
  1. package/dist/es6/lib/docs.js +25 -911
  2. package/dist/mdx/14.0-UPGRADE-GUIDE.mdx +78 -32
  3. package/dist/mdx/labs-react/combobox/Combobox.mdx +1 -1
  4. package/dist/mdx/labs-react/search-form/SearchForm.mdx +14 -2
  5. package/dist/mdx/preview-react/_examples/mdx/examples/TextInputWithFormik.tsx +35 -28
  6. package/dist/mdx/preview-react/_examples/mdx/examples/TextInputWithReactHookForm.tsx +27 -21
  7. package/dist/mdx/react/_examples/mdx/examples/common/FilterListWithLiveStatus.tsx +8 -5
  8. package/dist/mdx/react/_examples/mdx/examples/common/HiddenLiveRegion.tsx +8 -5
  9. package/dist/mdx/react/_examples/mdx/examples/common/TextInputWithLiveError.tsx +11 -8
  10. package/dist/mdx/react/_examples/mdx/examples/common/VisibleLiveRegion.tsx +9 -5
  11. package/package.json +6 -6
  12. package/dist/mdx/preview-react/text-area/TextArea.mdx +0 -136
  13. package/dist/mdx/preview-react/text-area/examples/Alert.tsx +0 -35
  14. package/dist/mdx/preview-react/text-area/examples/Basic.tsx +0 -17
  15. package/dist/mdx/preview-react/text-area/examples/Disabled.tsx +0 -17
  16. package/dist/mdx/preview-react/text-area/examples/Error.tsx +0 -40
  17. package/dist/mdx/preview-react/text-area/examples/Grow.tsx +0 -17
  18. package/dist/mdx/preview-react/text-area/examples/HiddenLabel.tsx +0 -22
  19. package/dist/mdx/preview-react/text-area/examples/LabelPositionHorizontal.tsx +0 -17
  20. package/dist/mdx/preview-react/text-area/examples/LabelPositionVertical.tsx +0 -17
  21. package/dist/mdx/preview-react/text-area/examples/Placeholder.tsx +0 -17
  22. package/dist/mdx/preview-react/text-area/examples/RefForwarding.tsx +0 -28
  23. package/dist/mdx/preview-react/text-area/examples/Required.tsx +0 -17
  24. package/dist/mdx/preview-react/text-area/examples/ResizeConstraints.tsx +0 -22
  25. package/dist/mdx/preview-react/text-input/TextInput.mdx +0 -170
  26. package/dist/mdx/preview-react/text-input/examples/Alert.tsx +0 -33
  27. package/dist/mdx/preview-react/text-input/examples/Basic.tsx +0 -17
  28. package/dist/mdx/preview-react/text-input/examples/Disabled.tsx +0 -17
  29. package/dist/mdx/preview-react/text-input/examples/Error.tsx +0 -40
  30. package/dist/mdx/preview-react/text-input/examples/Grow.tsx +0 -17
  31. package/dist/mdx/preview-react/text-input/examples/Hidden.tsx +0 -11
  32. package/dist/mdx/preview-react/text-input/examples/HiddenLabel.tsx +0 -22
  33. package/dist/mdx/preview-react/text-input/examples/LabelPositionHorizontal.tsx +0 -17
  34. package/dist/mdx/preview-react/text-input/examples/LabelPositionVertical.tsx +0 -17
  35. package/dist/mdx/preview-react/text-input/examples/Password.tsx +0 -17
  36. package/dist/mdx/preview-react/text-input/examples/Placeholder.tsx +0 -17
  37. package/dist/mdx/preview-react/text-input/examples/ReadOnly.tsx +0 -17
  38. package/dist/mdx/preview-react/text-input/examples/RefForwarding.tsx +0 -28
  39. package/dist/mdx/preview-react/text-input/examples/Required.tsx +0 -17
  40. package/dist/mdx/preview-react/text-input/examples/ThemedAlert.tsx +0 -51
  41. package/dist/mdx/preview-react/text-input/examples/ThemedError.tsx +0 -40
  42. package/dist/mdx/react/_examples/mdx/SearchForm.mdx +0 -19
  43. package/dist/mdx/react/_examples/mdx/examples/SearchFormBasic.tsx +0 -35
@@ -2245,7 +2245,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
2245
2245
  "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
2246
2246
  }
2247
2247
  ],
2248
- "tags": {},
2248
+ "tags": {
2249
+ "deprecated": "⚠️ `SearchFormProps` is deprecated and will be removed in a future major version. Please reference our [Autocomplete example](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs#usage)."
2250
+ },
2249
2251
  "type": {
2250
2252
  "kind": "alias",
2251
2253
  "name": "SearchForm"
@@ -2261,7 +2263,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
2261
2263
  "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
2262
2264
  }
2263
2265
  ],
2264
- "tags": {},
2266
+ "tags": {
2267
+ "deprecated": "⚠️ `SearchFormState` is deprecated and will be removed in a future major version. Please reference our [Autocomplete example](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs#usage)."
2268
+ },
2265
2269
  "type": {
2266
2270
  "kind": "object",
2267
2271
  "properties": [
@@ -2329,7 +2333,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
2329
2333
  "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
2330
2334
  }
2331
2335
  ],
2332
- "tags": {},
2336
+ "tags": {
2337
+ "deprecated": "⚠️ `searchFormStencil` is deprecated and will be removed in a future major version. Please reference our [Autocomplete example](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs#usage)."
2338
+ },
2333
2339
  "type": {
2334
2340
  "kind": "function",
2335
2341
  "parameters": [
@@ -3033,7 +3039,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
3033
3039
  "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
3034
3040
  }
3035
3041
  ],
3036
- "tags": {},
3042
+ "tags": {
3043
+ "deprecated": "⚠️ `SearchForm` is deprecated and will be removed in a future major version. Please reference our [Autocomplete example](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs#usage)."
3044
+ },
3037
3045
  "type": {
3038
3046
  "kind": "component",
3039
3047
  "props": [
@@ -3490,7 +3498,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
3490
3498
  "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/themes.ts"
3491
3499
  }
3492
3500
  ],
3493
- "tags": {},
3501
+ "tags": {
3502
+ "deprecated": "⚠️ `SearchTheme` is deprecated and will be removed in a future major version. Please our CSS tokens to theme components."
3503
+ },
3494
3504
  "type": {
3495
3505
  "kind": "object",
3496
3506
  "typeParameters": [],
@@ -3533,7 +3543,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
3533
3543
  "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/themes.ts"
3534
3544
  }
3535
3545
  ],
3536
- "tags": {},
3546
+ "tags": {
3547
+ "deprecated": "⚠️ `SearchThemeAttributes` is deprecated and will be removed in a future major version. Please our CSS tokens to theme components."
3548
+ },
3537
3549
  "type": {
3538
3550
  "kind": "object",
3539
3551
  "properties": [
@@ -3703,7 +3715,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
3703
3715
  "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/themes.ts"
3704
3716
  }
3705
3717
  ],
3706
- "tags": {},
3718
+ "tags": {
3719
+ "deprecated": "⚠️ `SearchThemes` is deprecated and will be removed in a future major version. Please our CSS tokens to theme components."
3720
+ },
3707
3721
  "type": {
3708
3722
  "kind": "object",
3709
3723
  "properties": [],
@@ -3732,7 +3746,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
3732
3746
  "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/themes.ts"
3733
3747
  }
3734
3748
  ],
3735
- "tags": {},
3749
+ "tags": {
3750
+ "deprecated": "⚠️ `searchThemes` is deprecated and will be removed in a future major version. Please our CSS tokens to theme components."
3751
+ },
3736
3752
  "type": {
3737
3753
  "kind": "symbol",
3738
3754
  "name": "SearchThemes",
@@ -69020,908 +69036,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
69020
69036
  }
69021
69037
  }
69022
69038
  },
69023
- {
69024
- "name": "TextAreaProps",
69025
- "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-area/lib/TextArea.tsx",
69026
- "description": "",
69027
- "declarations": [
69028
- {
69029
- "name": "TextAreaProps",
69030
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-area/lib/TextArea.tsx"
69031
- }
69032
- ],
69033
- "tags": {
69034
- "deprecated": "⚠️ `TextAreaProps` in Preview has been deprecated and will be removed in a future major version. Please use [`TextArea` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textarea--docs) instead."
69035
- },
69036
- "type": {
69037
- "kind": "alias",
69038
- "name": "TextArea"
69039
- }
69040
- },
69041
- {
69042
- "name": "TextArea",
69043
- "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-area/lib/TextArea.tsx",
69044
- "description": "",
69045
- "declarations": [
69046
- {
69047
- "name": "TextArea",
69048
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-area/lib/TextArea.tsx"
69049
- }
69050
- ],
69051
- "tags": {
69052
- "stencil": "formFieldStencil",
69053
- "deprecated": "⚠️ `TextArea` in Preview has been deprecated and will be removed in a future major version. Please use [`TextArea` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textarea--docs) instead."
69054
- },
69055
- "type": {
69056
- "kind": "enhancedComponent",
69057
- "componentType": "container",
69058
- "displayName": "TextArea",
69059
- "props": [
69060
- {
69061
- "kind": "property",
69062
- "name": "children",
69063
- "required": true,
69064
- "type": {
69065
- "kind": "external",
69066
- "name": "ReactNode",
69067
- "url": "https://reactjs.org/docs/rendering-elements.html"
69068
- },
69069
- "description": "Children of the Text Input. Should contain a `<TextArea.Field>`, a `<TextArea.Label>` and an optional `<TextArea.Hint>`",
69070
- "declarations": [
69071
- {
69072
- "name": "children",
69073
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-area/lib/TextArea.tsx"
69074
- }
69075
- ],
69076
- "tags": {}
69077
- },
69078
- {
69079
- "kind": "property",
69080
- "name": "orientation",
69081
- "required": false,
69082
- "type": {
69083
- "kind": "union",
69084
- "value": [
69085
- {
69086
- "kind": "string",
69087
- "value": "vertical"
69088
- },
69089
- {
69090
- "kind": "string",
69091
- "value": "horizontalStart"
69092
- },
69093
- {
69094
- "kind": "string",
69095
- "value": "horizontalEnd"
69096
- }
69097
- ]
69098
- },
69099
- "description": "The direction the child elements should stack. In v13, `horizontal` will be removed. Please use `horizontalStart` or `horizontalEnd` for horizontal alignment.",
69100
- "declarations": [
69101
- {
69102
- "name": "orientation",
69103
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/form-field/lib/FormField.tsx"
69104
- }
69105
- ],
69106
- "tags": {
69107
- "default": "vertical"
69108
- },
69109
- "defaultValue": {
69110
- "kind": "symbol",
69111
- "name": "vertical",
69112
- "value": "vertical"
69113
- }
69114
- },
69115
- {
69116
- "kind": "property",
69117
- "name": "cs",
69118
- "required": false,
69119
- "type": {
69120
- "kind": "symbol",
69121
- "name": "CSToPropsInput",
69122
- "value": "CSToPropsInput"
69123
- },
69124
- "description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles } instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n {...handleCsProp(elemProps, [\n myStyles,\n myModifiers({ size: 'medium' }),\n myVars({ backgroundColor: 'red' })\n ])}\n >\n {children}\n </Element>\n)\n```",
69125
- "declarations": [
69126
- {
69127
- "name": "cs",
69128
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
69129
- }
69130
- ],
69131
- "tags": {}
69132
- },
69133
- {
69134
- "kind": "property",
69135
- "name": "grow",
69136
- "required": false,
69137
- "type": {
69138
- "kind": "primitive",
69139
- "value": "boolean"
69140
- },
69141
- "description": "True if the component should grow to its container's width. False otherwise.",
69142
- "declarations": [
69143
- {
69144
- "name": "grow",
69145
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/types.ts"
69146
- }
69147
- ],
69148
- "tags": {}
69149
- },
69150
- {
69151
- "kind": "property",
69152
- "name": "as",
69153
- "description": "Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element.\n\n**Note:** Not all elements make sense and some elements may cause accessibility issues. Change this value with care.",
69154
- "tags": {},
69155
- "declarations": [],
69156
- "type": {
69157
- "kind": "external",
69158
- "name": "React.ElementType",
69159
- "url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
69160
- },
69161
- "defaultValue": {
69162
- "kind": "external",
69163
- "name": "div",
69164
- "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
69165
- }
69166
- },
69167
- {
69168
- "kind": "property",
69169
- "name": "ref",
69170
- "description": "Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).",
69171
- "tags": {},
69172
- "declarations": [],
69173
- "type": {
69174
- "kind": "external",
69175
- "name": "React.Ref",
69176
- "url": "https://reactjs.org/docs/refs-and-the-dom.html",
69177
- "typeParameters": [
69178
- {
69179
- "kind": "typeParameter",
69180
- "name": "R",
69181
- "required": true,
69182
- "defaultValue": {
69183
- "kind": "external",
69184
- "name": "div",
69185
- "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
69186
- }
69187
- }
69188
- ]
69189
- }
69190
- },
69191
- {
69192
- "kind": "property",
69193
- "name": "model",
69194
- "description": "Optional model to pass to the component. This will override the default model created for the component. This can be useful if you want to access to the state and events of the model, or if you have nested components of the same type and you need to override the model provided by React Context.",
69195
- "tags": {},
69196
- "declarations": [],
69197
- "type": {
69198
- "kind": "symbol",
69199
- "name": "TextInputModel"
69200
- }
69201
- },
69202
- {
69203
- "kind": "property",
69204
- "name": "elemPropsHook",
69205
- "description": "Optional hook that receives the model and all props to be applied to the element. If you use this, it is your responsibility to return props, merging as appropriate. For example, returning an empty object will disable all elemProps hooks associated with this component. This allows finer control over a component without creating a new one.",
69206
- "tags": {},
69207
- "declarations": [],
69208
- "type": {
69209
- "kind": "function",
69210
- "parameters": [
69211
- {
69212
- "kind": "parameter",
69213
- "description": "",
69214
- "tags": {},
69215
- "declarations": [],
69216
- "name": "model",
69217
- "type": {
69218
- "kind": "symbol",
69219
- "name": "TextInputModel"
69220
- },
69221
- "required": true
69222
- },
69223
- {
69224
- "kind": "parameter",
69225
- "description": "",
69226
- "tags": {},
69227
- "declarations": [],
69228
- "name": "elemProps",
69229
- "type": {
69230
- "kind": "generic",
69231
- "name": "TProps"
69232
- }
69233
- }
69234
- ],
69235
- "returnType": {
69236
- "kind": "external",
69237
- "name": "HTML Attributes",
69238
- "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes"
69239
- }
69240
- }
69241
- }
69242
- ],
69243
- "baseElement": {
69244
- "kind": "external",
69245
- "name": "div",
69246
- "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
69247
- },
69248
- "model": "TextInputModel",
69249
- "styleComponent": {
69250
- "kind": "symbol",
69251
- "name": "Flex"
69252
- },
69253
- "subComponents": [
69254
- {
69255
- "name": "Field",
69256
- "symbol": "TextAreaField",
69257
- "description": "",
69258
- "declarations": [
69259
- {
69260
- "name": "Field",
69261
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-area/lib/TextArea.tsx"
69262
- },
69263
- {
69264
- "name": "TextAreaField",
69265
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-area/lib/TextAreaField.tsx"
69266
- }
69267
- ],
69268
- "tags": {}
69269
- }
69270
- ]
69271
- }
69272
- },
69273
- {
69274
- "name": "TextAreaField",
69275
- "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-area/lib/TextAreaField.tsx",
69276
- "description": "",
69277
- "declarations": [
69278
- {
69279
- "name": "TextAreaField",
69280
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-area/lib/TextAreaField.tsx"
69281
- }
69282
- ],
69283
- "tags": {
69284
- "deprecated": "⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-form-field--docs) in Preview instead."
69285
- },
69286
- "type": {
69287
- "kind": "enhancedComponent",
69288
- "componentType": "subcomponent",
69289
- "displayName": "TextArea.Field",
69290
- "props": [
69291
- {
69292
- "kind": "property",
69293
- "name": "cs",
69294
- "required": false,
69295
- "type": {
69296
- "kind": "symbol",
69297
- "name": "CSToPropsInput",
69298
- "value": "CSToPropsInput"
69299
- },
69300
- "description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles } instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n {...handleCsProp(elemProps, [\n myStyles,\n myModifiers({ size: 'medium' }),\n myVars({ backgroundColor: 'red' })\n ])}\n >\n {children}\n </Element>\n)\n```",
69301
- "declarations": [
69302
- {
69303
- "name": "cs",
69304
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
69305
- }
69306
- ],
69307
- "tags": {}
69308
- },
69309
- {
69310
- "kind": "property",
69311
- "name": "children",
69312
- "description": "",
69313
- "tags": {},
69314
- "declarations": [],
69315
- "type": {
69316
- "kind": "external",
69317
- "name": "React.ReactNode",
69318
- "url": "https://reactjs.org/docs/rendering-elements.html"
69319
- }
69320
- },
69321
- {
69322
- "kind": "property",
69323
- "name": "as",
69324
- "description": "Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element.\n\n**Note:** Not all elements make sense and some elements may cause accessibility issues. Change this value with care.",
69325
- "tags": {},
69326
- "declarations": [],
69327
- "type": {
69328
- "kind": "external",
69329
- "name": "React.ElementType",
69330
- "url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
69331
- },
69332
- "defaultValue": {
69333
- "kind": "external",
69334
- "name": "textarea",
69335
- "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea"
69336
- }
69337
- },
69338
- {
69339
- "kind": "property",
69340
- "name": "ref",
69341
- "description": "Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).",
69342
- "tags": {},
69343
- "declarations": [],
69344
- "type": {
69345
- "kind": "external",
69346
- "name": "React.Ref",
69347
- "url": "https://reactjs.org/docs/refs-and-the-dom.html",
69348
- "typeParameters": [
69349
- {
69350
- "kind": "typeParameter",
69351
- "name": "R",
69352
- "required": true,
69353
- "defaultValue": {
69354
- "kind": "external",
69355
- "name": "textarea",
69356
- "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea"
69357
- }
69358
- }
69359
- ]
69360
- }
69361
- },
69362
- {
69363
- "kind": "property",
69364
- "name": "model",
69365
- "description": "Optional model to pass to the component. This will override the default model created for the component. This can be useful if you want to access to the state and events of the model, or if you have nested components of the same type and you need to override the model provided by React Context.",
69366
- "tags": {},
69367
- "declarations": [],
69368
- "type": {
69369
- "kind": "symbol",
69370
- "name": "TextInputModel"
69371
- }
69372
- },
69373
- {
69374
- "kind": "property",
69375
- "name": "elemPropsHook",
69376
- "description": "Optional hook that receives the model and all props to be applied to the element. If you use this, it is your responsibility to return props, merging as appropriate. For example, returning an empty object will disable all elemProps hooks associated with this component. This allows finer control over a component without creating a new one.",
69377
- "tags": {},
69378
- "declarations": [],
69379
- "type": {
69380
- "kind": "function",
69381
- "parameters": [
69382
- {
69383
- "kind": "parameter",
69384
- "description": "",
69385
- "tags": {},
69386
- "declarations": [],
69387
- "name": "model",
69388
- "type": {
69389
- "kind": "symbol",
69390
- "name": "TextInputModel"
69391
- },
69392
- "required": true
69393
- },
69394
- {
69395
- "kind": "parameter",
69396
- "description": "",
69397
- "tags": {},
69398
- "declarations": [],
69399
- "name": "elemProps",
69400
- "type": {
69401
- "kind": "generic",
69402
- "name": "TProps"
69403
- }
69404
- }
69405
- ],
69406
- "returnType": {
69407
- "kind": "external",
69408
- "name": "HTML Attributes",
69409
- "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes"
69410
- }
69411
- }
69412
- }
69413
- ],
69414
- "baseElement": {
69415
- "kind": "external",
69416
- "name": "textarea",
69417
- "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea"
69418
- },
69419
- "styleComponent": {
69420
- "kind": "symbol",
69421
- "name": "Box"
69422
- },
69423
- "model": "TextInputModel"
69424
- }
69425
- },
69426
- {
69427
- "name": "useTextInputField",
69428
- "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-input/lib/hooks/useTextInputField.tsx",
69429
- "description": "Adds the necessary props to a `Field` component. Used by the TextInput.Field subcomponent.",
69430
- "declarations": [
69431
- {
69432
- "name": "useTextInputField",
69433
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-input/lib/hooks/useTextInputField.tsx"
69434
- }
69435
- ],
69436
- "tags": {
69437
- "deprecated": "⚠️ `useTextInputField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead."
69438
- },
69439
- "type": {
69440
- "kind": "function",
69441
- "name": {
69442
- "kind": "symbol",
69443
- "name": "createElemPropsHook"
69444
- },
69445
- "parameters": [
69446
- {
69447
- "kind": "parameter",
69448
- "name": "model",
69449
- "description": "",
69450
- "tags": {},
69451
- "declarations": [],
69452
- "type": {
69453
- "kind": "symbol",
69454
- "name": "TextInputModel"
69455
- },
69456
- "required": true
69457
- },
69458
- {
69459
- "kind": "parameter",
69460
- "name": "elemProps",
69461
- "description": "",
69462
- "tags": {},
69463
- "declarations": [],
69464
- "type": {
69465
- "kind": "object",
69466
- "properties": []
69467
- },
69468
- "required": false
69469
- },
69470
- {
69471
- "kind": "parameter",
69472
- "name": "ref",
69473
- "description": "",
69474
- "tags": {},
69475
- "declarations": [],
69476
- "type": {
69477
- "kind": "external",
69478
- "name": "React.Ref",
69479
- "url": "https://reactjs.org/docs/refs-and-the-dom.html"
69480
- },
69481
- "required": false
69482
- }
69483
- ],
69484
- "returnType": {
69485
- "kind": "object",
69486
- "properties": [
69487
- {
69488
- "kind": "property",
69489
- "name": "type",
69490
- "required": true,
69491
- "type": {
69492
- "kind": "string",
69493
- "value": "text"
69494
- },
69495
- "description": "",
69496
- "tags": {},
69497
- "declarations": []
69498
- }
69499
- ]
69500
- }
69501
- }
69502
- },
69503
- {
69504
- "name": "useTextInputModel",
69505
- "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-input/lib/hooks/useTextInputModel.ts",
69506
- "description": "",
69507
- "declarations": [
69508
- {
69509
- "name": "useTextInputModel",
69510
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-input/lib/hooks/useTextInputModel.ts"
69511
- }
69512
- ],
69513
- "tags": {
69514
- "deprecated": "⚠️ `useTextInputModel` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead."
69515
- },
69516
- "type": {
69517
- "kind": "symbol",
69518
- "name": "useFormFieldModel"
69519
- }
69520
- },
69521
- {
69522
- "name": "TextInputProps",
69523
- "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-input/lib/TextInput.tsx",
69524
- "description": "",
69525
- "declarations": [
69526
- {
69527
- "name": "TextInputProps",
69528
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-input/lib/TextInput.tsx"
69529
- }
69530
- ],
69531
- "tags": {
69532
- "deprecated": "⚠️ `TextInputProps` in Preview has been deprecated and will be removed in a future major version. Please use [`TextInput` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--docs) instead."
69533
- },
69534
- "type": {
69535
- "kind": "alias",
69536
- "name": "TextInput"
69537
- }
69538
- },
69539
- {
69540
- "name": "TextInput",
69541
- "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-input/lib/TextInput.tsx",
69542
- "description": "",
69543
- "declarations": [
69544
- {
69545
- "name": "TextInput",
69546
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-input/lib/TextInput.tsx"
69547
- }
69548
- ],
69549
- "tags": {
69550
- "stencil": "formFieldStencil",
69551
- "deprecated": "⚠️ `TextInput` in Preview has been deprecated and will be removed in a future major version. Please use [`TextInput` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textinput--docs) instead."
69552
- },
69553
- "type": {
69554
- "kind": "enhancedComponent",
69555
- "componentType": "container",
69556
- "displayName": "TextInput",
69557
- "props": [
69558
- {
69559
- "kind": "property",
69560
- "name": "orientation",
69561
- "required": false,
69562
- "type": {
69563
- "kind": "union",
69564
- "value": [
69565
- {
69566
- "kind": "string",
69567
- "value": "vertical"
69568
- },
69569
- {
69570
- "kind": "string",
69571
- "value": "horizontalStart"
69572
- },
69573
- {
69574
- "kind": "string",
69575
- "value": "horizontalEnd"
69576
- }
69577
- ]
69578
- },
69579
- "description": "The direction the child elements should stack. In v13, `horizontal` will be removed. Please use `horizontalStart` or `horizontalEnd` for horizontal alignment.",
69580
- "declarations": [
69581
- {
69582
- "name": "orientation",
69583
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/form-field/lib/FormField.tsx"
69584
- }
69585
- ],
69586
- "tags": {
69587
- "default": "vertical"
69588
- },
69589
- "defaultValue": {
69590
- "kind": "symbol",
69591
- "name": "vertical",
69592
- "value": "vertical"
69593
- }
69594
- },
69595
- {
69596
- "kind": "property",
69597
- "name": "children",
69598
- "required": true,
69599
- "type": {
69600
- "kind": "external",
69601
- "name": "ReactNode",
69602
- "url": "https://reactjs.org/docs/rendering-elements.html"
69603
- },
69604
- "description": "",
69605
- "declarations": [
69606
- {
69607
- "name": "children",
69608
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/form-field/lib/FormField.tsx"
69609
- }
69610
- ],
69611
- "tags": {}
69612
- },
69613
- {
69614
- "kind": "property",
69615
- "name": "cs",
69616
- "required": false,
69617
- "type": {
69618
- "kind": "symbol",
69619
- "name": "CSToPropsInput",
69620
- "value": "CSToPropsInput"
69621
- },
69622
- "description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles } instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n {...handleCsProp(elemProps, [\n myStyles,\n myModifiers({ size: 'medium' }),\n myVars({ backgroundColor: 'red' })\n ])}\n >\n {children}\n </Element>\n)\n```",
69623
- "declarations": [
69624
- {
69625
- "name": "cs",
69626
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
69627
- }
69628
- ],
69629
- "tags": {}
69630
- },
69631
- {
69632
- "kind": "property",
69633
- "name": "grow",
69634
- "required": false,
69635
- "type": {
69636
- "kind": "primitive",
69637
- "value": "boolean"
69638
- },
69639
- "description": "True if the component should grow to its container's width. False otherwise.",
69640
- "declarations": [
69641
- {
69642
- "name": "grow",
69643
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/types.ts"
69644
- }
69645
- ],
69646
- "tags": {}
69647
- },
69648
- {
69649
- "kind": "property",
69650
- "name": "as",
69651
- "description": "Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element.\n\n**Note:** Not all elements make sense and some elements may cause accessibility issues. Change this value with care.",
69652
- "tags": {},
69653
- "declarations": [],
69654
- "type": {
69655
- "kind": "external",
69656
- "name": "React.ElementType",
69657
- "url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
69658
- },
69659
- "defaultValue": {
69660
- "kind": "external",
69661
- "name": "div",
69662
- "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
69663
- }
69664
- },
69665
- {
69666
- "kind": "property",
69667
- "name": "ref",
69668
- "description": "Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).",
69669
- "tags": {},
69670
- "declarations": [],
69671
- "type": {
69672
- "kind": "external",
69673
- "name": "React.Ref",
69674
- "url": "https://reactjs.org/docs/refs-and-the-dom.html",
69675
- "typeParameters": [
69676
- {
69677
- "kind": "typeParameter",
69678
- "name": "R",
69679
- "required": true,
69680
- "defaultValue": {
69681
- "kind": "external",
69682
- "name": "div",
69683
- "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
69684
- }
69685
- }
69686
- ]
69687
- }
69688
- },
69689
- {
69690
- "kind": "property",
69691
- "name": "model",
69692
- "description": "Optional model to pass to the component. This will override the default model created for the component. This can be useful if you want to access to the state and events of the model, or if you have nested components of the same type and you need to override the model provided by React Context.",
69693
- "tags": {},
69694
- "declarations": [],
69695
- "type": {
69696
- "kind": "symbol",
69697
- "name": "FormFieldModel"
69698
- }
69699
- },
69700
- {
69701
- "kind": "property",
69702
- "name": "elemPropsHook",
69703
- "description": "Optional hook that receives the model and all props to be applied to the element. If you use this, it is your responsibility to return props, merging as appropriate. For example, returning an empty object will disable all elemProps hooks associated with this component. This allows finer control over a component without creating a new one.",
69704
- "tags": {},
69705
- "declarations": [],
69706
- "type": {
69707
- "kind": "function",
69708
- "parameters": [
69709
- {
69710
- "kind": "parameter",
69711
- "description": "",
69712
- "tags": {},
69713
- "declarations": [],
69714
- "name": "model",
69715
- "type": {
69716
- "kind": "symbol",
69717
- "name": "FormFieldModel"
69718
- },
69719
- "required": true
69720
- },
69721
- {
69722
- "kind": "parameter",
69723
- "description": "",
69724
- "tags": {},
69725
- "declarations": [],
69726
- "name": "elemProps",
69727
- "type": {
69728
- "kind": "generic",
69729
- "name": "TProps"
69730
- }
69731
- }
69732
- ],
69733
- "returnType": {
69734
- "kind": "external",
69735
- "name": "HTML Attributes",
69736
- "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes"
69737
- }
69738
- }
69739
- }
69740
- ],
69741
- "baseElement": {
69742
- "kind": "external",
69743
- "name": "div",
69744
- "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
69745
- },
69746
- "model": "FormFieldModel",
69747
- "styleComponent": {
69748
- "kind": "symbol",
69749
- "name": "Flex"
69750
- },
69751
- "subComponents": [
69752
- {
69753
- "name": "Field",
69754
- "symbol": "TextInputField",
69755
- "description": "",
69756
- "declarations": [
69757
- {
69758
- "name": "Field",
69759
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-input/lib/TextInput.tsx"
69760
- },
69761
- {
69762
- "name": "TextInputField",
69763
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-input/lib/TextInputField.tsx"
69764
- }
69765
- ],
69766
- "tags": {}
69767
- }
69768
- ]
69769
- }
69770
- },
69771
- {
69772
- "name": "TextInputField",
69773
- "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-input/lib/TextInputField.tsx",
69774
- "description": "",
69775
- "declarations": [
69776
- {
69777
- "name": "TextInputField",
69778
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/text-input/lib/TextInputField.tsx"
69779
- }
69780
- ],
69781
- "tags": {
69782
- "deprecated": "⚠️ `TextInputField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-form-field--docs) instead."
69783
- },
69784
- "type": {
69785
- "kind": "enhancedComponent",
69786
- "componentType": "subcomponent",
69787
- "elemPropsHook": "useTextInputField",
69788
- "displayName": "TextInput.Field",
69789
- "props": [
69790
- {
69791
- "kind": "property",
69792
- "name": "cs",
69793
- "required": false,
69794
- "type": {
69795
- "kind": "symbol",
69796
- "name": "CSToPropsInput",
69797
- "value": "CSToPropsInput"
69798
- },
69799
- "description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles } instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n {...handleCsProp(elemProps, [\n myStyles,\n myModifiers({ size: 'medium' }),\n myVars({ backgroundColor: 'red' })\n ])}\n >\n {children}\n </Element>\n)\n```",
69800
- "declarations": [
69801
- {
69802
- "name": "cs",
69803
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
69804
- }
69805
- ],
69806
- "tags": {}
69807
- },
69808
- {
69809
- "kind": "property",
69810
- "name": "children",
69811
- "description": "",
69812
- "tags": {},
69813
- "declarations": [],
69814
- "type": {
69815
- "kind": "external",
69816
- "name": "React.ReactNode",
69817
- "url": "https://reactjs.org/docs/rendering-elements.html"
69818
- }
69819
- },
69820
- {
69821
- "kind": "property",
69822
- "name": "as",
69823
- "description": "Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element.\n\n**Note:** Not all elements make sense and some elements may cause accessibility issues. Change this value with care.",
69824
- "tags": {},
69825
- "declarations": [],
69826
- "type": {
69827
- "kind": "external",
69828
- "name": "React.ElementType",
69829
- "url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
69830
- },
69831
- "defaultValue": {
69832
- "kind": "external",
69833
- "name": "input",
69834
- "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"
69835
- }
69836
- },
69837
- {
69838
- "kind": "property",
69839
- "name": "ref",
69840
- "description": "Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).",
69841
- "tags": {},
69842
- "declarations": [],
69843
- "type": {
69844
- "kind": "external",
69845
- "name": "React.Ref",
69846
- "url": "https://reactjs.org/docs/refs-and-the-dom.html",
69847
- "typeParameters": [
69848
- {
69849
- "kind": "typeParameter",
69850
- "name": "R",
69851
- "required": true,
69852
- "defaultValue": {
69853
- "kind": "external",
69854
- "name": "input",
69855
- "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"
69856
- }
69857
- }
69858
- ]
69859
- }
69860
- },
69861
- {
69862
- "kind": "property",
69863
- "name": "model",
69864
- "description": "Optional model to pass to the component. This will override the default model created for the component. This can be useful if you want to access to the state and events of the model, or if you have nested components of the same type and you need to override the model provided by React Context.",
69865
- "tags": {},
69866
- "declarations": [],
69867
- "type": {
69868
- "kind": "symbol",
69869
- "name": "TextInputModel"
69870
- }
69871
- },
69872
- {
69873
- "kind": "property",
69874
- "name": "elemPropsHook",
69875
- "description": "Optional hook that receives the model and all props to be applied to the element. If you use this, it is your responsibility to return props, merging as appropriate. For example, returning an empty object will disable all elemProps hooks associated with this component. This allows finer control over a component without creating a new one.",
69876
- "tags": {},
69877
- "declarations": [],
69878
- "type": {
69879
- "kind": "function",
69880
- "parameters": [
69881
- {
69882
- "kind": "parameter",
69883
- "description": "",
69884
- "tags": {},
69885
- "declarations": [],
69886
- "name": "model",
69887
- "type": {
69888
- "kind": "symbol",
69889
- "name": "TextInputModel"
69890
- },
69891
- "required": true
69892
- },
69893
- {
69894
- "kind": "parameter",
69895
- "description": "",
69896
- "tags": {},
69897
- "declarations": [],
69898
- "name": "elemProps",
69899
- "type": {
69900
- "kind": "generic",
69901
- "name": "TProps"
69902
- }
69903
- }
69904
- ],
69905
- "returnType": {
69906
- "kind": "external",
69907
- "name": "HTML Attributes",
69908
- "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes"
69909
- }
69910
- }
69911
- }
69912
- ],
69913
- "baseElement": {
69914
- "kind": "external",
69915
- "name": "input",
69916
- "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"
69917
- },
69918
- "styleComponent": {
69919
- "kind": "symbol",
69920
- "name": "Box"
69921
- },
69922
- "model": "TextInputModel"
69923
- }
69924
- },
69925
69039
  {
69926
69040
  "name": "version",
69927
69041
  "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/version.ts",
@@ -196583,7 +195697,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
196583
195697
  {
196584
195698
  "name": "useThemedRing",
196585
195699
  "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/useThemedRing.ts",
196586
- "description": "This is a way to automatically add themed colors to your input and is helpful when showing alerts, success or errors to users.\nIt supports `error`, `alert`, and `success` states. It will try and use the corresponding\n`main` colors from your `CanvasThemePalette` unless they do not meet accessibility contrast, in\nwhich case the outer ring will use the `darkest` color. This hook will also show a `focusOutline`\nring when the input is focused. Note: You should not rely on these colors alone to differentiate\nalerts, but use them in combination with icons or hint text.\n```tsx\n// Add here jsx pragma to use css\nimport {jsx} from '@emotion/react';\nimport React from 'react';\nimport {TextInput} from '@workday/canvas-kit-preview-react/text-input';\nimport {useThemedRing} from '@workday/canvas-kit-react/common';\n\nexport const MyInput = ({handleChange}) => {\n const [value, setValue] = React.useState('invalid@email');\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value);\n };\n\n const alertStyles = useThemedRing('alert');\n\n return (\n <TextInput>\n <TextInput.Label>Email</TextInput.Label>\n <TextInput.Field css={alertStyles} onChange={handleChange} value={value} />\n <TextInput.Hint>Please enter a valid email.</TextInput.Hint>\n </TextInput>\n );\n};\n```",
195700
+ "description": "This is a way to automatically add themed colors to your input and is helpful when showing alerts, success or errors to users.\nIt supports `error`, `alert`, and `success` states. It will try and use the corresponding\n`main` colors from your `CanvasThemePalette` unless they do not meet accessibility contrast, in\nwhich case the outer ring will use the `darkest` color. This hook will also show a `focusOutline`\nring when the input is focused. Note: You should not rely on these colors alone to differentiate\nalerts, but use them in combination with icons or hint text.\n```tsx\n// Add here jsx pragma to use css\nimport {jsx} from '@emotion/react';\nimport React from 'react';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\nimport {useThemedRing} from '@workday/canvas-kit-react/common';\n\nexport const MyInput = ({handleChange}) => {\n const [value, setValue] = React.useState('invalid@email');\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value);\n };\n\n const alertStyles = useThemedRing('alert');\n\n return (\n <FormField>\n <FormField.Label>Email</FormField.Label>\n <FormField.Field css={alertStyles}>\n <FormField.Input as={TextInput} onChange={handleChange} value={value} />\n <FormField.Hint>Add a valid email</FormField.Hint>\n </FormField.Field>\n </FormField>\n );\n};\n```",
196587
195701
  "declarations": [
196588
195702
  {
196589
195703
  "name": "useThemedRing",