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

import ChevronDown from 'wix-ui-icons-common/ChevronDown';
import style from './LabelWithOptions.st.css';
import { Tooltip } from '../Tooltip';
import { getInputSuffix } from '../Input/InputSuffixes';
import FormFieldError from 'wix-ui-icons-common/system/FormFieldError';

export interface LabelWithOptionsProps {
  // The size of the LabelWithOptions
  size?: 'large' | 'medium' | 'small';
}

const defaultProps = {
  size: 'medium'
};

const StyledLabelWithOptions = withStylable<
  CoreLabelWithOptionsProps,
  LabelWithOptionsProps
>(CoreLabelWithOptions, style, ({ size }) => ({ size }), defaultProps);

export type LabelWithOptionsType = React.SFC<
  CoreLabelWithOptionsProps & LabelWithOptionsProps
> & {
  createOption: typeof CoreLabelWithOptions.createOption;
  createDivider: typeof CoreLabelWithOptions.createDivider;
};

const defaultSuffix = ;
const renderSuffix = ({ isError, disabled }) =>
  getInputSuffix({
    error: isError ? 'Selection is required!' : null,
    disabled,

InputProps as CoreInputProps
} from 'wix-ui-core/dist/src/components/input';
import { withStylable } from 'wix-ui-core/dist/src/utils/withStylable';
import style from './Input.st.css';
import { getInputSuffix } from './InputSuffixes';

export interface InputProps {
  // The size of the input
  size?: 'large' | 'medium' | 'small';
}

const defaultProps = {
  size: 'medium'
};

export const StyledInput = withStylable(
  CoreInput,
  style,
  ({ size }) => ({ size }),
  defaultProps
);

export const Input: React.SFC = (
  props: CoreInputProps & InputProps
) => {
  const { error, disabled, suffix } = props;

  return (

} from 'wix-ui-core/dist/src/components/autocomplete';
import { withStylable } from 'wix-ui-core/dist/src/utils/withStylable';
import ChevronDown from 'wix-ui-icons-common/ChevronDown';
import style from './Autocomplete.st.css';
import { getInputSuffix } from '../Input';

export interface AutocompleteProps {
  // The size of the autocomplete
  size?: 'large' | 'medium' | 'small';
}

const defaultProps = {
  size: 'medium'
};

const StyledAutocomplete = withStylable<
  CoreAutocompleteProps,
  AutocompleteProps
>(CoreAutocomplete, style, ({ size }) => ({ size }), defaultProps);

export type AutocompleteType = React.SFC<
  CoreAutocompleteProps & AutocompleteProps
> & {
  createOption: typeof CoreAutocomplete.createOption;
  createDivider: typeof CoreAutocomplete.createDivider;
};

const defaultSuffix = ;
export const Autocomplete: AutocompleteType = ((
  props: CoreAutocompleteProps & AutocompleteProps
) => {
  const { error, disabled, suffix } = props;

Checkbox as CoreCheckbox,
  CheckboxProps as CoreCheckboxProps
} from 'wix-ui-core/dist/src/components/checkbox';
import CheckboxChecked from 'wix-ui-icons-common/system/CheckboxChecked';
import CheckboxIndeterminate from 'wix-ui-icons-common/system/CheckboxIndeterminate';
import style from './Checkbox.st.css';
import { withStylable } from 'wix-ui-core/dist/src/utils/withStylable';

const defaultProps = {
  checkedIcon: ,
  indeterminateIcon: (
    
  )
};

export const Checkbox = withStylable(
  CoreCheckbox,
  style,
  () => null,
  defaultProps
);

Checkbox.displayName = 'Checkbox';

Thumbnail as CoreThumbnail,
  ThumbnailProps as CoreThumbnailProps
} from 'wix-ui-core/dist/src/components/thumbnail';
import { withStylable } from 'wix-ui-core/dist/src/utils/withStylable';
import { Text } from '../Text';

export interface ThumbnailProps extends CoreThumbnailProps {
  /** image of the thumbnail */
  image?: React.ReactElement;
  /** title of the thumbnail */
  title: string;
  /** description of the thumbnail */
  description?: string;
}

const StyledThumbnail = withStylable(
  CoreThumbnail,
  style,
  () => ({})
);

export const Thumbnail: React.SFC = props => {
  const { children, title, image, description, ...rest } = props;

  return (
    }>
      <div>
        {image &amp;&amp; <div data-hook="image">{image}</div>}
        
        {description &amp;&amp; (</div>

LabelProps as CoreLabelProps
} from 'wix-ui-core/dist/src/components/deprecated/label';
import style from './Label.st.css';
import { withStylable } from 'wix-ui-core/dist/src/utils/withStylable';
import { Size, SIZES } from './constants';

export interface LabelProps {
  /** size of the label */
  size?: Size;
}

const defaultProps: LabelProps = {
  size: SIZES.medium
};

export const Label = withStylable(
  CoreLabel,
  style,
  ({ size }) => ({ size }),
  defaultProps
);

Label.displayName = 'Label';

size: SIZES.large
};

const checkedIconMap = {
  [SIZES.small]: undefined,
  [SIZES.medium]: ,
  [SIZES.large]: 
};

const uncheckedIconMap = {
  [SIZES.small]: undefined,
  [SIZES.medium]: ,
  [SIZES.large]: 
};

const StyledToggleSwitch = withStylable<
  CoreToggleSwitchProps,
  ToggleSwitchProps
>(CoreToggleSwitch, style, ({ size, skin }) => ({ size, skin }), defaultProps);

export class ToggleSwitch extends React.PureComponent<
  ToggleSwitchProps & CoreToggleSwitchProps
> {
  static displayName = 'ToggleSwitch';

  static defaultProps = defaultProps;

  render() {
    const { styles, ...desiredProps } = this.props;

    return (

/** Skin of the badge */
  skin?: Skin;

  /** Content of the badge */
  children?: Content;
}

const defaultProps: CounterBadgeProps = {
  skin: SKIN.general,
  children: ''
};

type CounterBadgeExtendedProps = CounterBadgeProps & { wide: boolean };
const getState = ({ skin, wide }) => ({ skin, wide });

const StyledCounterBadge = withStylable<
  CoreBadgeProps,
  CounterBadgeExtendedProps
>(CoreBadge, style, getState, defaultProps);

export class CounterBadge extends React.PureComponent {
  static displayName = 'CounterBadge';

  static defaultProps = defaultProps;

  private readonly getContent = () => {
    const { children } = this.props;
    const isChildrenIcon = isIcon(children);
    let content = children;

    if (!isChildrenIcon && Number(children) > maxNumberBeforeTruncation) {
      content = '99+';

/** is the text has dark or light skin */
  light?: boolean;

  /** typography of the heading */
  appearance?: Appearance;
}

export interface State { tagName: TagName; }

const defaultProps: Props = {
  appearance: Appearance.H1,
  light: false
};

const StyledText = withStylable(
  CoreText,
  style,
  ({light, appearance}) => ({light, appearance}),
  defaultProps
);


export class Heading extends React.PureComponent {
  static displayName = 'Heading';

  static defaultProps: Props = defaultProps;

  state = {tagName: (this.props.appearance.toLowerCase()) as TagName}

  render() {
    return (

onClickOutside: noop,
  onShow: noop,
  onHide: noop,
  active: false,
  theme: 'light',
  disabled: false,
  children: null,
  size: 'normal',
  shouldCloseOnClickOutside: false,
  textAlign: 'left',
  relative: false,
  bounce: false,
  timeout: 0,
};

const TooltipBO = withStylable(
  CoreTooltip,
  style,
  ({
    appendTo,
    placement,
    alignment,
    theme,
    showTrigger,
    hideTrigger,
    active,
    bounce,
    disabled,
    size,
    relative,
    shouldUpdatePosition,
  }) => ({