Tabs_AB_augmented.jsx

// Before updated output from Tabs hits the DOM
// it will be updated with following:
// 1. added `color:red` style to the active tab
// 2. Replaced text from `Inactive` to `Disabled` on inactive tab
// 3. Added className `Collapsed` to the TabPanel element

      <div className="Tabs">
        <div className="Tab" style={...styles.activeTab, color: 'red'}>
          Active
        </div>
        <div className="Tab" style={styles.tab}>
          Disabled
        </div>
        <div className="TabPanel Collapsed" style={styles.panel}>
          Panel
        </div>
      </div>
      
      
// And I need to perform this augmenation on each update to the Tabs component,
// so Tabs functionality would be preserved and I won't need to re-implement it
// within my A/B test

Tabs_output.jsx

      <div className="Tabs">
        <div className="Tab" style={styles.activeTab}>
          Active
        </div>
        <div className="Tab" style={styles.tab}>
          Inactive
        </div>
        <div className="TabPanel" style={styles.panel}>
          Panel
        </div>
      </div>