@workday/canvas-kit-docs 12.0.0-alpha.908-next.0 → 12.0.0-alpha.918-next.0

package/dist/mdx/MAINTAINING.mdx

@@ -1,3 +1,6 @@
+import {Markdown} from '@storybook/blocks';
+
+
 # Maintaining Canvas Kit
 
 If you're a Canvas Kit core maintainer, this doc is for you! Consider this a field guide to help you
@@ -48,13 +51,17 @@ runs on `support`, `master`, and `prerelease/minor` branches. Forward merges for
 starts with `chore: Release`, and that's how the forward merge workflow identifies them. Forward
 merges will run on every merge to `prerelease/minor` regardless of the commit message.
 
+<Markdown>
+  {`
 | Run Forward Merge? | Branch             | Commit Message                          |
 | ------------------ | ------------------ | --------------------------------------- |
-| ✅                 | `support`          | `chore: Release v6.8.14 [skip release]` |
-| ⛔️                | `support`          | `fix: Remove unused props`              |
-| ✅                 | `master`           | `chore: Release v7.3.0 [skip release]`  |
-| ⛔️                | `master`           | `fix: Update Popup types`               |
-| ✅                 | `prerelease/minor` | `feat: Add new Layout components`       |
+| ✅                 | \`support\`          | \`chore: Release v6.8.14 [skip release]\` |
+| ⛔️                | \`support\`          | \`fix: Remove unused props\`              |
+| ✅                 | \`master\`           | \`chore: Release v7.3.0 [skip release]\`  |
+| ⛔️                | \`master\`           | \`fix: Update Popup types\`               |
+| ✅                 | \`prerelease/minor\` | \`feat: Add new Layout components\`       |
+`}
+</Markdown>
 
 If the forward merge workflow fails and cannot automatically merge the update to the next branch, it
 will generate a PR with instructions on how to handle the forward merge manually. For a more
@@ -264,9 +271,9 @@ We use codemods to reduce friction for consumers as they make changes and do upg
 accompany major version releases since v5, and can also be released in minor releases if users want
 to apply some changes sooner.
 
-> **Note: In v12, we have done some infrastructure updates with moving to Webpack 5 and Storybook 7. With
-these updates has come some formatting issues after running our codemods. We recommend running a
-formatter to address the format issues that have been introduced in v12.**
+> **Note: In v12, we have done some infrastructure updates with moving to Webpack 5 and Storybook 7.
+> With these updates has come some formatting issues after running our codemods. We recommend
+> running a formatter to address the format issues that have been introduced in v12.**
 
 ### Add a New Codemod
 

package/dist/mdx/preview-react/menu/Menu.mdx

@@ -1,4 +1,7 @@
+import {Markdown} from '@storybook/blocks';
+
 import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 import Basic from './examples/Basic';
 import ContextMenu from './examples/ContextMenu';
 import CustomMenuItem from './examples/CustomMenuItem';
@@ -47,15 +50,19 @@ closing the `DeprecatedMenu`.
 using `aria-activedescendant`. Below is table of supported keyboard shortcuts and associated
 actions.
 
+<Markdown>
+  {`
 | Key                | Action                                                                                                                                           |
 | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `Enter` or `Space` | Activates the menu item and then closes the menu                                                                                                 |
-| `Escape`           | Closes the menu                                                                                                                                  |
-| `Up Arrow`         | Moves focus to the previous menu item – if focus is on first menu item, it moves focus to the last menu item                                     |
-| `Down Arrow`       | Moves focus to the next menu item – if focus is on last menu item, it moves focus to the first menu item                                         |
-| `Home`             | Moves focus to the first menu item                                                                                                               |
-| `End`              | Moves focus to the last menu item                                                                                                                |
-| `A-Z / a-z`        | Moves focus to the next menu item with a label that starts with the typed character if such an menu item exists – otherwise, focus does not move |
+| \`Enter\` or \`Space\` | Activates the menu item and then closes the menu                                                                                                 |
+| \`Escape\`           | Closes the menu                                                                                                                                  |
+| \`Up Arrow\`         | Moves focus to the previous menu item – if focus is on first menu item, it moves focus to the last menu item                                     |
+| \`Down Arrow\`       | Moves focus to the next menu item – if focus is on last menu item, it moves focus to the first menu item                                         |
+| \`Home\`             | Moves focus to the first menu item                                                                                                               |
+| \`End\`              | Moves focus to the last menu item                                                                                                                |
+| \`A-Z / a-z\`        | Moves focus to the next menu item with a label that starts with the typed character if such an menu item exists – otherwise, focus does not move |
+`}
+</Markdown>
 
 Note that although `DeprecatedMenu` includes support for keyboard shortcuts for the menu itself,
 you'll need to add your own keyboard handling and aria attributes to the triggering button.

package/dist/mdx/react/combobox/Combobox.mdx

@@ -16,6 +16,34 @@ Authoring Practices Guide (APG):
 
 Examples of a "combobox" would be date pickers, autocomplete, and select components.
 
+## Combobox value restriction
+
+A Combobox can either be either "constrained" or "arbitrary".
+
+### Constrained
+
+A constrained combobox can only have a value from a set of values presented as options. The user can
+pick from these values, but cannot input a value outside the options provided. Constrained
+comboboxes use the [useComboboxInputConstrained](#usecomboboxinputconstrained) hook and often have
+two separate `input` elements.
+
+- user input - This is the visible input and it should contain user-friendly values. Calls to
+  `.focus()` or `.blur()` are redirected to this input. Any prop passed to the `*.Input` component
+  that is not directly related to forms will be passed here (i.e. `data-testid`, `aria-*`, etc).
+
+- form input - This input is only visible to forms and the `value` will usually be server IDs. If
+  the combobox options don't have an ID and only use user values, the value of this input will be
+  the same as the user input. Any prop related to the function of forms will be passed here. For
+  example, the `name` attribute will be passed here. The `ref` will be pointed to this element.
+
+### Arbitrary
+
+An arbitrary combobox allows the user to enter any value. The list of options are presented as
+suggestions and selecting an option will prefill the combobox with the value of the option. The user
+is still allowed to modify the combobox even after an option is entered. With arbitrary comboboxes,
+there is only one `input` element. Arbitrary combobox inputs should use the
+[useComboboxInputArbitrary](#usecomboboxinputarbirary) hook.
+
 ## Installation
 
 ```sh
@@ -27,12 +55,14 @@ yarn add @workday/canvas-kit-react
 ### Autocomplete
 
 This example shows an Autocomplete example using `FormField`, `InputGroup`, and the `Combobox`
-components to make an autocomplete form field. It uses `useComboboxLoader` to make mock API calls
-using `setTimeout`. Your application may use
+components to make an autocomplete form field. It uses [useComboboxLoader](#usecomboboxloader) to
+make mock API calls using `setTimeout`. Your application may use
 [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API),
 [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API), or other means of
 communicating with a server.
 
+An Autocomplete is an example of an arbitrary combobox.
+
 <ExampleCodeBlock code={Autocomplete} />
 
 ### Custom Styles
@@ -47,4 +77,8 @@ our
 
 ## Hooks
 
-<SymbolDoc name="useComboboxLoader" fileName="/react/" />
+<SymbolDoc name="useComboboxLoader" fileName="/react/" />
+
+<SymbolDoc name="useComboboxInputConstrained" fileName="/react/" />
+
+<SymbolDoc name="useComboboxInputArbitrary" fileName="/react/" />

package/dist/mdx/react/combobox/examples/Autocomplete.tsx

@@ -4,7 +4,6 @@ import {
   createElemPropsHook,
   createSubcomponent,
   composeHooks,
-  ExtractProps,
 } from '@workday/canvas-kit-react/common';
 import {LoadReturn} from '@workday/canvas-kit-react/collection';
 import {
@@ -12,12 +11,13 @@ import {
   useComboboxModel,
   useComboboxLoader,
   useComboboxInput,
+  useComboboxInputArbitrary,
 } from '@workday/canvas-kit-react/combobox';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
 import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
-import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const colors = ['Red', 'Blue', 'Purple', 'Green', 'Pink'];
@@ -36,30 +36,51 @@ const useAutocompleteInput = composeHooks(
       },
     };
   }),
+  useComboboxInputArbitrary,
   useComboboxInput
 );
 
+const loadingDotsStencil = createStencil({
+  base: {
+    transition: 'opacity 100ms ease',
+    '& [data-part="loading-dots"]': {
+      display: 'flex',
+      transform: 'scale(0.3)',
+    },
+  },
+  modifiers: {
+    isLoading: {
+      true: {
+        opacity: system.opacity.full,
+      },
+      false: {
+        opacity: system.opacity.zero,
+      },
+    },
+  },
+});
+
 const AutoCompleteInput = createSubcomponent(TextInput)({
   modelHook: useComboboxModel,
   elemPropsHook: useAutocompleteInput,
-})<ExtractProps<typeof Combobox.Input, never>>((elemProps, Element) => {
-  return <Combobox.Input as={Element} {...elemProps} />;
+})<{isLoading?: boolean}>(({isLoading, ...elemProps}, Element) => {
+  return (
+    <InputGroup>
+      <InputGroup.Input as={Element} {...elemProps} />
+      <InputGroup.InnerEnd
+        cs={loadingDotsStencil({isLoading})}
+        width={px2rem(20)}
+        data-loading={isLoading}
+      >
+        <LoadingDots data-part="loading-dots" />
+      </InputGroup.InnerEnd>
+      <InputGroup.InnerEnd>
+        <InputGroup.ClearButton data-testid="clear" />
+      </InputGroup.InnerEnd>
+    </InputGroup>
+  );
 });
 
-const styleOverrides = {
-  inputGroupInner: createStyles({
-    width: px2rem(20),
-    transition: 'opacity 100ms ease',
-  }),
-  loadingDots: createStyles({
-    display: 'flex',
-    transform: 'scale(0.3)',
-  }),
-  comboboxMenuList: createStyles({
-    maxHeight: px2rem(200),
-  }),
-};
-
 export default () => {
   const {model, loader} = useComboboxLoader(
     {
@@ -109,27 +130,14 @@ export default () => {
       <FormField.Label>Fruit</FormField.Label>
       <FormField.Field>
         <Combobox model={model} onChange={event => console.log('input', event.currentTarget.value)}>
-          <InputGroup>
-            <InputGroup.Input as={FormField.Input.as(AutoCompleteInput)} />
-            <InputGroup.InnerEnd
-              cs={styleOverrides.inputGroupInner}
-              pointerEvents="none"
-              style={{opacity: loader.isLoading ? system.opacity.full : system.opacity.zero}}
-              data-loading={loader.isLoading}
-            >
-              <LoadingDots cs={styleOverrides.loadingDots} />
-            </InputGroup.InnerEnd>
-            <InputGroup.InnerEnd>
-              <InputGroup.ClearButton data-testid="clear" />
-            </InputGroup.InnerEnd>
-          </InputGroup>
+          <FormField.Input as={AutoCompleteInput} isLoading={loader.isLoading} />
           <Combobox.Menu.Popper>
             <Combobox.Menu.Card>
               {model.state.items.length === 0 && (
                 <StyledMenuItem as="span">No Results Found</StyledMenuItem>
               )}
               {model.state.items.length > 0 && (
-                <Combobox.Menu.List cs={styleOverrides.comboboxMenuList}>
+                <Combobox.Menu.List maxHeight={px2rem(200)}>
                   {item => <Combobox.Menu.Item>{item}</Combobox.Menu.Item>}
                 </Combobox.Menu.List>
               )}

package/dist/mdx/react/form-field/FormField.mdx

@@ -3,6 +3,7 @@ import Basic from './examples/Basic';
 import Alert from './examples/Alert';
 import Error from './examples/Error';
 import Disabled from './examples/Disabled';
+import HiddenLabel from './examples/HiddenLabel';
 import LabelPositionHorizontalStart from './examples/LabelPositionHorizontalStart';
 import LabelPositionHorizontalEnd from './examples/LabelPositionHorizontalEnd';
 import RefForwarding from './examples/RefForwarding';
@@ -183,6 +184,13 @@ Form Field should allow you to use it with all `inputs` including `Select`, `Tex
 
 <ExampleCodeBlock code={AllFields} />
 
+### Hidden Label
+
+In cases where you want to hide the label while still meeting accessibility standards, you can add
+`isHidden` on the `<FormField.Label/>`. This prop will visually hide the label.
+
+<ExampleCodeBlock code={HiddenLabel} />
+
 ### Themed Errors
 
 You can theme your error rings by wrapping an input in a `CanvasProvider` and defining

package/dist/mdx/react/form-field/examples/HiddenLabel.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {TextInput, InputGroup} from '@workday/canvas-kit-react/text-input';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {searchIcon} from '@workday/canvas-system-icons-web';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <Flex>
+      <FormField>
+        <FormField.Label isHidden>Search</FormField.Label>
+        <FormField.Field>
+          <FormField.Input as={InputGroup}>
+            <InputGroup.InnerStart pointerEvents="none">
+              <SystemIcon icon={searchIcon} size="small" />
+            </InputGroup.InnerStart>
+            <InputGroup.Input as={TextInput} onChange={handleChange} />
+          </FormField.Input>
+        </FormField.Field>
+      </FormField>
+    </Flex>
+  );
+};

package/dist/mdx/react/menu/Menu.mdx

@@ -1,3 +1,5 @@
+import {Markdown} from '@storybook/blocks';
+
 import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import ContextMenu from './examples/ContextMenu';
@@ -32,14 +34,18 @@ model which composes a list model and a popup model and sets up accessibility fe
 [Actions Menu pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/)
 using roving tabindex. Below is table of supported keyboard shortcuts and associated actions.
 
+<Markdown>
+  {`
 | Key                | Action                                                                                                       |
 | ------------------ | ------------------------------------------------------------------------------------------------------------ |
-| `Enter` or `Space` | Activates the menu item and then closes the menu                                                             |
-| `Escape`           | Closes the menu                                                                                              |
-| `Up Arrow`         | Moves focus to the previous menu item – if focus is on first menu item, it moves focus to the last menu item |
-| `Down Arrow`       | Moves focus to the next menu item – if focus is on last menu item, it moves focus to the first menu item     |
-| `Home`             | Moves focus to the first menu item                                                                           |
-| `End`              | Moves focus to the last menu item                                                                            |
+| \`Enter\` or \`Space\` | Activates the menu item and then closes the menu                                                             |
+| \`Escape\`           | Closes the menu                                                                                              |
+| \`Up Arrow\`         | Moves focus to the previous menu item – if focus is on first menu item, it moves focus to the last menu item |
+| \`Down Arrow\`       | Moves focus to the next menu item – if focus is on last menu item, it moves focus to the first menu item     |
+| \`Home\`             | Moves focus to the first menu item                                                                           |
+| \`End\`              | Moves focus to the last menu item                                                                            |
+`}
+</Markdown>
 
 ### Context Menu
 

package/dist/mdx/react/select/Select.mdx

@@ -7,6 +7,7 @@ import {
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
 import Complex from './examples/Complex';
+import Controlled from './examples/Controlled';
 import Disabled from './examples/Disabled';
 import DisabledOptions from './examples/DisabledOption';
 import Error from './examples/Error';
@@ -247,6 +248,16 @@ const items = [
 </Select>;
 ```
 
+### Controlled
+
+The Select can be a
+[controlled input](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)
+component by passing the `value` and `onChange` to either the `<Select>` component or the
+`<Select.Input>` component. Internally, the `Select.Input` watches for changes on the `value` React
+prop as well as the `value` DOM property and will update the model accordingly.
+
+<ExampleCodeBlock code={Controlled} />
+
 ### When to use `getId`, or `getTextValue`
 
 - `getId`: This is an optional function to return the id of an item. If not provided, the default

package/dist/mdx/react/select/examples/Basic.tsx

@@ -15,6 +15,7 @@ const options = [
   'Mail',
   'Mobile Phone',
   'The Ontologically Anthropocentric Sensory Immersive Simulation',
+  'Thisisalongstringwithnobreaksandwillwrap',
 ];
 
 export default () => {

package/dist/mdx/react/select/examples/Controlled.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-react/select';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
+
+const options = [
+  {serverId: 'email', label: 'E-mail'},
+  {serverId: 'phone', label: 'Phone'},
+  {serverId: 'fax', label: 'Fax'},
+  {serverId: 'mail', label: 'Mail'},
+  {serverId: 'mobile', label: 'Mobile Phone'},
+  {
+    serverId: 'oasis',
+    label: 'The Ontologically Anthropocentric Sensory Immersive Simulation',
+  },
+];
+
+export default () => {
+  const [value, setValue] = React.useState('');
+  const [label, setLabel] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.currentTarget.value);
+    setLabel(options.find(item => item.serverId === event.currentTarget.value)?.label || '');
+  };
+
+  return (
+    <Flex cs={parentContainerStyles}>
+      <FormField>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select items={options} getId={item => item.serverId} getTextValue={item => item.label}>
+            <FormField.Input as={Select.Input} onChange={handleChange} value={value} />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>
+              </Select.Card>
+            </Select.Popper>
+          </Select>
+        </FormField.Field>
+      </FormField>
+      <p>Id: {value}</p>
+      <p>Label: {label}</p>
+      <Flex gap="s">
+        <SecondaryButton
+          onClick={e => {
+            setValue('fax');
+          }}
+        >
+          Set to "Fax"
+        </SecondaryButton>
+        <SecondaryButton
+          onClick={e => {
+            setValue('');
+          }}
+        >
+          Clear
+        </SecondaryButton>
+      </Flex>
+    </Flex>
+  );
+};

package/dist/mdx/react/select/examples/WithIcons.tsx

@@ -40,7 +40,7 @@ export default () => {
             <FormField.Input
               as={Select.Input}
               cs={styleOverrides.formfieldInputStyles}
-              inputStartIcon={selectedItem.value.icon}
+              inputStartIcon={selectedItem?.value.icon}
             />
             <Select.Popper>
               <Select.Card cs={styleOverrides.selectCardStyles}>

package/dist/mdx/react/status-indicator/StatusIndicator.mdx

@@ -1,3 +1,5 @@
+import {Markdown} from '@storybook/blocks';
+
 import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 
@@ -36,14 +38,18 @@ yarn add @workday/canvas-kit-react
 Note that the `type` prop is required (there is no default value). `type` accepts the following
 values:
 
+<Markdown>
+  {`
 | Type                               | Suggested Purpose                                                                              |
 | ---------------------------------- | ---------------------------------------------------------------------------------------------- |
-| `StatusIndicator.Type.Gray`        | Basic, general status. No action required.                                                     |
-| `StatusIndicator.Type.Orange`      | Signifies alerts, that a user must take action, or that something requires attention.          |
-| `StatusIndicator.Type.Blue`        | Signifies an item in progress, an update, or a current status.                                 |
-| `StatusIndicator.Type.Green`       | Signifies success, completion, or celebration.                                                 |
-| `StatusIndicator.Type.Red`         | Signifies an error or issue, or removal or destruction.                                        |
-| `StatusIndicator.Type.Transparent` | General status and related information intended for use on top of imagery, video, or graphics. |
+| \`StatusIndicator.Type.Gray\`        | Basic, general status. No action required.                                                     |
+| \`StatusIndicator.Type.Orange\`      | Signifies alerts, that a user must take action, or that something requires attention.          |
+| \`StatusIndicator.Type.Blue\`        | Signifies an item in progress, an update, or a current status.                                 |
+| \`StatusIndicator.Type.Green\`       | Signifies success, completion, or celebration.                                                 |
+| \`StatusIndicator.Type.Red\`         | Signifies an error or issue, or removal or destruction.                                        |
+| \`StatusIndicator.Type.Transparent\` | General status and related information intended for use on top of imagery, video, or graphics. |
+`}
+</Markdown>
 
 ### Emphasis
 

package/dist/mdx/react/text-input/TextInput.mdx

@@ -92,7 +92,8 @@ and will be semantically correct in left-to-right and right-to-left languages.
 `InputGroup.InnerStart` and `InputGroup.InnerEnd` subcomponents can handle any child elements, but
 are built for icons. The default width is `40px`, which is perfect for icons. If you need to use
 something else, be sure to set the `width` property of `InputGroup.InnerStart` or
-`InputGroup.InnerEnd` to match the intended width of the element.
+`InputGroup.InnerEnd` to match the intended width of the element. Do not use the `cs` prop or any
+method to change width. The `width` prop is used to correctly position other inner elements.
 
 <ExampleCodeBlock code={Icons} />
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "12.0.0-alpha.908-next.0",
+  "version": "12.0.0-alpha.918-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^12.0.0-alpha.908-next.0",
-    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.908-next.0",
-    "@workday/canvas-kit-react": "^12.0.0-alpha.908-next.0",
-    "@workday/canvas-kit-styling": "^12.0.0-alpha.908-next.0",
+    "@workday/canvas-kit-labs-react": "^12.0.0-alpha.918-next.0",
+    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.918-next.0",
+    "@workday/canvas-kit-react": "^12.0.0-alpha.918-next.0",
+    "@workday/canvas-kit-styling": "^12.0.0-alpha.918-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "markdown-to-jsx": "^7.2.0",
@@ -58,7 +58,7 @@
     "fs-extra": "^10.0.0",
     "glob": "^7.1.6",
     "mkdirp": "^1.0.3",
-    "typescript": "4.9"
+    "typescript": "5.0"
   },
-  "gitHead": "96aa087e44d928f9b530e0133be4326b8ff2fdce"
+  "gitHead": "3f21a8c474728598369595c8978854dab2355235"
 }