How to use the wix-ui-core/withStylable.withStylable function in wix-ui-core

'T4' | 'T4.1' | 'T4.2' | 'T4.3' | 'T4.4' | 'T4.5' | 'T4.6' | 'T4.7' |
    'T5' | 'T5.1';

export type TagName = 'div' | 'span';

export interface UITextProps {
  /** typography of the text */
  appearance?: Appearance;

  /** the tag name to be used */
  tagName?: TagName;
}

const defaultProps: UITextProps = {appearance: 'T1.1', tagName: 'span'};

export const UIText = withStylable(
  CoreText,
  style,
  ({appearance}) => ({appearance}),
  defaultProps
);

UIText.propTypes = {
  ...CoreText.propTypes,

   /** typography of the uitext */
   appearance: oneOf([
    'T1', 'T1.1', 'T1.2', 'T1.3', 'T1.4', 'T1.5', 'T1.6', 'T1.7',
    'T2', 'T2.1', 'T2.2', 'T2.3', 'T2.4',
    'T3', 'T3.1', 'T3.2', 'T3.3', 'T3.4', 'T3.5', 'T3.6', 'T3.7',
    'T4', 'T4.1', 'T4.2', 'T4.3', 'T4.4', 'T4.5', 'T4.6', 'T4.7',
    'T5', 'T5.1'

import * as React from 'react';
import {ToggleSwitch} from '../../src/components/ToggleSwitch';

import {ToggleSwitchProps} from 'wix-ui-core/toggle-switch';
import toggleSwitchStylesExt from './ToggleSwitchExt.st.css';
import {withStylable} from 'wix-ui-core/withStylable';
import * as styles from './ToggleSwtichStory.scss';

const ToggleSwitchExt = withStylable(ToggleSwitch, toggleSwitchStylesExt, () => null);

export class ToggleSwitchExtensionExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      checked: false,
      disabled: false
    };
  }

  render() {
    return <div>
       this.setState({checked: !this.state.checked})}
                           disabled={this.state.disabled}
                           checked={this.state.checked}/&gt;</div>

import { withStylable } from 'wix-ui-core/withStylable';
import ChevronDown from 'wix-ui-icons-common/ChevronDown';
import style from './Autocomplete.st.css';
import { ErrorMessageWrapper, ErrorProps } from '../ErrorMessageWrapper';
import { TPAComponentProps } from '../../types';

export interface TPAAutocompleteProps extends TPAComponentProps {
  /** the error message to display */
  errorMessage?: string;
  /** apply error state*/
  error?: boolean;
}

export type AutocompleteProps = TPAAutocompleteProps & CoreAutocompleteProps;

const AutocompleteWithErrorStates = withStylable<
  CoreAutocompleteProps,
  ErrorProps
>(CoreAutocomplete, style, ({ error }) => ({ error }));

export type AutocompleteType = React.FunctionComponent & {
  createOption: typeof CoreAutocomplete.createOption;
  createDivider: typeof CoreAutocomplete.createDivider;
};

export const Autocomplete: AutocompleteType = ((props: AutocompleteProps) => {
  const { errorMessage, error, suffix, ...coreAutocompleteProps } = props;
  const { disabled } = props;

  return (

import {Divider as CoreDivider, DividerProps as CoreDividerProps} from 'wix-ui-core/Divider';
import style from './Divider.st.css';
import {withStylable} from 'wix-ui-core/withStylable';

export const Divider = withStylable(
  CoreDivider,
  style,
  () => ({})
);

import {withStylable} from 'wix-ui-core/withStylable';

export interface ToggleSwitchProps {
  skin?: 'standard' | 'error' | 'success';
  size?: 'small' | 'medium' | 'large';
}

const defaultProps = {
  skin: 'standard',
  size: 'large',
  uncheckedIcon: ,
  checkedIcon: 
};

export const ToggleSwitch = withStylable(
  CoreToggleSwitch,
  style,
  ({size, skin}) => ({size, skin}),
  defaultProps
);