// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
<Stack
  tokens={
    {
      "childrenGap": 20,
    }
  }
>
  <Stack
    tokens={
      {
        "childrenGap": 5,
      }
    }
  >
    <StyledChoiceGroup
      id="timeToLive"
      label="Time to Live"
      onChange={[Function]}
      options={
        [
          {
            "ariaLabel": "ttl-off-option",
            "key": "off",
            "text": "Off",
          },
          {
            "ariaLabel": "ttl-on-no-default-option",
            "key": "on-nodefault",
            "text": "On (no default)",
          },
          {
            "ariaLabel": "ttl-on-option",
            "key": "on",
            "text": "On",
          },
        ]
      }
      selectedKey="on"
      styles={
        {
          "flexContainer": [
            {
              "columnGap": "default",
              "display": "default",
              "selectors": {
                ".ms-ChoiceField-field.is-checked::after": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field.is-checked::before": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceField-wrapper label": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontFamily": undefined,
                  "fontSize": 14,
                  "padding": "2px 5px",
                  "whiteSpace": "nowrap",
                },
                ".ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceFieldLabel:hover": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
          ],
          "label": {
            "color": "var(--colorNeutralForeground1)",
          },
          "root": {
            "selectors": {
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        }
      }
    />
    <StyledTextFieldBase
      ariaLabel="Time to live in seconds"
      data-test="ttl-input"
      id="timeToLiveSeconds"
      max={2147483647}
      min={1}
      onChange={[Function]}
      required={true}
      styles={
        {
          "field": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "color": "var(--colorNeutralForeground1)",
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
          },
          "fieldGroup": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "borderColor": "var(--colorNeutralStroke1)",
            "height": 25,
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "borderColor": "var(--colorNeutralStroke1)",
                "color": "var(--colorNeutralForeground2)",
              },
              "input": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input#autopilotInput": {
                "backgroundColor": "var(--colorNeutralBackground4)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input:disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
            "width": 300,
          },
          "subComponentStyles": {
            "label": {
              "root": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
          "suffix": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "border": "1px solid var(--colorNeutralStroke1)",
            "color": "var(--colorNeutralForeground1)",
          },
        }
      }
      suffix="second(s)"
      type="number"
      value="1000"
    />
  </Stack>
  <StyledChoiceGroup
    id="geoSpatialConfig"
    label="Geospatial Configuration"
    onChange={[Function]}
    options={
      [
        {
          "ariaLabel": "geography-option",
          "key": "Geography",
          "text": "Geography",
        },
        {
          "ariaLabel": "geometry-option",
          "key": "Geometry",
          "text": "Geometry",
        },
      ]
    }
    selectedKey="Geography"
    styles={
      {
        "flexContainer": [
          {
            "columnGap": "default",
            "display": "default",
            "selectors": {
              ".ms-ChoiceField-field.is-checked::after": {
                "borderColor": "",
              },
              ".ms-ChoiceField-field.is-checked::before": {
                "borderColor": "",
              },
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-wrapper label": {
                "color": "var(--colorNeutralForeground1)",
                "fontFamily": undefined,
                "fontSize": 14,
                "padding": "2px 5px",
                "whiteSpace": "nowrap",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel:hover": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        ],
        "label": {
          "color": "var(--colorNeutralForeground1)",
        },
        "root": {
          "selectors": {
            ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-ChoiceField-innerField": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-ChoiceFieldLabel": {
              "color": "var(--colorNeutralForeground1)",
            },
          },
        },
      }
    }
  />
  <Stack>
    <StyledLabelBase
      id="settingsV2ChangeFeedLabelId"
    >
      <ToolTipLabelComponent
        label="Change feed log retention policy"
        toolTipElement={
          <Text
            styles={
              {
                "root": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontSize": 14,
                },
              }
            }
          >
            Enable change feed log retention policy to retain last 10 minutes of history for items in the container by default. To support this, the request unit (RU) charge for this container will be multiplied by a factor of two for writes. Reads are unaffected.
          </Text>
        }
      />
    </StyledLabelBase>
    <StyledChoiceGroup
      aria-labelledby="settingsV2ChangeFeedLabelId"
      id="changeFeedPolicy"
      onChange={[Function]}
      options={
        [
          {
            "key": "Off",
            "text": "Off",
          },
          {
            "key": "On",
            "text": "On",
          },
        ]
      }
      selectedKey="On"
      styles={
        {
          "flexContainer": [
            {
              "columnGap": "default",
              "display": "default",
              "selectors": {
                ".ms-ChoiceField-field.is-checked::after": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field.is-checked::before": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceField-wrapper label": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontFamily": undefined,
                  "fontSize": 14,
                  "padding": "2px 5px",
                  "whiteSpace": "nowrap",
                },
                ".ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceFieldLabel:hover": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
          ],
          "label": {
            "color": "var(--colorNeutralForeground1)",
          },
          "root": {
            "selectors": {
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        }
      }
    />
  </Stack>
  <Stack
    tokens={
      {
        "childrenGap": 5,
      }
    }
  >
    <StyledTooltipHostBase
      content="This partition key is used to distribute data across multiple partitions for scalability. The value "/partitionKey" determines how documents are partitioned."
      styles={
        {
          "root": {
            "display": "block",
          },
        }
      }
    >
      <StyledTextFieldBase
        defaultValue="/partitionKey"
        disabled={true}
        label="Partition key"
        styles={
          {
            "field": {
              "backgroundColor": "var(--colorNeutralBackground2)",
              "color": "var(--colorNeutralForeground1)",
              "selectors": {
                ":disabled": {
                  "backgroundColor": "var(--colorNeutralBackground2)",
                  "color": "var(--colorNeutralForeground2)",
                },
              },
            },
            "fieldGroup": {
              "backgroundColor": "var(--colorNeutralBackground2)",
              "borderColor": "var(--colorNeutralStroke1)",
              "height": 25,
              "selectors": {
                ":disabled": {
                  "backgroundColor": "var(--colorNeutralBackground2)",
                  "borderColor": "var(--colorNeutralStroke1)",
                  "color": "var(--colorNeutralForeground2)",
                },
                "input": {
                  "backgroundColor": "var(--colorNeutralBackground2)",
                  "color": "var(--colorNeutralForeground1)",
                },
                "input#autopilotInput": {
                  "backgroundColor": "var(--colorNeutralBackground4)",
                  "color": "var(--colorNeutralForeground1)",
                },
                "input:disabled": {
                  "backgroundColor": "var(--colorNeutralBackground2)",
                  "color": "var(--colorNeutralForeground2)",
                },
              },
              "width": 300,
            },
            "subComponentStyles": {
              "label": {
                "root": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
            "suffix": {
              "backgroundColor": "var(--colorNeutralBackground2)",
              "border": "1px solid var(--colorNeutralStroke1)",
              "color": "var(--colorNeutralForeground1)",
            },
          }
        }
      />
    </StyledTooltipHostBase>
    <Text
      className="hintText-115"
    >
      Large 
      partition key
       has been enabled.
    </Text>
    <Text
      className="hintText-115"
    >
      Non-hierarchically partitioned container.
    </Text>
  </Stack>
  <Stack
    tokens={
      {
        "childrenGap": 5,
      }
    }
  >
    <StyledTextFieldBase
      defaultValue="/id"
      disabled={true}
      label="Unique keys"
      styles={
        {
          "field": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "color": "var(--colorNeutralForeground1)",
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
          },
          "fieldGroup": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "borderColor": "var(--colorNeutralStroke1)",
            "height": 25,
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "borderColor": "var(--colorNeutralStroke1)",
                "color": "var(--colorNeutralForeground2)",
              },
              "input": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input#autopilotInput": {
                "backgroundColor": "var(--colorNeutralBackground4)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input:disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
            "width": 300,
          },
          "subComponentStyles": {
            "label": {
              "root": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
          "suffix": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "border": "1px solid var(--colorNeutralStroke1)",
            "color": "var(--colorNeutralForeground1)",
          },
        }
      }
    />
  </Stack>
</Stack>
`;

exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
<Stack
  tokens={
    {
      "childrenGap": 20,
    }
  }
>
  <Stack
    tokens={
      {
        "childrenGap": 5,
      }
    }
  >
    <StyledChoiceGroup
      id="timeToLive"
      label="Time to Live"
      onChange={[Function]}
      options={
        [
          {
            "ariaLabel": "ttl-off-option",
            "key": "off",
            "text": "Off",
          },
          {
            "ariaLabel": "ttl-on-no-default-option",
            "key": "on-nodefault",
            "text": "On (no default)",
          },
          {
            "ariaLabel": "ttl-on-option",
            "key": "on",
            "text": "On",
          },
        ]
      }
      selectedKey="on"
      styles={
        {
          "flexContainer": [
            {
              "columnGap": "default",
              "display": "default",
              "selectors": {
                ".ms-ChoiceField-field.is-checked::after": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field.is-checked::before": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceField-wrapper label": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontFamily": undefined,
                  "fontSize": 14,
                  "padding": "2px 5px",
                  "whiteSpace": "nowrap",
                },
                ".ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceFieldLabel:hover": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
          ],
          "label": {
            "color": "var(--colorNeutralForeground1)",
          },
          "root": {
            "selectors": {
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        }
      }
    />
    <StyledTextFieldBase
      ariaLabel="Time to live in seconds"
      data-test="ttl-input"
      id="timeToLiveSeconds"
      max={2147483647}
      min={1}
      onChange={[Function]}
      required={true}
      styles={
        {
          "field": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "color": "var(--colorNeutralForeground1)",
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
          },
          "fieldGroup": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "borderColor": "var(--colorNeutralStroke1)",
            "height": 25,
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "borderColor": "var(--colorNeutralStroke1)",
                "color": "var(--colorNeutralForeground2)",
              },
              "input": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input#autopilotInput": {
                "backgroundColor": "var(--colorNeutralBackground4)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input:disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
            "width": 300,
          },
          "subComponentStyles": {
            "label": {
              "root": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
          "suffix": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "border": "1px solid var(--colorNeutralStroke1)",
            "color": "var(--colorNeutralForeground1)",
          },
        }
      }
      suffix="second(s)"
      type="number"
      value="1000"
    />
  </Stack>
  <StyledChoiceGroup
    id="geoSpatialConfig"
    label="Geospatial Configuration"
    onChange={[Function]}
    options={
      [
        {
          "ariaLabel": "geography-option",
          "key": "Geography",
          "text": "Geography",
        },
        {
          "ariaLabel": "geometry-option",
          "key": "Geometry",
          "text": "Geometry",
        },
      ]
    }
    selectedKey="Geography"
    styles={
      {
        "flexContainer": [
          {
            "columnGap": "default",
            "display": "default",
            "selectors": {
              ".ms-ChoiceField-field.is-checked::after": {
                "borderColor": "",
              },
              ".ms-ChoiceField-field.is-checked::before": {
                "borderColor": "",
              },
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-wrapper label": {
                "color": "var(--colorNeutralForeground1)",
                "fontFamily": undefined,
                "fontSize": 14,
                "padding": "2px 5px",
                "whiteSpace": "nowrap",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel:hover": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        ],
        "label": {
          "color": "var(--colorNeutralForeground1)",
        },
        "root": {
          "selectors": {
            ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-ChoiceField-innerField": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-ChoiceFieldLabel": {
              "color": "var(--colorNeutralForeground1)",
            },
          },
        },
      }
    }
  />
  <Stack
    tokens={
      {
        "childrenGap": 5,
      }
    }
  >
    <StyledChoiceGroup
      id="analyticalStorageTimeToLive"
      label="Analytical Storage Time to Live"
      onChange={[Function]}
      options={
        [
          {
            "disabled": true,
            "key": "off",
            "text": "Off",
          },
          {
            "key": "on-nodefault",
            "text": "On (no default)",
          },
          {
            "key": "on",
            "text": "On",
          },
        ]
      }
      selectedKey="on-nodefault"
      styles={
        {
          "flexContainer": [
            {
              "columnGap": "default",
              "display": "default",
              "selectors": {
                ".ms-ChoiceField-field.is-checked::after": {
                  "borderColor": undefined,
                },
                ".ms-ChoiceField-field.is-checked::before": {
                  "borderColor": undefined,
                },
                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceField-wrapper label": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontFamily": undefined,
                  "fontSize": 14,
                  "padding": "2px 5px",
                  "whiteSpace": "nowrap",
                },
                ".ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceFieldLabel:hover": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
          ],
          "label": {
            "color": "var(--colorNeutralForeground1)",
          },
          "root": {
            "selectors": {
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        }
      }
    />
  </Stack>
  <Stack>
    <StyledLabelBase
      id="settingsV2ChangeFeedLabelId"
    >
      <ToolTipLabelComponent
        label="Change feed log retention policy"
        toolTipElement={
          <Text
            styles={
              {
                "root": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontSize": 14,
                },
              }
            }
          >
            Enable change feed log retention policy to retain last 10 minutes of history for items in the container by default. To support this, the request unit (RU) charge for this container will be multiplied by a factor of two for writes. Reads are unaffected.
          </Text>
        }
      />
    </StyledLabelBase>
    <StyledChoiceGroup
      aria-labelledby="settingsV2ChangeFeedLabelId"
      id="changeFeedPolicy"
      onChange={[Function]}
      options={
        [
          {
            "key": "Off",
            "text": "Off",
          },
          {
            "key": "On",
            "text": "On",
          },
        ]
      }
      selectedKey="On"
      styles={
        {
          "flexContainer": [
            {
              "columnGap": "default",
              "display": "default",
              "selectors": {
                ".ms-ChoiceField-field.is-checked::after": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field.is-checked::before": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceField-wrapper label": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontFamily": undefined,
                  "fontSize": 14,
                  "padding": "2px 5px",
                  "whiteSpace": "nowrap",
                },
                ".ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceFieldLabel:hover": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
          ],
          "label": {
            "color": "var(--colorNeutralForeground1)",
          },
          "root": {
            "selectors": {
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        }
      }
    />
  </Stack>
  <Stack
    tokens={
      {
        "childrenGap": 5,
      }
    }
  >
    <StyledTooltipHostBase
      content="This partition key is used to distribute data across multiple partitions for scalability. The value "/partitionKey" determines how documents are partitioned."
      styles={
        {
          "root": {
            "display": "block",
          },
        }
      }
    >
      <StyledTextFieldBase
        defaultValue="/partitionKey"
        disabled={true}
        label="Partition key"
        styles={
          {
            "field": {
              "backgroundColor": "var(--colorNeutralBackground2)",
              "color": "var(--colorNeutralForeground1)",
              "selectors": {
                ":disabled": {
                  "backgroundColor": "var(--colorNeutralBackground2)",
                  "color": "var(--colorNeutralForeground2)",
                },
              },
            },
            "fieldGroup": {
              "backgroundColor": "var(--colorNeutralBackground2)",
              "borderColor": "var(--colorNeutralStroke1)",
              "height": 25,
              "selectors": {
                ":disabled": {
                  "backgroundColor": "var(--colorNeutralBackground2)",
                  "borderColor": "var(--colorNeutralStroke1)",
                  "color": "var(--colorNeutralForeground2)",
                },
                "input": {
                  "backgroundColor": "var(--colorNeutralBackground2)",
                  "color": "var(--colorNeutralForeground1)",
                },
                "input#autopilotInput": {
                  "backgroundColor": "var(--colorNeutralBackground4)",
                  "color": "var(--colorNeutralForeground1)",
                },
                "input:disabled": {
                  "backgroundColor": "var(--colorNeutralBackground2)",
                  "color": "var(--colorNeutralForeground2)",
                },
              },
              "width": 300,
            },
            "subComponentStyles": {
              "label": {
                "root": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
            "suffix": {
              "backgroundColor": "var(--colorNeutralBackground2)",
              "border": "1px solid var(--colorNeutralStroke1)",
              "color": "var(--colorNeutralForeground1)",
            },
          }
        }
      />
    </StyledTooltipHostBase>
    <Text
      className="hintText-115"
    >
      Large 
      partition key
       has been enabled.
    </Text>
    <Text
      className="hintText-115"
    >
      Non-hierarchically partitioned container.
    </Text>
  </Stack>
  <Stack
    tokens={
      {
        "childrenGap": 5,
      }
    }
  >
    <StyledTextFieldBase
      defaultValue="/id"
      disabled={true}
      label="Unique keys"
      styles={
        {
          "field": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "color": "var(--colorNeutralForeground1)",
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
          },
          "fieldGroup": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "borderColor": "var(--colorNeutralStroke1)",
            "height": 25,
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "borderColor": "var(--colorNeutralStroke1)",
                "color": "var(--colorNeutralForeground2)",
              },
              "input": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input#autopilotInput": {
                "backgroundColor": "var(--colorNeutralBackground4)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input:disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
            "width": 300,
          },
          "subComponentStyles": {
            "label": {
              "root": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
          "suffix": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "border": "1px solid var(--colorNeutralStroke1)",
            "color": "var(--colorNeutralForeground1)",
          },
        }
      }
    />
  </Stack>
</Stack>
`;

exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
<Stack
  tokens={
    {
      "childrenGap": 20,
    }
  }
>
  <Stack
    tokens={
      {
        "childrenGap": 5,
      }
    }
  >
    <StyledChoiceGroup
      id="timeToLive"
      label="Time to Live"
      onChange={[Function]}
      options={
        [
          {
            "ariaLabel": "ttl-off-option",
            "key": "off",
            "text": "Off",
          },
          {
            "ariaLabel": "ttl-on-no-default-option",
            "key": "on-nodefault",
            "text": "On (no default)",
          },
          {
            "ariaLabel": "ttl-on-option",
            "key": "on",
            "text": "On",
          },
        ]
      }
      selectedKey="on"
      styles={
        {
          "flexContainer": [
            {
              "columnGap": "default",
              "display": "default",
              "selectors": {
                ".ms-ChoiceField-field.is-checked::after": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field.is-checked::before": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceField-wrapper label": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontFamily": undefined,
                  "fontSize": 14,
                  "padding": "2px 5px",
                  "whiteSpace": "nowrap",
                },
                ".ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceFieldLabel:hover": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
          ],
          "label": {
            "color": "var(--colorNeutralForeground1)",
          },
          "root": {
            "selectors": {
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        }
      }
    />
    <StyledTextFieldBase
      ariaLabel="Time to live in seconds"
      data-test="ttl-input"
      id="timeToLiveSeconds"
      max={2147483647}
      min={1}
      onChange={[Function]}
      required={true}
      styles={
        {
          "field": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "color": "var(--colorNeutralForeground1)",
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
          },
          "fieldGroup": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "borderColor": "var(--colorNeutralStroke1)",
            "height": 25,
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "borderColor": "var(--colorNeutralStroke1)",
                "color": "var(--colorNeutralForeground2)",
              },
              "input": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input#autopilotInput": {
                "backgroundColor": "var(--colorNeutralBackground4)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input:disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
            "width": 300,
          },
          "subComponentStyles": {
            "label": {
              "root": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
          "suffix": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "border": "1px solid var(--colorNeutralStroke1)",
            "color": "var(--colorNeutralForeground1)",
          },
        }
      }
      suffix="second(s)"
      type="number"
      value="1000"
    />
  </Stack>
  <StyledChoiceGroup
    id="geoSpatialConfig"
    label="Geospatial Configuration"
    onChange={[Function]}
    options={
      [
        {
          "ariaLabel": "geography-option",
          "key": "Geography",
          "text": "Geography",
        },
        {
          "ariaLabel": "geometry-option",
          "key": "Geometry",
          "text": "Geometry",
        },
      ]
    }
    selectedKey="Geography"
    styles={
      {
        "flexContainer": [
          {
            "columnGap": "default",
            "display": "default",
            "selectors": {
              ".ms-ChoiceField-field.is-checked::after": {
                "borderColor": "",
              },
              ".ms-ChoiceField-field.is-checked::before": {
                "borderColor": "",
              },
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-wrapper label": {
                "color": "var(--colorNeutralForeground1)",
                "fontFamily": undefined,
                "fontSize": 14,
                "padding": "2px 5px",
                "whiteSpace": "nowrap",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel:hover": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        ],
        "label": {
          "color": "var(--colorNeutralForeground1)",
        },
        "root": {
          "selectors": {
            ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-ChoiceField-innerField": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-ChoiceFieldLabel": {
              "color": "var(--colorNeutralForeground1)",
            },
          },
        },
      }
    }
  />
  <Stack
    tokens={
      {
        "childrenGap": 5,
      }
    }
  >
    <StyledChoiceGroup
      id="analyticalStorageTimeToLive"
      label="Analytical Storage Time to Live"
      onChange={[Function]}
      options={
        [
          {
            "disabled": true,
            "key": "off",
            "text": "Off",
          },
          {
            "key": "on-nodefault",
            "text": "On (no default)",
          },
          {
            "key": "on",
            "text": "On",
          },
        ]
      }
      selectedKey="on"
      styles={
        {
          "flexContainer": [
            {
              "columnGap": "default",
              "display": "default",
              "selectors": {
                ".ms-ChoiceField-field.is-checked::after": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field.is-checked::before": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceField-wrapper label": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontFamily": undefined,
                  "fontSize": 14,
                  "padding": "2px 5px",
                  "whiteSpace": "nowrap",
                },
                ".ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceFieldLabel:hover": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
          ],
          "label": {
            "color": "var(--colorNeutralForeground1)",
          },
          "root": {
            "selectors": {
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        }
      }
    />
    <StyledTextFieldBase
      id="analyticalStorageTimeToLiveSeconds"
      max={2147483647}
      min={1}
      onChange={[Function]}
      required={true}
      styles={
        {
          "field": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "color": "var(--colorNeutralForeground1)",
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
          },
          "fieldGroup": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "borderColor": "var(--colorNeutralStroke1)",
            "height": 25,
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "borderColor": "var(--colorNeutralStroke1)",
                "color": "var(--colorNeutralForeground2)",
              },
              "input": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input#autopilotInput": {
                "backgroundColor": "var(--colorNeutralBackground4)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input:disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
            "width": 300,
          },
          "subComponentStyles": {
            "label": {
              "root": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
          "suffix": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "border": "1px solid var(--colorNeutralStroke1)",
            "color": "var(--colorNeutralForeground1)",
          },
        }
      }
      suffix="second(s)"
      type="number"
      value="2000"
    />
  </Stack>
  <Stack
    tokens={
      {
        "childrenGap": 5,
      }
    }
  >
    <StyledTooltipHostBase
      content="This partition key is used to distribute data across multiple partitions for scalability. The value "/partitionKey" determines how documents are partitioned."
      styles={
        {
          "root": {
            "display": "block",
          },
        }
      }
    >
      <StyledTextFieldBase
        defaultValue="/partitionKey"
        disabled={true}
        label="Partition key"
        styles={
          {
            "field": {
              "backgroundColor": "var(--colorNeutralBackground2)",
              "color": "var(--colorNeutralForeground1)",
              "selectors": {
                ":disabled": {
                  "backgroundColor": "var(--colorNeutralBackground2)",
                  "color": "var(--colorNeutralForeground2)",
                },
              },
            },
            "fieldGroup": {
              "backgroundColor": "var(--colorNeutralBackground2)",
              "borderColor": "var(--colorNeutralStroke1)",
              "height": 25,
              "selectors": {
                ":disabled": {
                  "backgroundColor": "var(--colorNeutralBackground2)",
                  "borderColor": "var(--colorNeutralStroke1)",
                  "color": "var(--colorNeutralForeground2)",
                },
                "input": {
                  "backgroundColor": "var(--colorNeutralBackground2)",
                  "color": "var(--colorNeutralForeground1)",
                },
                "input#autopilotInput": {
                  "backgroundColor": "var(--colorNeutralBackground4)",
                  "color": "var(--colorNeutralForeground1)",
                },
                "input:disabled": {
                  "backgroundColor": "var(--colorNeutralBackground2)",
                  "color": "var(--colorNeutralForeground2)",
                },
              },
              "width": 300,
            },
            "subComponentStyles": {
              "label": {
                "root": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
            "suffix": {
              "backgroundColor": "var(--colorNeutralBackground2)",
              "border": "1px solid var(--colorNeutralStroke1)",
              "color": "var(--colorNeutralForeground1)",
            },
          }
        }
      />
    </StyledTooltipHostBase>
    <Text
      className="hintText-115"
    >
      Large 
      partition key
       has been enabled.
    </Text>
    <Text
      className="hintText-115"
    >
      Non-hierarchically partitioned container.
    </Text>
  </Stack>
  <Stack
    tokens={
      {
        "childrenGap": 5,
      }
    }
  >
    <StyledTextFieldBase
      defaultValue="/id"
      disabled={true}
      label="Unique keys"
      styles={
        {
          "field": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "color": "var(--colorNeutralForeground1)",
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
          },
          "fieldGroup": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "borderColor": "var(--colorNeutralStroke1)",
            "height": 25,
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "borderColor": "var(--colorNeutralStroke1)",
                "color": "var(--colorNeutralForeground2)",
              },
              "input": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input#autopilotInput": {
                "backgroundColor": "var(--colorNeutralBackground4)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input:disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
            "width": 300,
          },
          "subComponentStyles": {
            "label": {
              "root": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
          "suffix": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "border": "1px solid var(--colorNeutralStroke1)",
            "color": "var(--colorNeutralForeground1)",
          },
        }
      }
    />
  </Stack>
</Stack>
`;

exports[`SubSettingsComponent renders 1`] = `
<Stack
  tokens={
    {
      "childrenGap": 20,
    }
  }
>
  <Stack
    tokens={
      {
        "childrenGap": 5,
      }
    }
  >
    <StyledChoiceGroup
      id="timeToLive"
      label="Time to Live"
      onChange={[Function]}
      options={
        [
          {
            "ariaLabel": "ttl-off-option",
            "key": "off",
            "text": "Off",
          },
          {
            "ariaLabel": "ttl-on-no-default-option",
            "key": "on-nodefault",
            "text": "On (no default)",
          },
          {
            "ariaLabel": "ttl-on-option",
            "key": "on",
            "text": "On",
          },
        ]
      }
      selectedKey="on"
      styles={
        {
          "flexContainer": [
            {
              "columnGap": "default",
              "display": "default",
              "selectors": {
                ".ms-ChoiceField-field.is-checked::after": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field.is-checked::before": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceField-wrapper label": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontFamily": undefined,
                  "fontSize": 14,
                  "padding": "2px 5px",
                  "whiteSpace": "nowrap",
                },
                ".ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceFieldLabel:hover": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
          ],
          "label": {
            "color": "var(--colorNeutralForeground1)",
          },
          "root": {
            "selectors": {
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        }
      }
    />
    <StyledTextFieldBase
      ariaLabel="Time to live in seconds"
      data-test="ttl-input"
      id="timeToLiveSeconds"
      max={2147483647}
      min={1}
      onChange={[Function]}
      required={true}
      styles={
        {
          "field": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "color": "var(--colorNeutralForeground1)",
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
          },
          "fieldGroup": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "borderColor": "var(--colorNeutralStroke1)",
            "height": 25,
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "borderColor": "var(--colorNeutralStroke1)",
                "color": "var(--colorNeutralForeground2)",
              },
              "input": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input#autopilotInput": {
                "backgroundColor": "var(--colorNeutralBackground4)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input:disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
            "width": 300,
          },
          "subComponentStyles": {
            "label": {
              "root": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
          "suffix": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "border": "1px solid var(--colorNeutralStroke1)",
            "color": "var(--colorNeutralForeground1)",
          },
        }
      }
      suffix="second(s)"
      type="number"
      value="1000"
    />
  </Stack>
  <StyledChoiceGroup
    id="geoSpatialConfig"
    label="Geospatial Configuration"
    onChange={[Function]}
    options={
      [
        {
          "ariaLabel": "geography-option",
          "key": "Geography",
          "text": "Geography",
        },
        {
          "ariaLabel": "geometry-option",
          "key": "Geometry",
          "text": "Geometry",
        },
      ]
    }
    selectedKey="Geography"
    styles={
      {
        "flexContainer": [
          {
            "columnGap": "default",
            "display": "default",
            "selectors": {
              ".ms-ChoiceField-field.is-checked::after": {
                "borderColor": "",
              },
              ".ms-ChoiceField-field.is-checked::before": {
                "borderColor": "",
              },
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-wrapper label": {
                "color": "var(--colorNeutralForeground1)",
                "fontFamily": undefined,
                "fontSize": 14,
                "padding": "2px 5px",
                "whiteSpace": "nowrap",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel:hover": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        ],
        "label": {
          "color": "var(--colorNeutralForeground1)",
        },
        "root": {
          "selectors": {
            ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-ChoiceField-innerField": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-ChoiceFieldLabel": {
              "color": "var(--colorNeutralForeground1)",
            },
          },
        },
      }
    }
  />
  <Stack
    tokens={
      {
        "childrenGap": 5,
      }
    }
  >
    <StyledChoiceGroup
      id="analyticalStorageTimeToLive"
      label="Analytical Storage Time to Live"
      onChange={[Function]}
      options={
        [
          {
            "disabled": true,
            "key": "off",
            "text": "Off",
          },
          {
            "key": "on-nodefault",
            "text": "On (no default)",
          },
          {
            "key": "on",
            "text": "On",
          },
        ]
      }
      selectedKey="on"
      styles={
        {
          "flexContainer": [
            {
              "columnGap": "default",
              "display": "default",
              "selectors": {
                ".ms-ChoiceField-field.is-checked::after": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field.is-checked::before": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceField-wrapper label": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontFamily": undefined,
                  "fontSize": 14,
                  "padding": "2px 5px",
                  "whiteSpace": "nowrap",
                },
                ".ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceFieldLabel:hover": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
          ],
          "label": {
            "color": "var(--colorNeutralForeground1)",
          },
          "root": {
            "selectors": {
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        }
      }
    />
    <StyledTextFieldBase
      id="analyticalStorageTimeToLiveSeconds"
      max={2147483647}
      min={1}
      onChange={[Function]}
      required={true}
      styles={
        {
          "field": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "color": "var(--colorNeutralForeground1)",
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
          },
          "fieldGroup": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "borderColor": "var(--colorNeutralStroke1)",
            "height": 25,
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "borderColor": "var(--colorNeutralStroke1)",
                "color": "var(--colorNeutralForeground2)",
              },
              "input": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input#autopilotInput": {
                "backgroundColor": "var(--colorNeutralBackground4)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input:disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
            "width": 300,
          },
          "subComponentStyles": {
            "label": {
              "root": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
          "suffix": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "border": "1px solid var(--colorNeutralStroke1)",
            "color": "var(--colorNeutralForeground1)",
          },
        }
      }
      suffix="second(s)"
      type="number"
      value="2000"
    />
  </Stack>
  <Stack>
    <StyledLabelBase
      id="settingsV2ChangeFeedLabelId"
    >
      <ToolTipLabelComponent
        label="Change feed log retention policy"
        toolTipElement={
          <Text
            styles={
              {
                "root": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontSize": 14,
                },
              }
            }
          >
            Enable change feed log retention policy to retain last 10 minutes of history for items in the container by default. To support this, the request unit (RU) charge for this container will be multiplied by a factor of two for writes. Reads are unaffected.
          </Text>
        }
      />
    </StyledLabelBase>
    <StyledChoiceGroup
      aria-labelledby="settingsV2ChangeFeedLabelId"
      id="changeFeedPolicy"
      onChange={[Function]}
      options={
        [
          {
            "key": "Off",
            "text": "Off",
          },
          {
            "key": "On",
            "text": "On",
          },
        ]
      }
      selectedKey="On"
      styles={
        {
          "flexContainer": [
            {
              "columnGap": "default",
              "display": "default",
              "selectors": {
                ".ms-ChoiceField-field.is-checked::after": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field.is-checked::before": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceField-wrapper label": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontFamily": undefined,
                  "fontSize": 14,
                  "padding": "2px 5px",
                  "whiteSpace": "nowrap",
                },
                ".ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceFieldLabel:hover": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
          ],
          "label": {
            "color": "var(--colorNeutralForeground1)",
          },
          "root": {
            "selectors": {
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        }
      }
    />
  </Stack>
  <Stack
    tokens={
      {
        "childrenGap": 5,
      }
    }
  >
    <StyledTooltipHostBase
      content="This partition key is used to distribute data across multiple partitions for scalability. The value "/partitionKey" determines how documents are partitioned."
      styles={
        {
          "root": {
            "display": "block",
          },
        }
      }
    >
      <StyledTextFieldBase
        defaultValue="/partitionKey"
        disabled={true}
        label="Partition key"
        styles={
          {
            "field": {
              "backgroundColor": "var(--colorNeutralBackground2)",
              "color": "var(--colorNeutralForeground1)",
              "selectors": {
                ":disabled": {
                  "backgroundColor": "var(--colorNeutralBackground2)",
                  "color": "var(--colorNeutralForeground2)",
                },
              },
            },
            "fieldGroup": {
              "backgroundColor": "var(--colorNeutralBackground2)",
              "borderColor": "var(--colorNeutralStroke1)",
              "height": 25,
              "selectors": {
                ":disabled": {
                  "backgroundColor": "var(--colorNeutralBackground2)",
                  "borderColor": "var(--colorNeutralStroke1)",
                  "color": "var(--colorNeutralForeground2)",
                },
                "input": {
                  "backgroundColor": "var(--colorNeutralBackground2)",
                  "color": "var(--colorNeutralForeground1)",
                },
                "input#autopilotInput": {
                  "backgroundColor": "var(--colorNeutralBackground4)",
                  "color": "var(--colorNeutralForeground1)",
                },
                "input:disabled": {
                  "backgroundColor": "var(--colorNeutralBackground2)",
                  "color": "var(--colorNeutralForeground2)",
                },
              },
              "width": 300,
            },
            "subComponentStyles": {
              "label": {
                "root": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
            "suffix": {
              "backgroundColor": "var(--colorNeutralBackground2)",
              "border": "1px solid var(--colorNeutralStroke1)",
              "color": "var(--colorNeutralForeground1)",
            },
          }
        }
      />
    </StyledTooltipHostBase>
    <Text
      className="hintText-115"
    >
      Large 
      partition key
       has been enabled.
    </Text>
    <Text
      className="hintText-115"
    >
      Non-hierarchically partitioned container.
    </Text>
  </Stack>
  <Stack
    tokens={
      {
        "childrenGap": 5,
      }
    }
  >
    <StyledTextFieldBase
      defaultValue="/id"
      disabled={true}
      label="Unique keys"
      styles={
        {
          "field": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "color": "var(--colorNeutralForeground1)",
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
          },
          "fieldGroup": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "borderColor": "var(--colorNeutralStroke1)",
            "height": 25,
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "borderColor": "var(--colorNeutralStroke1)",
                "color": "var(--colorNeutralForeground2)",
              },
              "input": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input#autopilotInput": {
                "backgroundColor": "var(--colorNeutralBackground4)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input:disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
            "width": 300,
          },
          "subComponentStyles": {
            "label": {
              "root": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
          "suffix": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "border": "1px solid var(--colorNeutralStroke1)",
            "color": "var(--colorNeutralForeground1)",
          },
        }
      }
    />
  </Stack>
</Stack>
`;

exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
<Stack
  tokens={
    {
      "childrenGap": 20,
    }
  }
>
  <Stack
    tokens={
      {
        "childrenGap": 5,
      }
    }
  >
    <StyledChoiceGroup
      id="timeToLive"
      label="Time to Live"
      onChange={[Function]}
      options={
        [
          {
            "ariaLabel": "ttl-off-option",
            "key": "off",
            "text": "Off",
          },
          {
            "ariaLabel": "ttl-on-no-default-option",
            "key": "on-nodefault",
            "text": "On (no default)",
          },
          {
            "ariaLabel": "ttl-on-option",
            "key": "on",
            "text": "On",
          },
        ]
      }
      selectedKey="off"
      styles={
        {
          "flexContainer": [
            {
              "columnGap": "default",
              "display": "default",
              "selectors": {
                ".ms-ChoiceField-field.is-checked::after": {
                  "borderColor": undefined,
                },
                ".ms-ChoiceField-field.is-checked::before": {
                  "borderColor": undefined,
                },
                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceField-wrapper label": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontFamily": undefined,
                  "fontSize": 14,
                  "padding": "2px 5px",
                  "whiteSpace": "nowrap",
                },
                ".ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceFieldLabel:hover": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
          ],
          "label": {
            "color": "var(--colorNeutralForeground1)",
          },
          "root": {
            "selectors": {
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        }
      }
    />
  </Stack>
  <StyledChoiceGroup
    id="geoSpatialConfig"
    label="Geospatial Configuration"
    onChange={[Function]}
    options={
      [
        {
          "ariaLabel": "geography-option",
          "key": "Geography",
          "text": "Geography",
        },
        {
          "ariaLabel": "geometry-option",
          "key": "Geometry",
          "text": "Geometry",
        },
      ]
    }
    selectedKey="Geography"
    styles={
      {
        "flexContainer": [
          {
            "columnGap": "default",
            "display": "default",
            "selectors": {
              ".ms-ChoiceField-field.is-checked::after": {
                "borderColor": "",
              },
              ".ms-ChoiceField-field.is-checked::before": {
                "borderColor": "",
              },
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-wrapper label": {
                "color": "var(--colorNeutralForeground1)",
                "fontFamily": undefined,
                "fontSize": 14,
                "padding": "2px 5px",
                "whiteSpace": "nowrap",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel:hover": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        ],
        "label": {
          "color": "var(--colorNeutralForeground1)",
        },
        "root": {
          "selectors": {
            ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-ChoiceField-innerField": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-ChoiceFieldLabel": {
              "color": "var(--colorNeutralForeground1)",
            },
          },
        },
      }
    }
  />
  <Stack
    tokens={
      {
        "childrenGap": 5,
      }
    }
  >
    <StyledChoiceGroup
      id="analyticalStorageTimeToLive"
      label="Analytical Storage Time to Live"
      onChange={[Function]}
      options={
        [
          {
            "disabled": true,
            "key": "off",
            "text": "Off",
          },
          {
            "key": "on-nodefault",
            "text": "On (no default)",
          },
          {
            "key": "on",
            "text": "On",
          },
        ]
      }
      selectedKey="on"
      styles={
        {
          "flexContainer": [
            {
              "columnGap": "default",
              "display": "default",
              "selectors": {
                ".ms-ChoiceField-field.is-checked::after": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field.is-checked::before": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceField-wrapper label": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontFamily": undefined,
                  "fontSize": 14,
                  "padding": "2px 5px",
                  "whiteSpace": "nowrap",
                },
                ".ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceFieldLabel:hover": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
          ],
          "label": {
            "color": "var(--colorNeutralForeground1)",
          },
          "root": {
            "selectors": {
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        }
      }
    />
    <StyledTextFieldBase
      id="analyticalStorageTimeToLiveSeconds"
      max={2147483647}
      min={1}
      onChange={[Function]}
      required={true}
      styles={
        {
          "field": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "color": "var(--colorNeutralForeground1)",
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
          },
          "fieldGroup": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "borderColor": "var(--colorNeutralStroke1)",
            "height": 25,
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "borderColor": "var(--colorNeutralStroke1)",
                "color": "var(--colorNeutralForeground2)",
              },
              "input": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input#autopilotInput": {
                "backgroundColor": "var(--colorNeutralBackground4)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input:disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
            "width": 300,
          },
          "subComponentStyles": {
            "label": {
              "root": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
          "suffix": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "border": "1px solid var(--colorNeutralStroke1)",
            "color": "var(--colorNeutralForeground1)",
          },
        }
      }
      suffix="second(s)"
      type="number"
      value="2000"
    />
  </Stack>
  <Stack>
    <StyledLabelBase
      id="settingsV2ChangeFeedLabelId"
    >
      <ToolTipLabelComponent
        label="Change feed log retention policy"
        toolTipElement={
          <Text
            styles={
              {
                "root": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontSize": 14,
                },
              }
            }
          >
            Enable change feed log retention policy to retain last 10 minutes of history for items in the container by default. To support this, the request unit (RU) charge for this container will be multiplied by a factor of two for writes. Reads are unaffected.
          </Text>
        }
      />
    </StyledLabelBase>
    <StyledChoiceGroup
      aria-labelledby="settingsV2ChangeFeedLabelId"
      id="changeFeedPolicy"
      onChange={[Function]}
      options={
        [
          {
            "key": "Off",
            "text": "Off",
          },
          {
            "key": "On",
            "text": "On",
          },
        ]
      }
      selectedKey="On"
      styles={
        {
          "flexContainer": [
            {
              "columnGap": "default",
              "display": "default",
              "selectors": {
                ".ms-ChoiceField-field.is-checked::after": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field.is-checked::before": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceField-wrapper label": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontFamily": undefined,
                  "fontSize": 14,
                  "padding": "2px 5px",
                  "whiteSpace": "nowrap",
                },
                ".ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceFieldLabel:hover": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
          ],
          "label": {
            "color": "var(--colorNeutralForeground1)",
          },
          "root": {
            "selectors": {
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        }
      }
    />
  </Stack>
  <Stack
    tokens={
      {
        "childrenGap": 5,
      }
    }
  >
    <StyledTooltipHostBase
      content="This partition key is used to distribute data across multiple partitions for scalability. The value "/partitionKey" determines how documents are partitioned."
      styles={
        {
          "root": {
            "display": "block",
          },
        }
      }
    >
      <StyledTextFieldBase
        defaultValue="/partitionKey"
        disabled={true}
        label="Partition key"
        styles={
          {
            "field": {
              "backgroundColor": "var(--colorNeutralBackground2)",
              "color": "var(--colorNeutralForeground1)",
              "selectors": {
                ":disabled": {
                  "backgroundColor": "var(--colorNeutralBackground2)",
                  "color": "var(--colorNeutralForeground2)",
                },
              },
            },
            "fieldGroup": {
              "backgroundColor": "var(--colorNeutralBackground2)",
              "borderColor": "var(--colorNeutralStroke1)",
              "height": 25,
              "selectors": {
                ":disabled": {
                  "backgroundColor": "var(--colorNeutralBackground2)",
                  "borderColor": "var(--colorNeutralStroke1)",
                  "color": "var(--colorNeutralForeground2)",
                },
                "input": {
                  "backgroundColor": "var(--colorNeutralBackground2)",
                  "color": "var(--colorNeutralForeground1)",
                },
                "input#autopilotInput": {
                  "backgroundColor": "var(--colorNeutralBackground4)",
                  "color": "var(--colorNeutralForeground1)",
                },
                "input:disabled": {
                  "backgroundColor": "var(--colorNeutralBackground2)",
                  "color": "var(--colorNeutralForeground2)",
                },
              },
              "width": 300,
            },
            "subComponentStyles": {
              "label": {
                "root": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
            "suffix": {
              "backgroundColor": "var(--colorNeutralBackground2)",
              "border": "1px solid var(--colorNeutralStroke1)",
              "color": "var(--colorNeutralForeground1)",
            },
          }
        }
      />
    </StyledTooltipHostBase>
    <Text
      className="hintText-115"
    >
      Large 
      partition key
       has been enabled.
    </Text>
    <Text
      className="hintText-115"
    >
      Non-hierarchically partitioned container.
    </Text>
  </Stack>
  <Stack
    tokens={
      {
        "childrenGap": 5,
      }
    }
  >
    <StyledTextFieldBase
      defaultValue="/id"
      disabled={true}
      label="Unique keys"
      styles={
        {
          "field": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "color": "var(--colorNeutralForeground1)",
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
          },
          "fieldGroup": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "borderColor": "var(--colorNeutralStroke1)",
            "height": 25,
            "selectors": {
              ":disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "borderColor": "var(--colorNeutralStroke1)",
                "color": "var(--colorNeutralForeground2)",
              },
              "input": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input#autopilotInput": {
                "backgroundColor": "var(--colorNeutralBackground4)",
                "color": "var(--colorNeutralForeground1)",
              },
              "input:disabled": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground2)",
              },
            },
            "width": 300,
          },
          "subComponentStyles": {
            "label": {
              "root": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
          "suffix": {
            "backgroundColor": "var(--colorNeutralBackground2)",
            "border": "1px solid var(--colorNeutralStroke1)",
            "color": "var(--colorNeutralForeground1)",
          },
        }
      }
    />
  </Stack>
</Stack>
`;
