How to use the @kiwicom/orbit-design-tokens.defaultTokens.spaceSmall function in @kiwicom/orbit-design-tokens

);
  }
}

const styles = StyleSheet.create({
  line: {
    flexDirection: 'row',
    height: parseInt(defaultTokens.heightInputNormal, 10),
  },
  icon: {
    paddingHorizontal: parseInt(defaultTokens.spaceSmall, 10),
    justifyContent: 'center',
  },
  counter: {
    flex: 1,
    paddingEnd: parseInt(defaultTokens.spaceSmall, 10),
    flexDirection: 'row',
    alignItems: 'center',
  },
  counterUnderline: {
    borderBottomColor: defaultTokens.paletteInkLighter,
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  label: {
    flex: 1,
    fontSize: parseInt(defaultTokens.fontSizeTextLarge, 10),
    color: defaultTokens.colorTextAttention,
  },
  stepperNumber: {
    width: parseInt(defaultTokens.spaceXXXLarge, 10),
    textAlign: 'center',
    fontSize: parseInt(defaultTokens.fontSizeTextNormal, 10),

);
  }
}

export default withHover(SortTab);

const containerHeight = {
  web: 60,
  mobile: 40,
};
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row-reverse',
    justifyContent: 'flex-start',
    padding: parseInt(defaultTokens.spaceSmall, 10),
    borderTopColor: 'transparent',
    overflow: 'hidden',
    web: {
      borderTopWidth: 3,
      userSelect: 'none',
      height: containerHeight.web,
      paddingHorizontal: parseFloat(defaultTokens.spaceLarge),
    },
  },
  heightMobile: {
    height: containerHeight.mobile,
  },
  heightWeb: {
    height: containerHeight.web,
    paddingBottom: 3,
  },

{pickerOptions}
          
        
      
    );
  }
}

const webStyles = {
  picker: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: parseInt(defaultTokens.heightInputNormal, 10),
    paddingLeft: parseInt(defaultTokens.spaceSmall, 10),
    paddingRight: 44,
    fontFamily: 'Roboto',
    fontSize: parseInt(defaultTokens.fontSizeInputNormal, 10),
    background: 'transparent',
    border: 'none',
    WebkitAppearance: 'none',
    MozAppearance: 'none',
    appearance: 'none',
  },
  defaultOption: {
    display: 'none',
  },
};

{passenger?.visaRequired != null && (
          
        )}
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginBottom: parseInt(defaultTokens.spaceSmall, 10),
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingTop: parseInt(defaultTokens.spaceSmall, 10),
    paddingBottom: parseInt(defaultTokens.spaceMedium, 10),
  },
  passengerName: {
    flex: 1,
  },
});

export default PassengerCard;

style={[styles.radio, underline && styles.radioUnderline]}
        >
          
        
      
    );
  }
}

const styles = StyleSheet.create({
  line: {
    flexDirection: 'row',
    height: parseInt(defaultTokens.heightButtonNormal, 10),
  },
  icon: {
    paddingHorizontal: parseInt(defaultTokens.spaceSmall, 10),
    justifyContent: 'center',
  },
  radio: {
    flex: 1,
    paddingEnd: parseInt(defaultTokens.spaceMedium, 10),
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  radioUnderline: {
    borderBottomColor: defaultTokens.paletteInkLighter,
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  label: {
    fontSize: parseInt(defaultTokens.fontSizeButtonLarge, 10),
    color: defaultTokens.colorTextAttention,
  },

container: {
    position: 'relative',
    height: parseInt(defaultTokens.heightInputNormal, 10),
  },
  icon: {
    position: 'absolute',
    top: 10,
    end: 10,
  },
});

const webStyles = {
  picker: {
    width: '100%',
    height: parseInt(defaultTokens.heightInputNormal, 10),
    paddingLeft: parseInt(defaultTokens.spaceSmall, 10),
    paddingRight: 44,
    fontSize: parseInt(defaultTokens.fontSizeInputNormal, 10),
    borderWidth: parseFloat(defaultTokens.borderWidthInput),
    borderColor: defaultTokens.borderColorInput,
    backgroundColor: defaultTokens.backgroundInput,
    borderRadius: 3,
    WebkitAppearance: 'none',
    MozAppearance: 'none',
    appearance: 'none',
  },
  defaultOption: {
    display: 'none',
  },
};

);
  }

  return null;
};

const styles = StyleSheet.create({
  text: {
    fontSize: parseInt(defaultTokens.fontSizeTextSmall, 10),
    color: defaultTokens.colorTextSecondary,
    marginTop: parseInt(defaultTokens.spaceSmall, 10),
    marginBottom: parseInt(defaultTokens.spaceMedium, 10),
    marginStart: 48,
  },
});

export default createFragmentContainer(SectorStopoverDuration, {
  data: graphql`
    fragment SectorStopoverDuration_data on Sector {
      stopoverDuration
      departure {
        stop {
          city {
            name
          }
        }
      }

onPress={this.handleSavePress}
              type="primary"
              label="Save"
            />
          
        
      
    );
  }
}

const styles = StyleSheet.create({
  sectionLabel: {
    color: defaultTokens.colorTextAttention,
    marginTop: parseInt(defaultTokens.spaceLarge, 10),
    marginBottom: parseInt(defaultTokens.spaceSmall, 10),
    paddingHorizontal: parseInt(defaultTokens.spaceMedium, 10),
  },
  bottomButtons: {
    flexDirection: 'row',
    marginTop: parseInt(defaultTokens.spaceMedium, 10),
    margin: parseInt(defaultTokens.spaceXXSmall, 10),
  },
  buttonWrapper: {
    flex: 1,
    margin: parseInt(defaultTokens.spaceXXSmall, 10),
  },
});

export default PassengersInputs;

{Platform.OS === 'ios' && hideActionIcon === false && (
              
            )}
          
        
      
    
  );
}

const iconMargin = parseFloat(defaultTokens.spaceSmall);

const styles = StyleSheet.create({
  container: {
    marginTop: StyleSheet.hairlineWidth,
    ios: {
      marginBottom: -StyleSheet.hairlineWidth,
    },
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  icon: {
    marginEnd: iconMargin,
  },
  actionIcon: {

color: defaultTokens.paletteRedNormalActive,
  },
  inputContainerBorderFocused: {
    web: {
      borderColor: defaultTokens.borderColorInputFocus,
      borderWidth: parseFloat(defaultTokens.borderWidthInputFocus),
    },
  },
  inputContainerBorderError: {
    borderColor: defaultTokens.borderColorInputError,
  },
  inlineLabel: {
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    paddingEnd: parseFloat(defaultTokens.spaceSmall),
  },
  prefix: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingEnd: parseFloat(defaultTokens.spaceSmall),
  },
  suffix: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingStart: parseFloat(defaultTokens.spaceSmall),
  },
  textInputPrefix: {
    color: defaultTokens.colorTextInputPrefix,
  },
  ...fontSizeGen(),
  ...heightGen(),